Fantastic presentation by Reinhard Stebner tonight. I wasn’t expecting much and but left enlightened and very happy that I went. Stebner’s presentation taught me a lot.

Take aways

Much like tables (which should only be used for actual tabular data, duh), avoid bulleted lists except for things that need to be in lists: “cat, dog, mouse.” This means no lists for navigation. Divs and spans are the way to go as they’re invisible to screen readers. Stebner was tabbing through the far too many lists on mica.edu and they gave no clue as to where he was on the page and no information other than “List, 10 items. List, 6 items…” With divs and spans, the content is immediately available to the screen readers.

Content should be grouped logically with headers. H1 should start actual content. Don’t mix the order. Be logical! JAWS can tab through headers, easier to locate sections of content. JAWS can also tab through images.

Autoplay on video/audio without keyboard shortcuts for the controls is bad. BAD.

I always add them as I thought it helped, but screen readers ignore titles on anchors. I thought they went hand in hand with Alt tags on images for accessibility, but no. However, Alt tags on images ARE important. As they always were. Titles are, however, extremely helpful with form fields. Stebner went to bing.com and when the focus hit the search field, the screen reader said
“Enter your search term.” Brilliant.

Screen readers ignore HTML comments. (I should have known this.)

Use page appropriate titles that are descriptive of the page’s content. It’s the first thing read when the page loads. Ambiguous titles tell nothing about content and can be confusing.

Firebug is a useful tool for accessibility.

Links

http://www.w3.org/WAI/
http://www.w3.org/WAI/intro/aria
Surfing the Internet with JAWS and MAGic! – Great site to learn how to make HTML accessible.

Thanks to Mike for making it all happen. It wasn’t that cold outside.

A huge thanks to Reinhard Stebner for the lesson.