In this installment of our series, we’re going to be looking at techniques, tools, and tips to ensure that your website is accessible to everyone that needs it. Accessibility isn’t easy, but it’s worth doing. The World Health Organization estimates that there are over 253 million people living with blindness or vision impairment in the world as of October 2017. If your website isn’t built to web accessibility standards, these folks won’t be able to use it. Thankfully, there are a number of resources to help your efforts:
WAVE
The WAVE validation tool is an invaluable piece of software from Web Accessibility In Mind (WAIM) that runs through your site and kicks back a report highlighting areas of concern. The report is broken up into Errors, Alerts, Features and ARIA flags.
Anything marked as an error needs to be taken care of immediately. These are things like missing alt-text, skipped headings, non-functional forms and the like. These accessibility errors will frustrate your users, or make it impossible for them to fully interact with your site. Alerts should be cleaned up as time allows and include things like redundant link names, skipped heading levels, or very small text. These are aggravating, but don't completely prevent a person from fully using your site.
Features and ARIA flags are a good "thumb's up" for accessibility. Features are things like an image with alt-text or including a skip link to allow screen readers to jump around your content as the user desires.
ARIA (or Accessible Rich Internet Application) flags are markups in the HTML code that tells a screen reader how to navigate or use your more complicated website elements. These are your widgets like buttons, drop-down lists and so on. including these greatly improves the user's ability to use your site's widgets.
There are Chrome and Firefox extensions that make it really easy to scan through your site looking for any glaring errors to resolve
Google Lighthouse
Google Chrome has a built-in auditing function called Lighthouse. To access Lighthouse, you can open the Google Console with Ctrl+Shft+J (Windows) or Cmd+Opt+J (Mac) and then click on Audits (if it’s not visible, try clicking the two arrows to the right of Network, Performance, etc).
In Lighthouse you’ll have the option to run a variety of audits of your site. Make sure “Accessibility” is checked and click “Run Audit” to get a breakdown of issues. Lighthouse will run through your website, and present 8 different tests and their results, as well as an accessibility score from 0-100.
Apple OS - Voiceover
Voiceover is a feature built into MacOS that reads aloud the text and other elements on your screen. It comes pre-configured to be compatible with refreshable braille displays and is developed to be built into all of Apple’s apps and services. VoiceOver also features a virtual control called the Rotor. It's accessed through rotating two fingers on the Macbook trackpad (as if you were turning a dial) and lets a user navigate directly to elements like headings, images and forms.
JAWS
JAWS (or Job Access With Speech), is Windows-based screen reader software for people that have lost their sight. Developed by Freedom Scientific, it reads text and other elements aloud, while also sending the same information to a user’s refreshable braille display without requiring the use of a mouse. Since it uses the HTML markup language to navigate the user through the content on your page, it’s important to make sure you’re following proper standards. Otherwise, your page is going to confuse and disorient the user.
At $900, it’s quite expensive, but feature-rich. JAWS has been the premiere screen reading software for decades.
NVDA
Non-Visual Desktop Access (NVDA) is similar to JAWS, though it’s not as feature rich. Fortunately, it’s also completely free and can be run from a USB stick for portability. Developed by two blind men, Michael and James, the screen reader was born out of a desire to make computer access affordable to the blind.
The A11Y Project
The A11Y Project is a collaborative effort of developers working to support and encourage accessibility efforts. Their name is a numeronym for "Accessibility", where numbers are used to replace letters in a word. So “Accessibility” becomes both “A + 11 characters removed + Y” and “Ally”. They did that to save space on social media platforms like Twitter, so that the saved characters could be used for an extra word or two on accessibility.
The Project maintains a website of resources for developers looking to make their sites more accessible. This includes a checklist to help map out what might be missing on your site. There's also a style guide that is a very useful reference for building code to meet accessibility standards. It’s broken up into sections for the varied components of websites. Each section contains sample markup and outlines the relevant sections of the Web Content Accessibility Guidelines. It’s well put together and worth looking at.
You can check out the beginning of our series if you missed it, and learn about what's guiding accessibility efforts.
