Safari 4 - Quickfire ARIA Testing

— 3 minute read

One of the new features claimed by Safari 4 is WAI ARIA support and better VoiceOver integration. I thought I'd put the public beta to the test with a few of the examples and test cases listed on the WAI ARIA best practices article and Codetalks wiki. There's nothing particularly scientific or methodical about this, it was done more for curiosity than anything, but it provides a snapshot of what works, and doesn't, at this stage and I thought other people might be interested.

First off, the alert tests, where the content should be announced when it becomes visibile. Well, Voiceover failed to announce the alerts, not a good start.

The button test, shows some promise. The span with the role of button set, has its label read and and is described as a button. However, the group's description is not announced when you tab into the inputs within it. If you tweak the markup so that the fieldset has a tabindex, the description is announced when you tab into it, so I suspect something about groupings isn't being picked up.

The digit button tests are a bit all over the place. When you tab to the Create button, it's tooltip fires and then Voiceover starts reading its merry way through the entire page and not stopping. Tabbing to the edit menu and activating, gets you the menu, but each item in it is announced merely as "interactive". The colour picker announces a "group", but nothing else.

Checkbox example 2 is interesting. The checkboxes and their states are read when you tab into them, as is the hidden "not your average lettuce" describedby. However, the text for each checkbox element is not. Perhaps because there's no explicit aria-labelledby attribute? Also, Tristate checkboxes don't have their partially checked state announced.

Graphical Slider example. You can successfully tab to the slider, and voiceover announces the current value as a percentage. You might expect this for a value between 0-100, however, the valuetext attribute is set with a $ value, so in theory it should announce that. In addition, when you change the position of the slider, no announcement is made of the new value, you have to tab away and tab back to get it to announce the new, modified, value. Not exactly helpful, but workable.

With the Radiobuttons example, the fact that you'd tabbed to a radiobutton was announced, but the radiogroup label is not. Sadly the text of the radiobuttons wasn't mentioned so you have no idea what you've selected. Interestingly, altering the markup and adding aria-labelledby attributes to each li element, pointing at its own id, works. So, again maybe the example isn't quite right and assumes an implied label where there isn't one? Will have to dig in the spec to check this.

Finally, a quick check of the Liveregions demo (and several other liveregion examples) shows that no updates are announced from liveregions.

So, basically ARIA support in Safari/Voiceover is not quite there yet. But considering I'd heard they'd only worked on the tabindex extensions so far, it's further along than expected. Main takeaway seems to be the combinations' need for explicit aria-labelledby attributes.