If you’ve made the commitment to improve the accessibility of your website, or the websites you design and build, congratulations!
There’s a wealth of information, posts, resources, and online tools to help you design and build accessible sites.
But how do you evaluate your website for accessibility?
That question was answered at yesterday’s University of Michigan (UM) Web Accessibility Working Group meeting.
Rather than a speaker presentation, yesterday’s meeting was a live accessibility assessment by Scott Williams, UM web accessibility coordinator, of a recently published UM school website.
How did he begin his accessibility evaluation?
Manually checking the website.
Williams reviewed the layout of the site and information on the pages as he accessed the structure and content on the website. What I enjoyed about his review was that he didn’t immediately look at page source, instead focusing on the content and layout.
Commonly Seen Issues
Though they didn’t all apply to the site being reviewed, Williams noted items he frequently sees when analyzing sites for accessibility:
- Carousel or slideshow on the home page (problematic if not coded correctly)
- Faded out social media icons, which cause issues for people with low vision
- Cluttered, crowded pages, with little space between page elements
When he encounters those issues, he makes a note to look at the code and styles when he later reviews page source.
Keyboard Testing
After his initial review of the site layout and content, Williams continued his analysis with keyboard testing. By tabbing through the site and using the arrow keys, he demonstrated how to navigate the page, visually see focus, as well as the page layout.
Does focus display after a couple tabs? If not, it’s likely outlines have been disabled in CSS. If you were to review the stylesheet, you’d likely see outline: none, which removes visible focus.
Making keyboard focus obvious provides feedback to users who can confirm where they are on the page.
Williams recommended not relying on browser defaults for focus; Firefox is problematic with a thin dotted line, which isn’t very evident.
Another tip: when styling the outline, consider color contrast. A light blue color on a medium blue color doesn’t work well.
Screen Readers
Only after visually reviewing the page and using the keyboard did Williams discuss screen readers. His recommendation is to always begin accessibility assessments with manual reviews.
For screen readers, Williams recommends using the free NVDA (NonVisual Desktop Access) or Apple VoiceOver screen readers to check the website pages. Unfortunately, Android TalkBack isn’t as robust as NVDA or VoiceOver.
While we didn’t have time for a VoiceOver or NVDA demo, Williams did find time to show how he uses automated accessibility checkers.
Automated Accessibility Checkers
There’s a number of automated accessibility checkers available, some are online, others are downloadable programs or available as plugins.
Williams used two checkers at yesterday’s meeting, highlighted another checker, and discussed features and strengths:
- Tenon.io: Available online, free trial, or monthly/yearly pricing. Currently tests numerous criterion and tests for Web Content Accessibility Guidelines (WCAG) 2.0 A, AA, and AAA. Tenon displays each violation, the number of violations, and offers an explanation. Errors are explained in the right sidebar.
- aXe plugin for Chrome. Available for free in the Chrome Web Store. A lightweight plugin, aXE has a clean interface and groups results well. It displays the WCAG violation and the number of violations for each violation in a list.
- WAVE. Available as a WAVE online tool, or in the browser as a Firefox addon, or Chrome plugin. WAVE is very graphical, displaying errors and alerts on the page with small colorful icons. You can easily find insonsistencies in styles by disabling styles in the WAVE sidebar.
A Few Accessibility Tips
As he analyzed the website, Williams shared helpful tips to keep in mind for web pages.
- Always alert the user if a new page will be opened when a link is selected. You can add an “opens a new page” in the link text, or if it’s an image, include the info in the ALT text.
- Be mindful of nesting headings correctly
- Test color contrast for your links, hover/focus states, and test page elements that display with different background colors.
At the end of the assessment, Williams asked what tools people use for color contrast testing. Here’s a few recommendations:
- Colour Contrast Analyzer tool (Windows and Mac) by The Paciello Group
- Online Check My Colours site, where you submit your page URL and results are displayed for entire page
- WebAIM Color Contrast Checker, where you submit the foreground and background colors
- Accessible Colors, an online site that evaluates color combinations and offers suggestions for modifying color lightness
What tools do you use for website accessibility testing?
