Fix The Future - Accessibility Testing Using Wave
- 1. Let’s Fix the Future! Accessibility Testing with WAVE Kara Harkins October 19, 2019 #TechRebalanced @kara_h
- 2. Getting a Bit Meta … 1) Background and Installing WAVE 2) Using WAVE 3) WAVE Examples 4) Other Accessibility Issues Q&A sections are after each section. Note that examples are for web but can help with general accessibility (like alt text). I am always finding things to tweak on my own pages. Accessibility is never done.
- 3. Background and Installing WAVE
- 4. Background WCAG 2.* (3 levels) § Level A à Good! § Level AA àYay!! § Level AAA à WOW!!! § WCAG (Web Content Accessibility Guidelines) is a set of international standards. Section 508 § Current version is basically a copy/paste of WCAG 2.0. § Required for government and some others. This is akin to the CRPD and ADA in the physical space.
- 5. Main Disability Issues Hearing Vision Color Blindness Physical Ability Cognition (Often hardest accessibility issues for reengineering sites) Neurodiversity (can include autism, ADHD, etc) Learning Disabilities Seizures, other issues Some might overlap in some cases. Yes, temporary disabilities are included.
- 6. Why Care? Access for all is A Good Thing. Promotes good coding. See getting buy-in (next slide).
- 7. How to Convince Others (Getting Buy-In) A must if government (and some others). What if your main user were temporarily disabled? What if a new user is disabled? What if a developer becomes disabled? More users that can access site.
- 8. CMS (Content Management Systems) Big help with accessibility as they already handle many things so you can focus on accessibility of content. Drupal of course (8 is great) Wordpress Joomla! Various PHP/MySQL based systems Commonspot, etc ….
- 9. Testing Can you navigate without a mouse? Is your HTML correct? Run WAVE or another tool. The BEST test is to use tests by people with various disabilities.
- 10. WAVE Installer Extensions available for: - Chrome - Firefox - Some Chromium based browsers like brave (edge will be chromium based eventually) - https://wave.webaim.org/extensions for more details If none of these apply use https://wave.webaim.org . These URLs will also be on the next slide.
- 11. Questions so Far? Install WAVE or Use Form https://wave.webaim.org/extensions or https://wave.webaim.org Start playing with it. #TechRebalanced @kara_h
- 12. Using WAVE
- 13. WAVE Interface In a browser click this: OR If no extension go to https://wave.webaim.org and use this form:
- 14. You Will Now See This on the Left This is the summary panel and is shown by default. The ‘no styles’ button is your page without styles. The ‘contrast’ button is for testing color contrasts.
- 15. Details Tab This keeps going on, click on the symbols for more information. Note that not everything here is an issue but things to be aware of.
- 16. Documentation Tab Initially: The next slide will show what you will see here and the right side will have a tooltip.
- 17. Documentation Tab, Clicked Icon on Right
- 18. Outline Tab This goes on and on and is a good way of seeing the structure. Note that the h2 tags are indented from the h1, which is what you would expect.
- 20. WAVE Examples
- 21. WAVE: www.google.com Yes, even google shows errors so need to analyze what it reports.
- 22. WAVE: www.yahoo.com More possible errors than google.
- 23. WAVE: www.twitter.com/login (Not Logged In) Note the username and password fields are bad. Any guesses why this is bad?
- 24. WAVE: www.facebook.com (Not Logged In) A good use of labels.
- 25. WAVE: www.irs.gov Remember possible errors are not always errors, you have to investigate them to get more information.
- 26. WAVE: www.unh.edu A good use of modern things but they should look at their colors.
- 27. WAVE: www.washingtonpost.com Errors with alt text, pretty common and easy to fix:
- 28. WAVE: www.section508.gov No errors but they did not avoid some pretty common alerts.
- 31. Colorblindness Test for different conditions: https://www.toptal.com/designers/colorfilter/ Also WAVE, contrast button, desaturate page.
- 32. Contrast Check any proposed colors: https://webaim.org/resources/contrastchecker/ Also a contrast checker in WAVE. services articles resources community Foreground Color #0000FF Lightness Background Color #FFFFFF Lightness Pass Pass WCAG AA: WCAG AAA: The five boxing wizards jump quickly. Pass Pass WCAG AA: WCAG AAA: The five boxing wizards jump quickly. PassWCAG AA: Color Contrast Checker Contrast Ratio 8.59:1 permalink Normal Text Large Text Graphical Objects and User Interface Components WebAIM: Color Contrast Checker https://webaim.org/resources/contrastchecker/ 1 of 2 3/20/19, 8:11 AM
- 33. Why CSS Stylesheets? Allows overriding by users. Trend for things like <font> tags is to go away. Allows display code to be future proofed. The more text the better for accessibility technologies. Separating content and display is good design. Use relative sizing rather than pixel sizing (general tip).
- 34. <img> Examples NO § <img src=‘dog-2280748_960_720.jpg’> § <img src=‘dog-2280748_960_720.jpg’ alt=‘an animal’> § <img src=‘line.gif’ alt=‘a pretty line’> YES § <img src=‘dog-2280748_960_720.jpg’ alt=‘brown puppy with tan spots sitting on a tan couch’> § <img src=‘line.gif’ alt=‘’> § <img src=‘space.gif’ alt=‘’>
- 35. LINK Example NO Hardcoding a <STYLE></STYLE> section Using style=‘…..’ in an element Leaving out any attribute in the example below YES In <head> section -> <LINK rel=‘stylesheet’ type=‘text/css’ href=‘default.css’>
- 36. Form Element Example NO <p>University <input type=‘text’ id=‘universityname’></p> YES <p><label for=‘universityname’>University</label> <input type=‘text’ id=‘universityname’></p>
- 37. <html> Examples NO § <html> § <html class=’pageclass’> YES § <html lang=‘en’> § <html lang=‘jp’> § <html lang=‘en’ class=‘pageclass’>
- 38. Other Notes Only use tables for data (use divs for positioning, CSS Grid for example). Use headers in hierarchical order and do not skip them: H1, H2, H3, H4, etc. Aria (for low vision) is simply tags, but beyond scope of this course. Links should be descriptive, not just ‘click here’.
- 39. www.autisticadvocacy.org Not wave but I always admire this control on their page, including that there are options beyond them. Showing a commitment to accessibility like this really drives traffic to your site as people will use the tools and appreciate them being there.