PDA

View Full Version : Accessibility: why don't tabs indicate focus?



dopefish
2 Dec 2011, 12:36 PM
I'm new to Ext JS and trying to evaluate it for building accessible applications. My first stumbling block is keyboard access to tabs. I've got a very basic tab panel with one tab and while the screen reader announces the tab's title, there is no visual indicator of focus when navigating with the keyboard (or mouse for that matter.) So the specific question is, how do I configure tabs to indicate focus? (ExtJS 4.0.7, FF 8, Win7)

Beyond that, is there any documentation of special considerations or techniques for implementing accessible ExtJS applications?

Thanks!

bt_bruno
2 Dec 2011, 3:56 PM
In ExtJS examples there's a specific section called "Accessibility". Check the Keyboard Feed Viewer (http://docs.sencha.com/ext-js/4-0/#!/example/key-feed-viewer/feed-viewer.html). Basically you can navigate through <tab>, and to "enter" a component use <enter>, and to return to the parent use <escape>.

Also, you may notice using firebug that when you focus a tab, CSS classes are added to it (x-tab-focus, x-tab-default-focus, ...). You can use this to provide visual response.

dopefish
5 Dec 2011, 7:04 AM
Thanks Bruno, the CSS classes will allow me to do my own styling but it makes me wonder why some controls have focus styles out-of-the-box (eg, buttons) while others have to be bolted on.

So as far as accessibility documentation, shall I assume that the examples are it? I've spent some time with the Feed Viewer. On a general level, I'm trying to understand how much (if any) of that KB functionality is provided by default by those components and how much had to be implemented as part of the specific application. I've had some problems navigating some of the Feed Viewer's controls and I'm wondering if those are application issues or framework issues or 'operator error' ;) For instance, there seems to be a KB 'trap' with the input/select element in the Add Feed dialog...

dopefish
5 Dec 2011, 8:40 AM
As I go back through the documentation, reading about FocusManager and KeyMaps, things are starting to click more for me than they were last week. Looks like most of the Feed Viewer's KB access is provided by the FocusManager. The KB trap on the input/select is still an issue but maybe I'm missing a key combination.