A presentation at DevNexus in in Atlanta, GA, USA by Todd Libby
MAKING A STRONG CASE FOR ACCESSIBILITY TODD LIBBY @TODDLIBBY
THANK YOU! DEVNEXUS & SPONSORS & YOU!
ACCESSIBILITY ENGINEER @ WEBSTAURANTSTORE W3C INVITED EXPERT ACCESSIBILITY ENGINEER @ CENTRE FOR INCLUSIVE DESIGN FORMERLY @ KNOWBILITY OVER 20 YEARS PROFESSIONAL DEV/A11Y EXP.
MAINE
@TODDLIBBY HTTPS://TODDL.DEV
WEBAIM MILLION REPORT • ONE MILLION HOMEPAGES HTTPS://WEBAIM.ORG/PROJECTS/MILLION/
WEBAIM MILLION REPORT • ONE MILLION HOMEPAGES • 50.8+ MILLION ACCESSIBILITY ERRORS HTTPS://WEBAIM.ORG/PROJECTS/MILLION/
WEBAIM MILLION REPORT • ONE MILLION HOMEPAGES • 50.8+ MILLION ACCESSIBILITY ERRORS • DECREASED 1.1% SINCE FEBRUARY 2021 HTTPS://WEBAIM.ORG/PROJECTS/MILLION/
WEBAIM MILLION REPORT • 887 ELEMENTS TO 955 ELEMENTS PER HOME PAGE
WEBAIM MILLION REPORT • 887 ELEMENTS TO 955 ELEMENTS PER HOME PAGE • INCREASED 7.7% SINCE FEBRUARY 2021
WEBAIM MILLION REPORT • 887 ELEMENTS TO 955 ELEMENTS PER HOME PAGE • INCREASED 7.7% SINCE FEBRUARY 2021 • 5.3 % OF ALL HOME PAGE ELEMENTS HAD A DETECTED ACCESSIBILITY ERROR
96.8% HAD WCAG 2 FAILURES
LOW CONTRAST TEXT
WCAG SC 1.4.3 CONTRAST (MINIMUM) THE VISUAL PRESENTATION OF TEXT AND IMAGES OF TEXT HAS A CONTRAST RATIO OF AT LEAST 4.5:1 HTTPS://WWW.W3.ORG/WAI/WCAG21/ UNDERSTANDING/CONTRAST-MINIMUM.HTML
MISSING ALTERNATIVE TEXT
<img src=“/path/to/img/lobster.png”> 🚫 <img src=“/path/to/img/lobster.png” alt=“”> ✅ <img src=“/path/to/img/lobster.png” alt=“Todd’s lobster roll, hot butter, and blueberry soda.”> ✅
• LOW CONTRAST TEXT • MISSING ALTERNATIVE TEXT FOR IMAGES • EMPTY LINKS • MISSING FORM INPUT LABELS • EMPTY BUTTONS • MISSING DOCUMENT LANGUAGE
96.5% OF ALL ERRORS
EXAMPLES OF PRACTICAL DIGITAL ACCESSIBILITY “LOW-HANGING FRUIT” •COLOR CONTRAST THAT EXCEEDS GUIDELINES (>10:1 RATIO) •ACCESSIBLE COLOR SCHEMES •KEYBOARD/SCREEN READER ACCESSIBLE •ACCESSIBLE COMPONENTS (ACCORDIONS, MODALS, ETC.) •PERFORMANT WEB APPS, PWAs, MOBILE APPS, WEB SITES
MORE EXAMPLES OF PRACTICAL DIGITAL ACCESSIBILITY •SCROLLABLE INTERACTIVE CONTENT •ALTERNATIVE TEXT ON IMAGES WHERE NECESSARY (INFOGRAPHICS, CHARTS, GRAPHS) •ACCESSIBLE WHEN VIEWING MOBILE PHONE SCREEN SUNLIGHT GLARE •OTHER SITUATIONAL DISABILITIES •BROKEN ARM •CHILD ON LAP
DISABILITY IS JUST BLIND, DEAF, OR PARALYSIS, RIGHT?
DISABILITY IS JUST NOT VISUAL (BLIND), AUDITORY (DEAF), OR PHYSICAL (MOTOR SKILL, AMPUTEE, PARALYSIS)!
LEARNING / COGNITIVE ADHD / ADD FIBROMYALGIA / ARTHRITIS TREMORS / PARKINSON’S MIGRAINE HEADACHES
NOT SO GREATEST HITS (EXCUSES)
“THE CLIENT DOESN’T HAVE THE BUDGET FOR IT.”
“WE’LL GET TO IT AFTER LAUNCH.”
“WHY DO WE NEED TO EVEN MAKE THIS THING ACCESSIBLE?”
“WHY DO WE NEED TO EVEN MAKE THIS THING ACCESSIBLE?” “THERE IS JUST NOT ANY TIME.”
“WHY DO WE NEED TO EVEN MAKE THIS THING ACCESSIBLE?” “THERE IS JUST NOT ANY TIME.” “WE DON’T HAVE DISABLED USERS.”
“WHY DO WE NEED TO EVEN MAKE THIS THING ACCESSIBLE?” “THERE IS JUST NOT ANY TIME.” “WE DON’T HAVE DISABLED USERS.” “THE PEOPLE THAT USE OUR PRODUCT ARE NOT DISABLED.”
“IT’S A HUGE WASTE OF TIME.”
DEVELOPERS WILL FEEL LESS STRESS, LESS PRESSURE, LESS TIME SPENT REWORKING THINGS. YOU’RE LESS LIKELY TO BE SUED BY AN INDIVIDUAL OR INDIVIDUALS WHEN THEY COME ACROSS YOUR PRODUCT AND THEY CANNOT ACCESS IT.
BUY-IN HOW DO I GET BUY-IN FROM STAKEHOLDERS, CLIENTS, COLLEAGUES? • SUPPORTS TRICKLES DOWN FROM STAKEHOLDERS TO MANAGERS, TEAMS, AND INDIVIDUALS.
BUY-IN HOW DO I GET BUY-IN FROM STAKEHOLDERS, CLIENTS, COLLEAGUES? • SUPPORTS TRICKLES DOWN FROM STAKEHOLDERS TO MANAGERS, TEAMS, AND INDIVIDUALS. • DO THIS FROM THE START. LOW MAINTENANCE IS NEEDED, BECAUSE OF ACCESSIBILITY AND CLEAN CODE.
BUY-IN HOW DO I GET BUY-IN FROM STAKEHOLDERS, CLIENTS, COLLEAGUES? • SUPPORTS TRICKLES DOWN FROM STAKEHOLDERS TO MANAGERS, TEAMS, AND INDIVIDUALS. • DO THIS FROM THE START. LOW MAINTENANCE IS NEEDED, BECAUSE OF ACCESSIBILITY AND CLEAN CODE. • CITE INSTANCES FROM THE LAWSUITS THAT HAVE BEEN WON AGAINST MAJOR CORPORATIONS (DOMINO’S PIZZA, TARGET).
BUY-IN HOW DO I GET BUY-IN FROM STAKEHOLDERS, CLIENTS, COLLEAGUES? • SUPPORTS TRICKLES DOWN FROM STAKEHOLDERS TO MANAGERS, TEAMS, AND INDIVIDUALS. • DO THIS FROM THE START. LOW MAINTENANCE IS NEEDED, BECAUSE OF ACCESSIBILITY AND CLEAN CODE. • CITE INSTANCES FROM THE LAWSUITS THAT HAVE BEEN WON AGAINST MAJOR CORPORATIONS (DOMINO’S PIZZA, TARGET). • LIVE TESTING WITH DISABLED USERS RECORDED ON VIDEO.
ORGANIZATION ADVOCATES TEAMS OR INDIVIDUALS THAT ADVOCATE IN YOUR ORGANIZATION • HAVING A PERSON THROUGHOUT EACH DEPARTMENT OR A TEAM FOCUSED ON ACCESSIBILITY AS A LIAISON.
ORGANIZATION ADVOCATES TEAMS OR INDIVIDUALS THAT ADVOCATE IN YOUR ORGANIZATION • HAVING A PERSON THROUGHOUT EACH DEPARTMENT OR A TEAM FOCUSED ON ACCESSIBILITY AS A LIAISON. • SOMEONE THAT CAN ANSWER QUESTIONS AND WORK WITH OTHERS TO PRACTICE THE GUIDELINES AND WORK WITH OTHERS TO MAKE ACCESSIBLE PRODUCTS.
ORGANIZATION ADVOCATES TEAMS OR INDIVIDUALS THAT ADVOCATE IN YOUR ORGANIZATION • HAVING A PERSON THROUGHOUT EACH DEPARTMENT OR A TEAM FOCUSED ON ACCESSIBILITY AS A LIAISON. • SOMEONE THAT CAN ANSWER QUESTIONS AND WORK WITH OTHERS TO PRACTICE THE GUIDELINES AND WORK WITH OTHERS TO MAKE ACCESSIBLE PRODUCTS. • HELP SET UP DOCUMENTATION AND TOOLING, SERVE AS AN INTERMEDIARY BETWEEN DEPARTMENTS.
ASSESSMENT ASSESS THE PRODUCT AND THE PROFICIENCY WITHIN THE ORGANIZATION • GAUGING WHERE THE PRODUCT(S) ARE AS FAR AS HOW INCLUSIVE AND ACCESSIBLE THEY ARE IS A KEY PRIORITY.
ASSESSMENT ASSESS THE PRODUCT AND THE PROFICIENCY WITHIN THE ORGANIZATION • GAUGING WHERE THE PRODUCT(S) ARE AS FAR AS HOW INCLUSIVE AND ACCESSIBLE THEY ARE IS A KEY PRIORITY. • WHAT IS THE CURRENT STATE OF THE PRODUCT, WEBSITE, OR MOBILE APPLICATION?
ASSESSMENT ASSESS THE PRODUCT AND THE PROFICIENCY WITHIN THE ORGANIZATION • GAUGING WHERE THE PRODUCT(S) ARE AS FAR AS HOW INCLUSIVE AND ACCESSIBLE THEY ARE IS A KEY PRIORITY. • WHAT IS THE CURRENT STATE OF THE PRODUCT, WEBSITE, OR MOBILE APPLICATION? • GETTING THE GENERAL IDEA OF THE LEVEL OF KNOWLEDGE THAT TEAMS AND PEOPLE IN THE COMPANY CURRENTLY HAVE.
ASSESSMENT ASSESS THE PRODUCT AND THE PROFICIENCY WITHIN THE ORGANIZATION • GAUGING WHERE THE PRODUCT(S) ARE AS FAR AS HOW INCLUSIVE AND ACCESSIBLE THEY ARE IS A KEY PRIORITY. • WHAT IS THE CURRENT STATE OF THE PRODUCT, WEBSITE, OR MOBILE APPLICATION? • GETTING THE GENERAL IDEA OF THE LEVEL OF KNOWLEDGE THAT TEAMS AND PEOPLE IN THE COMPANY CURRENTLY HAVE. • HOW VERSED ARE THEY IN GUIDELINES (WCAG) AND PRACTICES?
ASSESSMENT ASSESS THE PRODUCT AND THE PROFICIENCY WITHIN THE ORGANIZATION • GAUGING WHERE THE PRODUCT(S) ARE AS FAR AS HOW INCLUSIVE AND ACCESSIBLE THEY ARE IS A KEY PRIORITY. • WHAT IS THE CURRENT STATE OF THE PRODUCT, WEBSITE, OR MOBILE APPLICATION? • GETTING THE GENERAL IDEA OF THE LEVEL OF KNOWLEDGE THAT TEAMS AND PEOPLE IN THE COMPANY CURRENTLY HAVE. • HOW VERSED ARE THEY IN GUIDELINES (WCAG) AND PRACTICES? • HOW MUCH TRAINING DO YOU HAVE AND WILL YOU NEED?
TRAINING MAINTAINING A WRITTEN RECORD • OF ALL ACCESSIBILITY TRAINING DONE • TO MEET REQUIREMENTS THAT APPLY TO THE ORGANIZATION
TRAINING MAINTAINING A WRITTEN RECORD • OF ALL ACCESSIBILITY TRAINING DONE • TO MEET REQUIREMENTS THAT APPLY TO THE ORGANIZATION • GREAT WAY TO KEEP DATA ON ALL TRAINING DONE IN ORGANIZATION
TRAINING MAINTAINING A WRITTEN RECORD • OF ALL ACCESSIBILITY TRAINING DONE • TO MEET REQUIREMENTS THAT APPLY TO THE ORGANIZATION • GREAT WAY TO KEEP DATA ON ALL TRAINING DONE IN ORGANIZATION • RECORD THE TRAINING AND WHO TRAINED AND WHEN IT WAS COMPLETED
TRAINING MAINTAINING A WRITTEN RECORD • OF ALL ACCESSIBILITY TRAINING DONE • TO MEET REQUIREMENTS THAT APPLY TO THE ORGANIZATION • GREAT WAY TO KEEP DATA ON ALL TRAINING DONE IN ORGANIZATION • RECORD THE TRAINING AND WHO TRAINED AND WHEN IT WAS COMPLETED • IF THERE IS NO INTER-ORGANIZATIONAL TRAINING USE ORGS THAT DO TRAINING.
TRAINING MAINTAINING A WRITTEN RECORD • OF ALL ACCESSIBILITY TRAINING DONE • TO MEET REQUIREMENTS THAT APPLY TO THE ORGANIZATION • GREAT WAY TO KEEP DATA ON ALL TRAINING DONE IN ORGANIZATION • RECORD THE TRAINING AND WHO TRAINED AND WHEN IT WAS COMPLETED • IF THERE IS NO INTER-ORGANIZATIONAL TRAINING USE ORGS THAT DO TRAINING. • DEQUE • TPGI • WEBAIM
GUIDELINES CONSISTENT IMPLEMENTATION • DESIGN SYSTEMS ENSURE ACCESSIBILITY AND INCLUSIVITY AND THE UNDERSTANDING OF CODE BETTER
GUIDELINES CONSISTENT IMPLEMENTATION • DESIGN SYSTEMS ENSURE ACCESSIBILITY AND INCLUSIVITY AND THE UNDERSTANDING OF CODE BETTER • ACCESSIBLE COMPONENTS REDUCE TIME TO IMPLEMENT
GUIDELINES CONSISTENT IMPLEMENTATION • DESIGN SYSTEMS ENSURE ACCESSIBILITY AND INCLUSIVITY AND THE UNDERSTANDING OF CODE BETTER • ACCESSIBLE COMPONENTS REDUCE TIME TO IMPLEMENT • TESTING PROCEDURES IMPLEMENTED SO PEOPLE CAN DO JOBS WELL AND EFFICIENTLY
GUIDELINES CONSISTENT IMPLEMENTATION • DESIGN SYSTEMS ENSURE ACCESSIBILITY AND INCLUSIVITY AND THE UNDERSTANDING OF CODE BETTER • ACCESSIBLE COMPONENTS REDUCE TIME TO IMPLEMENT • TESTING PROCEDURES IMPLEMENTED SO PEOPLE CAN DO JOBS WELL AND EFFICIENTLY • DOCUMENT GUIDELINES IN A COLLABORATIVE MANNER USING TOOLS
STANDARDS GUIDELINES FROM DIFFERENT COUNTRIES • AMERICAN DISABILITIES ACT (ADA) - UNITED STATES • SECTION 508 (U.S. GOVERNMENT)
STANDARDS GUIDELINES FROM DIFFERENT COUNTRIES • AMERICAN DISABILITIES ACT (ADA) - UNITED STATES • SECTION 508 (U.S. GOVERNMENT) • ACCESSIBLE CANADA ACT (ACA) - CANADA
STANDARDS GUIDELINES FROM DIFFERENT COUNTRIES • AMERICAN DISABILITIES ACT (ADA) - UNITED STATES • SECTION 508 (U.S. GOVERNMENT) • ACCESSIBLE CANADA ACT (ACA) - CANADA • EN 301 549 - EUROPEAN UNION
STANDARDS GUIDELINES FROM DIFFERENT COUNTRIES • AMERICAN DISABILITIES ACT (ADA) - UNITED STATES • SECTION 508 (U.S. GOVERNMENT) • ACCESSIBLE CANADA ACT (ACA) - CANADA • EN 301 549 - EUROPEAN UNION • WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) INTERNATIONALLY
STANDARDS GUIDELINES FROM DIFFERENT COUNTRIES • AMERICAN DISABILITIES ACT (ADA) - UNITED STATES • SECTION 508 (U.S. GOVERNMENT) • ACCESSIBLE CANADA ACT (ACA) - CANADA • EN 301 549 - EUROPEAN UNION • WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) INTERNATIONALLY • CONVENTION ON THE RIGHTS OF PERSONS WITH DISABILITIES (CPRD) • ARTICLE 9 • ARTICLE 21
USE CASES/TESTING HIRING DISABLED PEOPLE • TEST & RECORD CASES WHERE DISABLED USERS ARE USING THE PRODUCT
USE CASES/TESTING HIRING DISABLED PEOPLE • TEST & RECORD CASES WHERE DISABLED USERS ARE USING THE PRODUCT • PRESENT TO COLLEAGUES/STAKEHOLDERS
USE CASES/TESTING HIRING DISABLED PEOPLE • TEST & RECORD CASES WHERE DISABLED USERS ARE USING THE PRODUCT • PRESENT TO COLLEAGUES/STAKEHOLDERS • OUTSOURCE TESTING WITH COMPANIES: • APPLAUSE • FABLE
USE CASES/TESTING HIRING DISABLED PEOPLE • TEST & RECORD CASES WHERE DISABLED USERS ARE USING THE PRODUCT • PRESENT TO COLLEAGUES/STAKEHOLDERS • OUTSOURCE TESTING WITH COMPANIES: • APPLAUSE • FABLE • HIRE DISABLED PEOPLE! • TEACHING AND ADVOCATING
ACCESSIBILITY OVERLAYS
ACCESSIBE AUDIOEYE EQUALWEB FACIL’ITI USABLENET USERWAY MANY, MANY MORE!
________ WILL GET YOU SUED.
DON’T FALL FOR THE GRIFT!
!==
SO WHAT DO WE DO?
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES • SCREEN READER ANALYSIS BEFORE EVERY RELEASE
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES • SCREEN READER ANALYSIS BEFORE EVERY RELEASE • ANNUAL AUDITS
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES • SCREEN READER ANALYSIS BEFORE EVERY RELEASE • ANNUAL AUDITS • USER TESTING
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES • SCREEN READER ANALYSIS BEFORE EVERY RELEASE • ANNUAL AUDITS • USER TESTING • ACCESSIBILITY IS NEVER DONE! KEEP MOVING FORWARD!
MAINTENANCE ACCESSIBILITY IS NEVER DONE • AUTOMATED TESTING WHEREVER POSSIBLE WITH NEW RELEASES OR CHANGES • SCREEN READER ANALYSIS BEFORE EVERY RELEASE • ANNUAL AUDITS • USER TESTING • ACCESSIBILITY IS NEVER DONE! KEEP MOVING FORWARD! • LIKE THE WEB, ACCESSIBILITY IS ALWAYS EVOLVING
DO THE WORK
“…OUR INDUSTRY AS A WHOLE THINKS LESS AND LESS ABOUT ACCESSIBILITY (NOT THAT WE EVER HAD AN A GAME ON THE SUBJECT), AND TALKS LESS AND LESS ABOUT PROGRESSIVE ENHANCEMENT, PREFERRING TO CHASE THE EPHEMERAL GOAL POSTS OF OVERENGINEERED SOLUTIONS TO NON-PROBLEMS.” JEFFREY ZELDMAN - HTTPS://WWW.ZELDMAN.COM/2019/12/01/BLUEBEANIEDAY2019/
DESIGN AND DEVELOP FOR PEOPLE NOT LIKE YOURSELF AND KEEP THAT IN MIND WHEN THROWING WORDS LIKE “INCLUSIVE” AND “ACCESSIBLE” AROUND.
A11Y IS A RIGHT. NOT A PRIVILEGE. HTTPS://COTTONBUREAU.COM/PRODUCTS/A11Y-IS-A-RIGHT#/5254640/
LINKS SLIDES: HTTPS://NOTI.ST/COLABOTTLES/SJME5E/ MAKING-A-STRONG-CASE-FOR-ACCESSIBILITY LINKS: HTTPS://TODDL.DEV/SLIDES/
THANKS!
Accessibility is often overlooked or bolted on to the end of a project from the experiences in Todd’s career in web development and design. The case for accessibility is something we as people who create and build things for the web should be implementing and advocating for from the inception of a project to the release or handoff and beyond.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.