We can’t all get access to a screen reader better yet find the time to tame them so here is a quick tip on how to test how well your web content supports screen reader users. All you need is a browser, a plugin and 5 minutes.
Note: This helps you test the foundation of your web page: alternatives, headings, data tables, form labels etc. It’s not a substitute for testing with a screen reader for more complex content such as WAI ARIA.
For the purposes of this blog post I’m going to use the Web Accessibility Toolbar for Internet Explorer simply because I like how it outlines headings the best. You can also try this using the Web Developer Toolbar for Firefox or the FireEyes plugin for Firebug in Firefox (my tool of choice for day to day testing).
I used the BBC home page as shown below in Internet Explorer with the Web Accessibility Toolbar installed.
- Download and install the Web Accessibility Toolbar.
- Select your page to test.
- Highlight the images’ (Images > Show images): this outlines the images and displays the alt text.
- Disable the images (Images > Remove images): this removes the images leaving just the alt text.
- Disable the CSS (CSS > Disable CSS): this removes the CSS leaving a text version of the page rendered in code order
- Outline the headings (Structure > Headings): the headings and their levels are highlighted.
- Outline WAI ARIA landmarks (Structure > WAI ARIA Landmarks): outlines landmarks.
- Highlight form labels (Structure > Fieldsets / Labels): this highlight if form elements have labels and are part of fieldsets
- Highlight title tags (Doc info > titles): this highlights what elements has a title tag and what they say.
- Highlight data tables (Tables > Show data tables and Show headers): highlights table headers.
It’s always better to test with a screen reader and if you haven’t heard one you should give one a go. NVDA is free on Windows and VoiceOver is bundled on Mac so there’s no cost to stop you. Both also have support for WAI ARIA (to varying degrees).
For more complex content you will need to set up a screen reader test environment and test output in more detail. The kind of content I’m thinking of is complex data tables, forms, dynamically updated content, scripted widgets (sliders, carousels, flyout menus, tab panels, accordions etc) and all WAI ARIA content.