Intro to Accessibility

Transcript

1. accessibility
   

   View Slide

2. We’ll cover:
   What accessibility is, and why it’s important
   1
   2
   3
   A brief overview of accessibility standards
   Basic accessibility testing
   

   View Slide

3. What is accessibility?
   

   View Slide

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’
   

   View Slide

5. Not clear...
   Disability is not binary.
   

   View Slide

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'
   

   View Slide

7. Globally relevant
   15% of the world’s population
   have some form of disability
   - WHO: 'Disability and Health'
   

   View Slide

8. Universal and indiscriminate
   285 million people are estimated to have
   disabilities adversely affecting their vision.
   - WHO: 'Visual Impairment and Blindness'
   

   View Slide

9. Why care?
   

   View Slide

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'
    

    View Slide

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'
    

    View Slide

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'
    

    View Slide

13. Better product
    - Image
    

    View Slide

14. Accessibility standards overview
    

    View Slide

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.”
    

    View Slide

16. Federal efforts
    - 18f.gsa.gov
    - playbook.cio.gov/designstandards
    

    View Slide

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.
    

    View Slide

18. WCAG (Web Content Accessibility Guidelines)
    ● Main principles:
    ○ Perceivable
    ○ Operable
    ○ Understandable
    ○ Robust
    - WCAG: 'Understanding the Four Principles of Accessibility'
    

    View Slide

19. Intro to accessibility testing
    

    View Slide

20. Basic accessibility testing
    ● The 60-second test:
    ○ Headings
    ○ “No styles”
    ○ Focus styles
    - David A Kennedy: 'Web Accessibility in 60 Seconds'
    

    View Slide

21. Content scan and “no styles”
    

    View Slide

22. Focus styles and keyboard access
    

    View Slide

23. Other places to start:
    ● Skip links ⇒
    ● Buttons
    ● Links
    ● Font Sizing
    ● Mobile Menus
    ● Forms
    

    View Slide

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'
    

    View Slide

25. ARIA
    - MDN
    

    View Slide

26. ARIA
    - MDN
    

    View Slide

27. ARIA
    - MDN
    

    View Slide

28. Color: Meaning
    - Paletton
    

    View Slide

29. Color: Meaning
    - Paletton
    

    View Slide

30. Color: Meaning
    - Paletton
    

    View Slide

31. Color: Legibility
    

    View Slide

32. Color: Legibility
    - NCSU
    Contrast Tool
    

    View Slide

33. Color: Legibility
    - NCSU
    Contrast Tool
    

    View Slide

34. Color: Legibility
    - NCSU
    Contrast Tool
    

    View Slide

35. ✓
    ✓
    We covered:
    What accessibility is, and why it’s important
    ✓
    An overview of accessibility standards
    Basic accessibility testing
    

    View Slide

36. Summing up...
    

    View Slide

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.
    

    View Slide

38. Remember:
    We need to stop thinking about accessibility as a feature,
    or as a constraint.
    

    View Slide

39. “Good accessibility is
    undetectable.”
    - David A Kennedy
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. Standards
    ● Section 508
    ● WCAG (Web Content Accessibility Guidelines)
    ● U.S. Web Design Standards
    

    View Slide

43. Social
    Join the conversation online:
    #a11y
    

    View Slide

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

    View Slide