Screen Readers and CSS Layout

In order to find out how screen readers deal with CSS layouts, Bob Easton made a couple of test cases available at Access Matters. The results are presented in Screen Readers and CSS Layout.

The test cases were tested with the three leading screen readers: Jaws, Window Eyes, and IBM Home Page Reader. I have tested the pages with Apple VoiceOver with similar results.

The outcome of the test is that screen readers speak content in the order it is in the markup. No big surprise, but good to have it confirmed since that’s what most of us have been assuming all along.

Posted on September 12, 2005 in Accessibility, CSS, Quicklinks


  1. I know I’m pedantic, but HPR isn’t a Screen Reader, it’s just a Voice Browser. Screen Readers play in a different league (which doesn’t make a difference from a web developers POV, but as I said, i’m pedantic).

  2. I think this information allows us to add something of a low-fidelity test for screen-reader compatibility: turning off CSS and reading your code in order to make sure it makes sense when spoken. It might seem fairly obvious, but at least now we know “screen order” is not a factor.

    And it looks like coding your content first and navigation second, and then re-ordering them in CSS not only benefits a search engine, but also those on assistive tecnology .

  3. According to HI, a screen reader called Infovox is the mostly used screen reader in Sweden. Have you had any chance to try this software and how does it behave in a CSS based layout?

    HI (Swedish)

    Babel (Swedish)


  4. Yeah, nothing unexpected there. I can understand that it makes sense to have content first and then have navigation. But what about the users who actually use it and have to deal with all the bad coded pages in this regard? They must somehow manage to survive reading all these sites with million links on the left navigation at the top of html markup. They probably use some tricks to actually get the content fast. It would be nice to actually get feedback from users who use screen readers everyday.

  5. September 13, 2005 by Roger Johansson (Author comment)

    Jens: Nope, never had a chance to try it. I’d be surprised if it behaves differently than the tested screen readers/voice browsers though.

    A sidenote: Why do some screen reader vendors find it necessary to make getting hold of a demo as difficult as possible? Isn’t it in their interest to let people evaluate their products without hassle? Just let me download a demo without having to give up my social security number and a DNA sample.

  6. Jens: Infovox is not a screen reader. It is a speech synthesizer for swedish voices which you use together with a screen reader. In Sweden (like in many other countries), JAWS is the most popular screen reader.

  7. Pete, thanks a lot for your input, I was not aware of that. This makes me really happy to hear. This will make the development much more easier when we look at support for screen readers.

  8. Did you try this with Full Keyboard Access turned on and also turned off (Universal Access control panel)? It might make a difference.

  9. September 17, 2005 by Roger Johansson (Author comment)

    Joe: I have now :-)

    As far as I can tell it doesn’t make any difference at all. I also tried toggling “Press Tab to highlight each item on a webpage” in Safari’s preferences, and that doesn’t seem to affect VoiceOver either.

    I did notice that activating VoiceOver will toggle Full keyboard access from “Text boxes and lists only” to “All controls”. Toggling it back while VoiceOver is active does not seem to have any effect.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.