WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using headings and lists inside a table, makes navigation difficult in my opiinion, thoughts?

for

From: SaravanaMoorthy.P@cognizant.com
Date: Dec 14, 2011 3:57AM

Bikir,

>>3. That the table be eliminated altogether and this information be
>>presented as a series of lists.

I would recommend to stick to option 3....
Tables are there to be used for displaying Data Tables(eg result tables) and rest of the content should be in a linear manner.
I think the list there is inside UL LI, would suggest to provide those data within a div instead to table as below.

Like:
<div>
<h3>alþjóðastofa</h3>
<ul>
<li>Foreign Languages</li>
<li>Námskeið</li>
<li>Starfsemi</li>
</ul>
<div>Meira</div>
</div>

By doing so, each set of listed items are placed in separate containers(div) which is in linear format and screen reader(JAWS) users can easily navigate to reach the respective list(either by heading list(H) or list items(L) or link list). To provide some value add, you can provide some visually hidden content before "Meira"(more) link which relates the heading of that set, so that you can identify which more is for which

Like:
<div><span class="visualhide"> alþjóðastofa </span>Meira</div>
When screen reader users uses the "link list" to navigate, it will list out and read the "related content & more" instead of just more, more, more, more.....

If the table is generated dynamically then provide role="presentation". But I am not sure that it will behave as linear content.
Any alternative thoughts?

Note: resultant data content can be more accessible when displayed using tables.

Thanks and Regards,
Saravana Moorthy P,
Cognizant Interactive
.......................................
Hand : +91-9840817738
Land : +91-44-33915749
.......................................
Please consider the evironment before printing any document


-----Original Message-----
From: Birkir R. Gunnarsson [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, December 13, 2011 9:11 AM
To: WebAIM Discussion List
Subject: [WebAIM] Using headings and lists inside a table, makes navigation difficult in my opiinion, thoughts?

Hey gang

This is my last new topic for some time. I am nearly done with my
evaluations for the year, and besides I believe I've posted enough
topics for now. :)
I am still looking at the same website (that definitely has a few
how-not-to-do-its".
On all subpages of the site, for instance this one:
http://www.akureyri.is/is/thjonusta/velferd-og-fjolskyldan

there are several categories of services (sorry about the language,
Icelandic is not easy to read), presented as headings and lists inside
a table.

As I understand it, the category names are heading level 3s, and
possibly headings, or at least first rows, in their respeective
columns, though my table mode in Jaws definitely indicates the table
is not properly marked up for one thing.
Each category then contains a list of relevant services.
alþjóðastofa, for instance, means international office, and contains
the services
"foreign languages", námskeið (= courses) and starfsemi (activities).
The problem with this approach comes in the "meira" or "more" part of
those lists. As a screen reader user I first see the category
headings, then lists, then 3 "meira" links in a row. I can guestimate
which "meira" link belongs to which category, but if just one of them
was missing such a link, I'd be lost.

Now, the problem is whether I should tell them to
1. mark up the table properly (many average screen reader users don't
like tables much, and I don't see the need for one here quite
frankly),

2. Do I suggest that aria role = presentation be put on the table, to
hide it from the screen reader users, (but then, how do I make sure
the "meira" links go properly with the lists they belong to", or

3. That the table be eliminated altogether and this information be
presented as a series of lists.
I am a little lost as to why they thought this was a god idea, may be
it looks good visually, may be the CMs makes it easy to produce this
layout. I am not hired to give them in-depth technical analysis, but I
was wondering if there is an obvious easy-to-implement solution that
would work on other subpages with this structure, that would make them
much more accessible or usable to screen reader users.
I've never seen this particular layout before, so curious if any of
you have suggestions based on your experiences, or comments on why
this would be considered a good layout in general.
Thanks to all, and to all, early happy holidays.
Thanks
-Birkir


This e-mail and any files transmitted with it are for the sole use of the intended recipient(s) and may contain confidential and privileged information. If you are not the intended recipient(s), please reply to the sender and destroy all copies of the original message. Any unauthorized review, use, disclosure, dissemination, forwarding, printing or copying of this email, and/or any action taken in reliance on the contents of this e-mail is strictly prohibited and may be unlawful.