Rian is demonstrating Voiceover and ARIA for the WordCamp audience.
She’s giving a very practical example of why semantics matter when it comes to the web.
Aria-live: Tells screen readers what’s changing on a page without refreshing the page.
aria-live allows dynamic changes to be announced by screen readers.
From earlier in the talk: First rule of ARIA: Don’t use ARIA. Use a native HTML 5 element first, then add ARIA *when necessary*.
Make sure when using aria-live that your announcement is not too verbose: For example: announce the number of search results, not every search result.
Overrule a link’s anchor text with aria-label. Beware: aria-label overrules a link’s anchor text completely. For screen reader users it’s as if the link text does not exist.
screen reader text class: Hide something from sighted users while announcing it to screen reader users.
Use screen reader text class with the span element.
Aria-describedby and aria-labeledby: aria-labeledby replaces label text, (see form elements), aria-describedby adds extra information to the label text.
Rian is able to turn VoiceOver on and off. This would never happen using Jaws. You can do it with NVDA though. Sorry, couldn’t resist.
Make it work before you make it nice.
Rian Rietveld @ #WCUS: