Access Matters recently confirmed what I knew was true of JAWS but was guessing about others: the leading screen readers speak your pages in the order in which they are coded and ignore CSS positioning. Good news for us; reordering your content with CSS is not only a best practice for search engine optimization, but also screen reader accessibility. So when you're dropping that two column layout with left navigation, put your content in the first <div> and your navbar in the second.

Another consideration would be the positioning of buttons in forms. If you want to position an action button above a table of data (or any other content), you could potentially code it after the table and use CSS-P to place it where you like.

Armed with this knowledge, we can now recommend another best practice: if you can't test your site in an actual screen reader, reading your xhtml in order for content comprehension is a good low-fidelity test to see if your content will make sense. Use Firefox's Web Developer extension to view your page without CSS or go into your code and do it manually.

I did a lot of testing recently with a screen reader for a client that was talking about screen reader accessibility, but balked when we explained that coding to Section 508 and WCAG doesn't guarantee anything and that we'd need to add a screen reader testing phase to declare their site "screen reader accessible."

Along the way, I learned quite a bit about JAWS 6, and realized that the learning curve for a sighted user is pretty significant, so I can imagine the hurdles facing blind users. I had to do quite a bit of Googling to find out that JAWS offers a "tables mode" and a "forms mode" that allows it interpret things like scope attributes on <th> tags, or to successfully select more than one item in a combo box.

It's been said several times elsewhere, but screen readers still have a way to go in standards support and just overall usability. In the meantime, the onus is on us to discover how to best accomodate users of assistive technology.

Labels: accessibility, CSS