Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building websites for all


Published on

Web Accessibility and Inclusive Design

Published in: Design
  • Login to see the comments

Building websites for all

  1. 1. Building websites for all Web Accessibility and Inclusive Design Claudio Luis Vera - Designer, information architect, human
  2. 2. Hats that I’ve worn Ranked by insight and time spent in role Front- end developer Creative Director UX Designer Aging human Management Certified A11y professional Caregiver CLAUDIO LUIS VERA, SIMPLE-THEORY
  3. 3. 19% of the US population overall has a disability - US Census Bureau, 2010
  4. 4. 38.7%of the US population over age 65 has a disability - US Census Bureau, 2010
  5. 5. 81-98%of the US population over age 90 has a disability - from US Census Bureau, 90+ in the United States: 2006-2008
  6. 6. CLAUDIO LUIS VERA, SIMPLE-THEORY Types of disabilities Low vision Color blindness Blindness Cognitive disabilities Mood disorders Math disabilities Hearing impairments Physical impairments Lack of mobility Dyslexia Seizure disorders Psychological / psychiatric
  7. 7. CLAUDIO LUIS VERA, SIMPLE-THEORY Which ones are most important for websites? Low vision Color blindness Blindness Cognitive disabilities Mood disorders Math disabilities Hearing impairments Physical impairments Lack of mobility Dyslexia Seizure disorders Psychological / psychiatric
  8. 8. Not everyone sees the full color spectrum. 9% of males have some sort of color vision deficiency 0.5% of females -National Eye Institute
  9. 9. CLAUDIO LUIS VERA, SIMPLE-THEORY Designing for color deficiencies Don’t rely on color coding alone in your interface - add another graphical treatment for those who don’t see color
  10. 10. What does partial blindness feel like? Let’s see what a website looks like to someone with low vision
  11. 11. What does a motor disability feel like? Let’s try using a website without a pointing device.
  12. 12. #1“A little accessibility” helps no one.
  13. 13. What’s a screen reader? 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 NVDA JAWS Voiceover Mac
  14. 14. CLAUDIO LUIS VERA, SIMPLE-THEORY main Skipto main Skipto main main
  15. 15. CLAUDIO LUIS VERA, SIMPLE-THEORY Universal design 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.
  16. 16. #2Be accessible, or be sued.
  17. 17. CLAUDIO LUIS VERA, SIMPLE-THEORY Section 508 Mandates that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities. Section 508 affects: State universities Government contractors Software companies
  18. 18. CLAUDIO LUIS VERA, SIMPLE-THEORY Title III of the Americans with Disabilities Act Original interpretation: Prohibits discrimination on the basis of disability in the activities of places of public accommodations. Title III affects brick-and-mortar facilities, especially: Restaurants, movie theaters, schools, day care facilities, recreation facilities, and doctors’ offices
  19. 19. CLAUDIO LUIS VERA, SIMPLE-THEORY Title III of the Americans with Disabilities Act Who’s affected now: Websites operated by public accommodations Websites offering services available in public accommodations Who will be affected: Any commercial website, starting with major brands
  20. 20. CLAUDIO LUIS VERA, SIMPLE-THEORY Who’s been sued Target Dicks Sporting Goods Greyhound Lines Patagonia Adidas Blick Art Supplies Marriott Winn-Dixie eHarmony Harvard, MIT Red Roof Inns Safeway
  21. 21. Gil v. Winn-Dixie Landmark case tried in June 2017
  22. 22. CLAUDIO LUIS VERA, SIMPLE-THEORY 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. Brands are responsible for all third party software and services offered on their websites. JAWS and NVDA are the screen readers to be evaluated against
  23. 23. CLAUDIO LUIS VERA, SIMPLE-THEORY How an accessibility suit plays out: Inaccessible website fails for user with disability Website owner is notified by user Website owner fails to respond favorably User files ADA complaint Website owner fails to fix website quickly or file ADA statement User files ADA lawsuit in state or federal court Website owner fails to settle with plaintiff ADA case is decided by judge in non-jury trial
  24. 24. CLAUDIO LUIS VERA, SIMPLE-THEORY What lies ahead: There will be no guidance from the DOJ. Web accessibility will be decided piecemeal by the courts. Title III is likely to be found to apply to all websites All websites will have to be accessible or risk a lawsuit. All websites will need an ADA statement along with Privacy policy and copyright. WCAG 2.0 AA will be the standard going forward.
  25. 25. What is WCAG 2.0 AA? The international standard for web accessibility, made up of an exhaustive set of guidelines.
  26. 26. Because it’s boring AF.
  27. 27. CLAUDIO LUIS VERA, SIMPLE-THEORY Top accessibility mistakes Missing alt tags or alt text Using styles instead of headings Using buttons where links should go Insufficient color contrast Missing “Skip navigation” link Missing form field labels Broken tab index Social toolbars that don’t skip links
  28. 28. Choosing colors for accessibility You can use Lea Verou’s color checker to test ratios WCAG sets a minimum standard for contrast at a ratio of 4.5 : 1
  29. 29. CLAUDIO LUIS VERA, SIMPLE-THEORY Sample of a color palette built around color contrast. An accessible color palette
  30. 30. CLAUDIO LUIS VERA, SIMPLE-THEORY WAI-ARIA Applies to more complex interactivity, such as AJAX and javascript. Uses HTML attributes that tell assistive technologies how to handle the content that follows. Examples: aria-role aria-label=”my label” aria-hidden=”true”
  31. 31. CLAUDIO LUIS VERA, SIMPLE-THEORY Who’s responsible? How different disciplines impact web accessibility
  32. 32. CLAUDIO LUIS VERA, SIMPLE-THEORY Who’s responsible? Management ● sets budgets ● makes sure resources and processes are right for accessibility Accessibility consultants* ● conduct accessibility audit ● make recommendations ● create test plan (sometimes) Project management* ● Manages workflow and team’s adherence to guidelines
  33. 33. CLAUDIO LUIS VERA, SIMPLE-THEORY Who’s responsible? Design/UX/Creative ● Choose accessible design patterns ● Ensure sufficient color contrast (> 4.5) ● Ensure fonts are large enough (> 14pt) Content ● Add meaningful alt tags to images ● Add transcripts or captions to video ● Add transcripts to audio ● Enforce semantic header structure to HTML and PDF content
  34. 34. CLAUDIO LUIS VERA, SIMPLE-THEORY Who’s responsible? Front end dev ● Choose accessible components ● Declare language in header ● Set up skip navigation links ● Set up proper default heading structures ● Use links for hyperlinks ● Use buttons for form inputs Back end dev ● Choose accessible third-party apps for integration
  35. 35. #3Once accessible does not mean always accessible.
  36. 36. CLAUDIO LUIS VERA, SIMPLE-THEORY Staying in shape How do you keep inaccessible content and code from being added to your accessible site? ● Train content editors to be well-versed in accessibility ● Set up internal QA for content and peer review for code ● Budget for periodic audits ● Audit all third party components ● Accessibility needs to be part of the workforce’s culture.
  37. 37. CLAUDIO LUIS VERA, SIMPLE-THEORY What’s next BUILT-FOR-ALL INITIATIVE Open source / community initiative for checking apps and components for compliance. Seal of approval to be displayed on download page.
  38. 38. CLAUDIO LUIS VERA, SIMPLE-THEORY How to get more involved Learn to check your work Use WAVE, aXe, or other testing tools Get trained Courses are available through Deque U. Get certified Core (CPACC), technical (WAS) and combined (CPWA) certification Join UGA’s Web Accessibility Group IAAP IxDA Accessibility groups in various open source projects
  39. 39. CLAUDIO LUIS VERA, SIMPLE-THEORY Resources No Coffee vision simulator (Chrome extension) WAVE accessibility tester (Chrome/Firefox) AXE accessibility tester (Chrome dev tools) WebbIE (screenreader for the sighted) 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)