WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: tab not working in table, arrow keys work and table navigation as well (in Jaws and NVDA), any advice?

for

From: Jared Smith
Date: Jan 26, 2012 9:21AM

There are a few issues here.

- Remove all tabindex attributes from the page. They create a VERY
illogical navigation order - 1. search text box, 2. page name in the
breadcrumbs, 3. an empty element after the breadcrumbs, 4. the logo,
5. the "skip" link, 6. the remaining search controls, etc.

- If possible, restructure the code order to match the visual order.
In navigating and reading through the page, the order is quite
illogical - main content, breadcrumbs, main navigation, side
navigation, links at the very top of the page, footer.

- Remove the empty links from the page or provide text in them. The
cells in the "Ritröð" column all have links, but most of them don't
contain any text. There are 4 or 5 empty e-mail links in the footer.
Etc.

- To make the items in the "Aðgerðir" column keyboard navigable, they
should be placed within links. The role="button" attributes should be
removed - these are links, not buttons. Role="button" does not make an
element navigable or function as a button. The script events would
need to be moved to the anchor elements, not the images.
Alternatively, the images could be changed to <input type="image">,
but again, they aren't really buttons at all. Or the images could be
given tabindex="0" and scripted to respond to keyboard Enter and Space
commands.

Hopefully this helps.

Jared

On Thu, Jan 26, 2012 at 1:24 AM, Birkir R. Gunnarsson
< <EMAIL REMOVED> > wrote:
> Good morning wise ones (writing from Iceland with 40mph wind and 20
> inches of snow).
>
> There has been a significant rewrite of our search page recently
> (National Library for the Blind), unfortunately done without proper
> testing and evaluation, something I am trying to remedy, but only have
> 24 hours before we have a meeting with our users.
> If you go to http://hbleit.bbi.is
> you will find the search page.
> If you input "Tolkien", for instance, in the search field (leita, also
> the first edit field on the page), and press enter, you will get a
> table of search results.
> As I understand it (I am blind), this is a table of 4 columns and the
> fifth has 3 subcolumns in it, which are buttons that allow users to
> download (hala niður), order a CD (panta á disk) and add to wishlist.
> These are actually marked up by ARIA to be buttons, even if they are
> some type of fancy graphics (apparently much appreciated by the
> dyslexic users).
> The table is created using DevExpress, if anyone is familiar with it,
> then padded with Javascript.
> The problem we are having is that navigating this table using the tab
> key (with Jaws and NVDA) will put you in column 1 (sjá meira/read
> more), then column 3 (author´s name) and finally column 4 (ritröð/is
> book part of a series).
> The tab key skips over the title column (titill), and the 5th column
> containing the actionable buttons (download etc).
> Using the arrow keys to navigate the table, or table navigation keys
> (alt-ctrl-arrows in NVDA or table naviation mode in Jaws 13), works
> perfectly.
>
> This was not the case a few days ago, so some changes made through
> DevExpress messed this up.
> I will, of course, sit down and look at the underlying code today to
> try and figure out what what the problem is.
> If anyone knows why this could be happening, it would be of tremendous help.
> Thanks very much, and have a great day.
> -Birkir
>