Developing an accessible website can already be quite tedious and difficult to begin with. Not to mention all the different rules and semantics you need to remember.
Thankfully, there are some tools that we can use to help us out, on top of the actual screen readers that are currently being used.
Chrome has a few plug-ins that help with identifying accessibility issues on a website. They are not the be-all end all of making a site accessible, but they really do help find some commonly overlooked or missed items. The following plugins are available for Chrome and Firefox.
The aXe plug-in adds another tab to the Developer Tools where you can do an analysis of the current website’s state and see what is wrong or missing. Clicking on the issue reveals the details of what is wrong, where it is happening and gives you suggestions on how to solve it.
Screenshot shown is the Chrome version of aXe.
WAVE – web accessibility evaluation tool
The WAVE plug-in is similar to aXe in that it does an analysis of the page in its current state and gives you a report. The main difference is that it displays notes and details within the page itself. It also gives you the ability to see the page without any styles, which is essentially how a screen reader will see it.
It also has an outline of all the headings on the page, so you can see if the headings are structured appropriately. H1s should be at the top, and then the numbering of the headings should not be skipped. (i.e, you should not have a h3 show up immediately after an h1).
The info icons also give you information about the elements, issues and even explain why it’s important for accessibility.
WAVE can take up quite a bit of browser processing, but the details it provides can be quite helpful when looking for accessibility items you may have missed.
Landmarks is another browser plugin available for Chrome and Firefox. It focuses solely on the main areas of the website like the header, navigation, main, and footers.
Landmarks in a website help a screen reader quickly identify specific sections of a website, so a screen reader user can quickly use shortcut keys to jump to a specific section of the website.
The plugin helps you visualize how sections of the website are organized.
The following list, taken from here, shows all the possible landmarks you can have on a website:
- banner: A region that contains the prime heading or internal title of a page.
- complementary: Any section of the document that supports the main content yet is separate and meaningful on its own.
- contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
- form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
- main: Main content in a document. In almost all cases a page will have only one role=”main”.
- navigation: A collection of links suitable for use when navigating the document or related documents.
- search: The search tool of a Web document.
- application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)
Even if you have all the plugins to find all the missing aria-labels and alt tags, the best tools to help in making sure a site is really accessible is screen readers. You can experience the same thing as a screen reader user by simply closing your eyes and using the screen reader to navigate your website. Just ask yourself “Do I know what is going on as I navigate this website?”
Here are some popular screenreaders:
We’ll start with one of the older screen readers available, JAWS. The JAWS screen reader works best with Internet Explorer, but it works well with Chrome and Firefox as well. It also has a huge list of shortcut keys which makes it easier for users to navigate through, not just browsers, but the Windows operating system as well (it is only available on Windows). https://support.freedomscientific.com/Content/Documents/Manuals/JAWS/Keystrokes.pdf
JAWS is updated quite often, and it’s making great strides with each update. From my own experience, even within the year and a half I was working with it, there were significant improvements.
The main downside to JAWS is that you have to pay for a license to use it. There is a free trial period, but the cost to use JAWS can get up to $1200 for a license, or $90/year.
NVDA (Non-Visual Desktop Access)
NVDA is a screen reader that pairs well with Chrome and Firefox. Unlike JAWS, NVDA is free, but like JAWS, is only available for Windows. (They do accept donations though). NVDA does not have as many features and shortcuts as JAWS, but it does cover all the major functionality with their set of shortcut keys, found here, https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts.
They do update it quite often as well, but from my own experience, sometimes things may work differently than a previous version, but considering it’s free, it is still a solid screen reader to use. There are also some aria roles that NVDA interprets better than JAWS.
Voice over is Apple’s screen reader for both MacOS and iOS. It comes installed with both operating systems. Compared to the other screen readers, Voice over is falling behind. They don’t read or pick up all the aria-roles and the keyboard shortcut keys available is noticeable less than JAWS and NVDA. (https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
The iOS version is even more difficult to develop for as there are less functionality than the desktop one. It does not outline the shape of the focused element correctly, which can be frustrating to deal with in development.
Despite Voice Over being difficult to work with, they still do pick up all the fundamental aria attributes, so if you can use Voice over on your website and have it still accessible, you’ve got a pretty accessible website.
TalkBack is AndroidOS’ screen reader. It comes installed as part of AndroidOS. It works well with the base Android setup, but with AndroidOS being partly open source, it’s possible that not all Android devices work will with Talk Back.
Between TalkBack and Voiceover iOS, TalkBack is the more superior screen reader. It picks up a many aria attributes and interprets them very well.
Screen Reader Usage
Now you may be wondering, which screen reader is used the most? Well, there is a survey that WebAIM (Web Accessibility In Mind) does every 2 years. This is the top 3 results from a survey done in 2017 is as follows:
As you can see, 3 out of 4 people use JAWS and NVDA.. Now at the time of this blog, the results may alter, but one thing to note is that ever since WebAIM has been doing surveys, every time, JAWS has always been number 1. For more details of the survey you can visit https://webaim.org/projects/screenreadersurvey7/.
To improve usability, get a feel for the plugins and see which one works best for your style of development. Keep in mind that the plugins mentioned are great to help identify missing aria attributes, but they do not really help in determining if the screen reader experience is any good.
From my experience, using a screen reader is the best way to really determine if a website is accessible. With JAWS being the most used screen reader, it’d be ideal to make sure your site works with it, but if it’s not possible because of the cost, NVDA is still a solid screen reader.
Now that we know which tools to use to help with development we can start to get into the code. Our next blog post on accessibility will look at the various aria attributes available and semantic tags.