Tools Used To Verify Interface Meets Universal Design Guidelines

Designing and developing governmental websites means keeping one eye on accessibility at all times. We'd argue that this should be the case on any type of project, because accessibility compliance is not just another regulation we ought to meet, but a true need for the society as a whole.

Most of the websites developed at SymSoft are required to meet WCAG 2.0 Level AA and ADA Section 508. We ought to meet compliance in our governmental projects, but we'd meet accessibility requirements even in private sector websites, such as the one we developed for the Rabobank America and Sacramento Municipal Utility District (SMUD). To keep track of the compliance, we test accessibility on multiple occasions throughout the project lifecycle, so naturally each one of our experts have their favorites.

Let's see what we use.

Accessibility tools for checking color contrast

Color Oracle is a free to download Mac application that sits in the menu bar and allows designers to evaluate how the design looks under different conditions Deuteranopia, Protanopia and Tritanopia.
Colour Contrast Analyzer is an app that offers color pickers and visual guides to common deficiencies as well as an RGB slider so you can nudge a color to see if you can make it compliant.
Lea Verou's color contrast ratio checker allows switching a given pair of colors between the text color and the background and it also supports more recent color values, such as RGBa or HSLa, supported in all modern browsers, down to IE 9.

Accessibility tools for checking the code

WAVE Browser extension for Chrome and Firefox will check a range of features, including color contrast, the use of alt text, Accessible Rich Internet Applications (ARIA) labels, form features, Document Object Model (DOM) structure, missing titles, duplicate content and much more. The tool also provides tips on how to fix the found errors and references to accessibility guidelines too. We find it very useful for quickly checking heading hierarchy in the Outline view.
Siteimprove accessibility checker features a handy option to choose responsibility, i.e. which job role is usually the right one to fix the found issue. You can choose between Editors, Webmasters or Developers.
AChecker is an online tool for testing live websites, which also provides results grouped by Guidelines.

Accessibility tools for testing keyboard navigation

Mozilla Firefox is a great tool for checking if the website can be used with a keyboard. To enable keyboard navigation, locate and enable the "Always use the cursor keys to navigate within pages" setting in your Settings or Preferences panel.

Operating system level accessibility testing tools

NVDA (NonVisual Desktop Access) is a free screen reader that enables blind and vision impaired people to use computers. It helps us evaluate if the blind and visually impaired users would be able to comfortably access the website content using the text-to-speech output and keyboard shortcuts.
JAWS (Job Access With Speech) is a paid-for, but a very popular computer screen reader for Windows. Obviously, we want to throughly test our websites in JAWS, as many people with vision impairment rely on this tool. It's the tool we use the most for ensuring adequate text to speech functionality.
Mac OS VoiceOver function help us quickly evaluate how the content will be read by the screen reader. It's an easy to use and convenient feature, as once enabled with Option + Command + F5 or in the System Preferences, it's accessible via the contextual (right-click) menu. However, we always make sure to perform the final check with JAWS and NVDA before shipping.

Building the inclusive web

More than 280 million visually impaired internet users have difficulty accessing online content that is published without thinking beyond the graphical interface. That's why we made our mission to improve accessibility on our websites, test them for accessibility compliance and educate our clients about the web accessibility best practices.

Now, testing websites for accessibility and learning what needs to be fixed is only the first step. The second step is prioritizing and assigning roles and responsibilities. Accessibility tasks can be roughly split into two categories:

Building accessible system, including the design, code and interaction patterns. This is responsibility of designers, developers and webmasters.
Creating accessible content, including alternate formats for video and graphical content, the use of semantically appropriate markup. This is responsibility of the website editors, content authors, media mangers and translators.

Lastly, some features and requirements such as a proper color contrast ratio or interactive link states are easy to meet or remedy. Others like transcripts for video content or translation to different languages require a much more intense effort. In both cases, the easiest way to start is by simply testing if the website meets accessibility standards and creating a list of improvements.