by

Notes from: “Who’s Afraid Of ARIA?” at WordCamp US 2018

Rian Rietveld @ #WCUS:

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.

Slides for this talk, code with examples is here, and you can watch “Who’s Afraid of ARIA” with captions here.


Respond

Leave a Reply

Discuss this

Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.