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.
Subscribe to:
Post Comments (Atom)
3 comments:
No titles on form fields, either. Titles suck all around, actually. To get the nice effect Bing had, use a label with an attribute of for=myinputid and then use the same id on the input.
I enjoyed the talk tonight but found myself disagreeing a lot. I still need to think things out but you've inspired me to write a post of my own.
Oh, and I meant title *attributes* suck. The title element (in the head) is obviously necessary.
I agree, it was a very enlightening presentation!
One thing to keep in mind is that screen readers are like web browsers - each "renders" the content slightly differently. So JAWS might not read title attributes, but another might. Here's a list of major screen reader software:
http://en.wikipedia.org/wiki/List_of_screen_readers
A big revelation for me was the "header navigation". Did you notice how efficiently Reinhard was able to get an overview of the page by jumping to each header? Since a visually impaired user needs to build a mental model of the page, using proper structure helps make that task easier. And the benefit for page authors is cleaner markup, and a better shot at proper SEO.
Post a Comment