Making your website work for everyone: accessibility testing

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.

9c9bcdbab2f098f69b3adadde6ee2936?s=128

Natalie MacLees

November 01, 2019
Tweet

Transcript

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

    testing digita11y
  2. INCLUSIVE DESIGN & ACCESSIBILITY

  3. WHAT IS ACCESSIBILITY? ?

  4. Accessibility 
 means making the 
 web usable for 


    people with disabilities.
  5. One in four adults in the U.S. has a disability

    that impacts 
 major life activities
  6. Permanent Temporary Situational ! ! !

  7. Accessibility 
 means making the 
 web usable for 


    people with disabilities.
  8. Accessibility 
 means making the 
 web usable for 


    everyone.
  9. Web accessibility is the degree to which a website is

    usable by as many people as possible. LAURA KALBAG
  10. LEGAL CONSIDERATIONS "

  11. ACCESSIBILITY IS A CIVIL RIGHT #

  12. Is your website accessible?

  13. Chances are… NO.

  14. WebAIM Million

  15. 98% had identifiable accessibility issues

  16. WCAG Web Content Accessibility Guidelines 1.0 May 1999 2.0 December

    2008 2.1 June 2018
  17. A AA AAA WCAG Compliance Levels

  18. A11Y TIPS

  19. 1. Select colors with enough contrast

  20. Trendy theme design. Trendy theme design.

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

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

    % Message
  23. 3. Everything accessible and functional with keyboard only

  24. Home About Contact Home About Contact

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

  26. Video by George Morina from Pexels Here is some important

    text for you to try and read while the birds run around…
  27. 5. Provide meaningful text alternatives to non-text content

  28. Transcript Transcript Captions Descriptions Alt Text Captions & ' (

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

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

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

  32. Yoast SEO Grammarly Hemingway

  33. 8. USE HEADINGS,
 SUBHEADINGS, AND
 LISTS CORRECTLY

  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
  35. 9. BE INTENTIONAL WITH LINK TEXT

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

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

  38. WAVE wave.webaim.org

  39. Automatic checker caveats

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

  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/
  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/
  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/