Making your website work for everyone: accessibility testing

Are people with visual impairment able to use your website? What about people with hearing impairment, mobility issues, or cognitive disabilities? 1 in 5 Americans has a disability of some kind, so it’s important to make sure that your website is usable for everyone. An accessible and inclusively designed website respects the civil rights of everyone, expands your reach, downloads faster, is more usable, works better in different browsers and on different devices, has better SEO, is easier to manage, and demonstrates your commitment to social responsibility.

But how can you be sure your website works for everyone? In this workshop, we’ll walk you through testing your website, identifying potential issues, and fixing the most common accessibility problems. We’ll cover the basic principles of accessibility and inclusive design and share tips and tools for making and keeping your website accessible.

Transcript

1. MAKING YOUR WEBSITE WORK
   FOR EVERYONE
   Natalie MacLees
   @nataliemac
   Accessibility testing
   digita11y
   

   View Slide

2. INCLUSIVE DESIGN
   &
   ACCESSIBILITY
   

   View Slide

3. WHAT IS
   ACCESSIBILITY?
   ?
   

   View Slide

4. Accessibility 

   means making the 

   web usable for 

   people with disabilities.
   

   View Slide

5. One in four adults in the U.S.
   has a disability that impacts 

   major life activities
   

   View Slide

6. Permanent Temporary Situational
   ! ! !
   

   View Slide

7. Accessibility 

   means making the 

   web usable for 

   people with disabilities.
   

   View Slide

8. Accessibility 

   means making the 

   web usable for 

   everyone.
   

   View Slide

9. Web accessibility is the
   degree to which a website is
   usable by as many people as
   possible.
   LAURA KALBAG
   

   View Slide

10. LEGAL
    CONSIDERATIONS
    "
    

    View Slide

11. ACCESSIBILITY IS A
    CIVIL RIGHT
    #
    

    View Slide

12. Is your website accessible?
    

    View Slide

13. Chances are…
    NO.
    

    View Slide

14. WebAIM Million
    

    View Slide

15. 98%
    had identifiable accessibility issues
    

    View Slide

16. WCAG
    Web Content Accessibility Guidelines
    1.0 May 1999
    2.0 December 2008
    2.1 June 2018
    

    View Slide

17. A AA AAA
    WCAG Compliance Levels
    

    View Slide

18. A11Y TIPS
    

    View Slide

19. 1. Select colors with
    enough contrast
    

    View Slide

20. Trendy theme design.
    Trendy theme design.
    

    View Slide

21. 2. Don't use color as
    the only means of
    conveying
    information
    

    View Slide

22. Message
    Message
    Message
    Message
    $ Message
    $ Message
    % Message
    % Message
    

    View Slide

23. 3. Everything accessible
    and functional with
    keyboard only
    

    View Slide

24. Home About Contact
    Home About Contact
    

    View Slide

25. 4. Provide a way to
    stop or pause
    animations
    

    View Slide

26. Video by George Morina from Pexels
    Here is some important
    text for you to try and
    read while the
    birds run around…
    

    View Slide

27. 5. Provide
    meaningful text
    alternatives to
    non-text content
    

    View Slide

28. Transcript Transcript
    Captions
    Descriptions
    Alt Text
    Captions
    & ' (
    Audio Video Image
    

    View Slide

29. 6. AVOID IDIOMS, JARGON,
    ABBREVIATIONS, AND
    OTHER NONLITERAL
    WORDS
    

    View Slide

30. Accessible websites
    follow the WCAG (Web
    Content Accessibility
    Guidelines).
    

    View Slide

31. 7. CREATE CLEAR
    CONTENT AT AN
    APPROPRIATE
    READING LEVEL
    

    View Slide

32. Yoast SEO Grammarly Hemingway
    

    View Slide

33. 8. USE HEADINGS,

    SUBHEADINGS, AND

    LISTS CORRECTLY
    

    View Slide

34. H1: Title of page or post
    Intro paragraph
    H2: Section header
    Section paragraphs with some information
    H3: Subsection header
    Subsection paragraphs with some information
    H2: New section header
    Section paragraphs with some information
    

    View Slide

35. 9. BE INTENTIONAL
    WITH LINK TEXT
    

    View Slide

36. To download the documents,
    click here.
    Download the documents.
    

    View Slide

37. https://training.wp-accessible.org/
    

    View Slide

38. WAVE
    wave.webaim.org
    

    View Slide

39. Automatic checker
    caveats
    

    View Slide

40. Thank You!
    Natalie MacLees
    hiredigitally.com
    Download presentation slides:
    https://speakerdeck.com/nataliemac
    )
    

    View Slide

41. RESOURCES
    Accessibility Toolkit: hiredigitally.com/accessibility-toolkit
    WAVE: wave.webaim.org
    Koa11y: open-indy.github.io/Koa11y/
    Axe: deque.com/axe
    Alternative text for images: make.wordpress.org/accessibility/
    handbook/content/alternative-text-for-images/
    Hemingway: hemingwayapp.com
    Grammarly: grammarly.com
    Yoast SEO: wordpress.org/plugins/wordpress-seo/
    

    View Slide

42. RESOURCES
    WP Accessibility: wordpress.org/plugins/wp-accessibility/
    Creating accessible PDF documents: gla.ac.uk/myglasgow/
    digitalaccessibility/documents/pdfdocuments/
    Create accessible PDFs: section508.gov/create/pdfs
    Create accessible digital products: section508.gov/create
    Color contrast checker webaim.org/resources/contrastchecker/
    

    View Slide

43. BIBLIOGRAPHY
    Prevalence of Disabilities and Health Care Access by Disability Status
    and Type Among Adults, CDC August 2018: cdc.gov/mmwr/volumes/67/
    wr/mm6732a3.htm?s_cid=mm6732a3_w
    WebAIM Million: webaim.org/projects/million
    10 Tips for Publishing Accessible Content: palantir.net/blog/10-tips-
    publishing-accessible-content
    Majority of websites are inaccessible to blind users: sdtimes.com/
    softwaredev/report-majority-of-websites-are-inaccessible-to-blind-
    users/
    

    View Slide