Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Accessibility

Intro to Accessibility


Amberley Romo

January 19, 2016


  1. accessibility

  2. We’ll cover: What accessibility is, and why it’s important 1

    2 3 A brief overview of accessibility standards Basic accessibility testing
  3. What is accessibility?

  4. What is it? Accessibility refers to the design of products,

    devices, services, or environments for people with disabilities. Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia: ‘Accessibility’ and ‘Web Accessibility’
  5. Not clear... Disability is not binary.

  6. … rather a spectrum. “We are all at the most

    temporarily abled, moving in and sometimes out of states of disability throughout our lives.” - David Perry: 'Disabilities and Identity'
  7. Globally relevant 15% of the world’s population have some form

    of disability - WHO: 'Disability and Health'
  8. Universal and indiscriminate 285 million people are estimated to have

    disabilities adversely affecting their vision. - WHO: 'Visual Impairment and Blindness'
  9. Why care?

  10. Human rights The Internet is “increasingly an essential resource for

    many aspects of life: education, employment, government, commerce, health care, recreation, social interaction, and more. The Web is used not only for receiving information, but also for providing information and interacting with society.” - W3C: 'Overview'
  11. Social factors It’s a social issue, affecting: • the aging

    community • people with low literacy or lack of fluency • people with low bandwidth connections, or using older technologies • mobile access - W3C: 'Social Factors'
  12. Business case • Without considering accessibility, you may be disregarding

    15% of your potential audience • Accessible websites benefit from: ◦ Better SEO (search engine optimization) ◦ Reduced legal risk ◦ Demonstration of corporate social responsibility (CSR) ◦ Increased customer loyalty ◦ Reduced tech debt and easier maintenance - W3C: 'Developing a Web Accessibility Business Case'
  13. Better product - Image

  14. Accessibility standards overview

  15. Section 508 • Section 508 mandates that all website content

    be accessible to people with disabilities. • Part of a 1998 amendment to the Rehabilitation Act of 1973. • “Applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology.”
  16. Federal efforts - 18f.gsa.gov - playbook.cio.gov/designstandards

  17. WCAG (Web Content Accessibility Guidelines) • Developed through the W3C

    with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. - WCAG: 'Overview' The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’ s mission is to lead the Web to its full potential.
  18. WCAG (Web Content Accessibility Guidelines) • Main principles: ◦ Perceivable

    ◦ Operable ◦ Understandable ◦ Robust - WCAG: 'Understanding the Four Principles of Accessibility'
  19. Intro to accessibility testing

  20. Basic accessibility testing • The 60-second test: ◦ Headings ◦

    “No styles” ◦ Focus styles - David A Kennedy: 'Web Accessibility in 60 Seconds'
  21. Content scan and “no styles”

  22. Focus styles and keyboard access

  23. Other places to start: • Skip links ⇒ • Buttons

    • Links • Font Sizing • Mobile Menus • Forms
  24. ARIA ARIA is a set of special accessibility attributes which

    can be added to any markup, but is especially suited to HTML. The ‘role’ attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar. - MDN: 'An overview of accessible web applications and widgets'
  25. ARIA - MDN

  26. ARIA - MDN

  27. ARIA - MDN

  28. Color: Meaning - Paletton

  29. Color: Meaning - Paletton

  30. Color: Meaning - Paletton

  31. Color: Legibility

  32. Color: Legibility - NCSU Contrast Tool

  33. Color: Legibility - NCSU Contrast Tool

  34. Color: Legibility - NCSU Contrast Tool

  35. ✓ ✓ We covered: What accessibility is, and why it’s

    important ✓ An overview of accessibility standards Basic accessibility testing
  36. Summing up...

  37. Remember: Accessibility isn’t a checkbox or a checklist -- it’s

    part of the holistic approach to what we do, requiring a shift of perspective and priorities.
  38. Remember: We need to stop thinking about accessibility as a

    feature, or as a constraint.
  39. “Good accessibility is undetectable.” - David A Kennedy

  40. Testing tools / assistive tech • WAVE - Web Accessibility

    Evaluation Tool • NC State University Color Contrast Checker • Paciello: Color Contrast Checker • VoiceOver - OS X Screen Reader • Tota11y - An accessibility visualization toolkit • Paletton - Color perception simulation • Juicy Studio: Readability
  41. Resources & blogs • W3C: Web Accessibility Initiative (WAI) Resources

    • WebAIM: Resource List • Teach Access: Tutorial • Web Accessibility for Designers (Infographic) • a11y.me • davidakennedy.com • marcozehe.de • karlgroves.com
  42. Standards • Section 508 • WCAG (Web Content Accessibility Guidelines)

    • U.S. Web Design Standards
  43. Social Join the conversation online: #a11y

  44. Thanks! Questions? - Amberley Romo | @amberleyjohanna