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