Archive for the ‘Accessibility’ Category

On detecting keyboard focus

Sunday, April 11th, 2010

Strong/clear focus highlighting for links and UI elements has great accessibility benefits, but it can also detract from the appeal of a site/application or distract users who are not used to this type of UI feedback. It is keyboard and alternate input device users that benefit most from strong/clear focus highlighting.

I’ve created a new jQuery plugin that allows you to style elements focused via keyboard navigation clearly while leaving elements focused via mouse events with default highlighting (or at least less dramatic highlighting).

This plugin takes the default behaviour of the Chrome browser (as of version 4) and replicates it across all browsers. Chrome gives strong yellow/orange highlighting to links/inputs that have received focus via the keyboard.

Let me know what you think? Is this useful to you? Is there a better way to make the distinction?

Posted in: Accessibility, DHTML
Tools: 2 Comments

Bravo, ARIA

Sunday, October 12th, 2008

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: Accessibility
Tools: No Comments