Quick tip: testing web content for screen readers without a screen reader

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.

The BBC home page before any content has been changed

  1. Download and install the Web Accessibility Toolbar.
  2. Select your page to test.
  3. Highlight the images’ (Images > Show images): this outlines the images and displays the alt text.
  4. Disable the images (Images > Remove images): this removes the images leaving just the alt text.
  5. Disable the CSS (CSS > Disable CSS): this removes the CSS leaving a text version of the page rendered in code order
  6. Outline the headings (Structure > Headings): the headings and their levels are highlighted.
  7. Outline WAI ARIA landmarks (Structure > WAI ARIA Landmarks): outlines landmarks.
  8. Highlight form labels (Structure > Fieldsets / Labels): this highlight if form elements have labels and are part of fieldsets
  9. Highlight title tags (Doc info > titles): this highlights what elements has a title tag and what they say.
  10. Highlight data tables (Tables > Show data tables and Show headers): highlights table headers.
The page will then be stripped back to the bare bones of content and semantics as shown in the screen shot below. This is roughly what a screen reader user should hear when running a screen reader over the page. Of course you don’t have to do all of the above, any combination of the above may serve your purposes.
The BBC home page as a screen reader may see it

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.

3 thoughts on “Quick tip: testing web content for screen readers without a screen reader

Comments are closed.