Bravo, ARIA

ARIA is showing a lot of promise. It will allow us to have our cake and eat it too… an exciting, yet accessible web.

ARIA has recently reached a fairly robust-looking draft. Considering decent support for ARIA exists in current and upcoming browser releases, I felt it was time to get my knowledge and widgets up to speed.

My first foray into ARIA is a revamped Compact sections DHTML widget. This version includes ARIA roles, states/properties and improved keyboard navigation as per ARIA best-practice.

Using the elephant’s outstanding ARIA plugin for jQuery made the integration fairly trivial.

Playing with keyboard navigation and tabindex proved messy, but with a little patience, most of the creases were ironed out.

I’m still not entirely certain I’m managing focus correctly.

For example: Whenever a tab is activated, I’m returning focus to the tab. This seems to be consistent with best-practice, but in terms of reading order a user may then be presented with the rest of the tabs before reaching the tabpanel content. In this case, I wonder whether using the flowto property may help direct the user straight to the tabpanel content?

I’d appreciate any ideas if you know how it should be done.

Posted in

Leave a reply