Building websites for all
- 1. BUILDING WEBSITES FOR ALL WEB ACCESSIBILITY AND INCLUSIVE DESIGN
- 2. Claudio Luis Vera Roles that I have played Ranked by insight and time spent in role Front- end developer Creative Director UX Designer Aging human Management Certified A11y professional Caregiver
- 3. of the US population overall has a disability - US Census Bureau, 2010 19%
- 4. of the US population over age 65 has a disability - US Census Bureau, 2010 39%
- 5. of the US population over age 90 has a disability - US Census Bureau, 2010 81- 98%
- 6. Disability is not a personal health condition. Disability comes from mismatched human interactions What is a disability?
- 7. Sometimes our limitations one our senses and physical abilities are the same. It’s just the circumstances that differ. Disabilities vs. Impairments
- 8. Permanent / Temporary / Situational Universal design serves everyone, not just the full-time disabled.
- 9. Create products and environments that the vast majority of people can use, taking into account our natural physical diversity. Design once, for use by all. Universal Design
- 10. What about tailoring user experiences for people with disabilities? Many view this as “separate but equal”
- 11. CAN WE TRUST OUR SENSES?
- 12. Low vision Color blindness Blindness Cognitive disabilities Mood disorders Math disabilities Chronic fatigue Types of disabilities Hearing loss Lack of mobility Dyslexia Seizure disorders Psychological / psychiatric
- 13. Low vision Color blindness Blindness Cognitive disabilities Mood disorders Math disabilities Chronic fatigue Visible disabilities Hearing loss Lack of mobility Dyslexia Seizure disorders Psychological / psychiatric
- 14. Low vision Color blindness Blindness Cognitive disabilities Mood disorders Math disabilities Chronic fatigue Which ones are most important for websites? Hearing loss Lack of mobility Dyslexia Seizure disorders Psychological / psychiatric
- 15. • What’s wrong with this picture? Sometimes our brains fail us.
- 16. Can you hear this image?
- 17. Can you read this?
- 18. 9% of males have some sort of color vision deficiency 0.5% of females -National Eye Institute Not everyone sees the full color spectrum.
- 19. 9% of males have some sort of color vision deficiency 0.5% of females -National Eye Institute Not everyone sees the full color spectrum.
- 23. Dirty window Cataracts Low vision
- 25. “A little accessibility” helps no one.
- 26. Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. -American Federation for the Blind What’s a screen reader? NVDA JAWS Voiceover Mac
- 27. main Skip to main Skip to main main
- 28. BE ACCESSIBLE OR BE SUED
- 29. Original interpretation: Prohibits discrimination on the basis of disability in the activities of places of public accommodations. Title III of the Americans with Disabilities Act Title III affects brick-and-mortar facilities, especially: Restaurants, movie theaters, schools, day care facilities, recreation facilities, and doctors’ offices
- 30. Who’s affected now: Websites operated by public accommodations Websites offering services available in public accommodations Title III of the Americans with Disabilities Act Who will be affected: Any commercial website, starting with major brands
- 31. Landmark case tried in June 2017 Gil v. Winn-Dixie
- 32. Main findings: Title III applies to websites that include services that are offered in a brick-and- mortar location. Gil v. Winn-Dixie Stores, Inc. Main findings: Title III applies to websites that include services that are offered in a brick-and- mortar location.
- 33. The trolls Law firms that regularly scan major brands’ sites for accessibility mistakes. Can recoup all legal fees Types of plaintiffs Pissed-off PwDs Individuals who are unable to complete core tasks on a website, app or user experience. Can only earn a nominal award.
- 34. What did Winn-Dixie fail to provide in its user experience? Where did the website fail?
- 35. Independence.
- 36. The international standard for web accessibility, made up of an exhaustive set of guidelines. What is WCAG 2.0 AA?
- 38. ● Missing alt tags or alt text ● Using styles instead of headings ● Using buttons where links should go ● Insufficient color contrast Top accessibility mistakes ● Missing “Skip navigation” link ● Missing form field labels ● Broken tab index ● Invisible focus indicators ● Social toolbars that don’t skip links
- 39. WCAG sets a minimum standard for contrast at a ratio of 4.5 : 1 You can use Lea Verou’s color checker to test ratios Choosing colors for accessibility
- 40. An accessible color palette
- 41. How different disciplines impact web accessibility Who’s responsible?
- 42. • Incorporate disabilities in your design thinking. • Check your work using testing tools. • Thoroughly review any third party widgets and apps before committing to them. • Make accessibility part of your regular QA process Getting accessibility into my workflow Tools: WAVE accessibility tool aXe developer tools Contrast checkers
- 43. 43
- 44. Once accessible does not mean always accessible.
- 45. WAVE accessibility tester (Chrome/Firefox) AXE accessibility tester (Chrome dev tools) WebbIE (text-based browser) No Coffee vision simulator (Chrome extension) Resources IAAP (International Association of Accessibility Professionals) Deque University (accessibility courses) UGA Web Accessibility Group (WAG) The lawsuit that will change web accessibility, (Gil v. Winn-Dixie blog post)
Editor's Notes
- #7: Source: Microsoft
- #10: Essential for some, useful for all.
- #13: Q: which disabilities are visible in someone else?
- #14: Q: which disabilities are visible in someone else?
- #15: Some of these, like dyslexia and math disabilities affect learning more than web accessibility
- #16: This is an example of the mismatch between our abilities and the task and hand. In this case, we are all disabled when it comes to interpreting this.
- #18: Click on text to go to http://geon.github.io/programming/2016/03/03/dsxyliea
- #21: For those of us who wear glasses, this should be really familiar.
- #22: An example of macular degeneration in center of vision field. Get a show of hands to see if anyone has had an optical migraine.
- #23: Cloudiness from cataracts
- #24: A driver with dirty windows can experience situations that are like having cataracts.
- #25: Navigate Winn-Dixie site with a glove
- #26: This is what 75% accessibility looks like.
- #27: Definition from http://www.afb.org/prodBrowseCatResults.aspx?CatID=49
- #28: Here is the same page in Chrome, and also with a rendering of how it would be read in a screen reader. Then pull up the page https://www.sonesta.com/us/louisiana/new-orleans/royal-sonesta-new-orleans and have it read with Voiceover.
- #30: Title III is an integral part of The Americans with Disabilities Act and the Rehabilitation Act of 1973. The key is the term “public accommodations” and its definition.
- #32: Juan Carlos Gil is a blind man living in Coral Gables, who sometimes shopped at the Winn Dixie on 27th Avenue.
- #35: Juan Carlos Gil is a blind man living in Coral Gables, who sometimes shopped at the Winn Dixie on 27th Avenue.
- #36: Self-sufficiency. Not having to rely on others.
- #37: WCAG = Web Content Accessibility Guidelines Why hasn’t WCAG gotten more traction among more web professionals?
- #40: Examples from color checking tool at http://leaverou.github.io/contrast-ratio/ WCAG AA requires 4.5:1 WCAG AAA requires 7:1 That effectively eliminates text on any midtone or bright color. WCAG 2.1 will require 3:1 contrast for non-text elements, like icons and infographics
- #41: Here’s a sample palette based around color contrast. It’s a revision of a palette from a branding company that’s treated like the Ten Commandments. A palette like this also explains where you can overlay text on a color
- #45: Here, a wheelchair ramp that was built perfectly, then got obstructed with decorative planters. You can build perfect accessibility and have it rendered useless by later modifications. As an accessibility professional, you can give a seal of approval to a site, but it only applies to the pages or templates you’ve reviewed and only for the dates you reviewed the site.