E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Birkir R. Gunnarsson
Date: Mon, Dec 12 2011 8:39PM
Subject: Using headings and lists inside a table, makes navigation difficult in my opiinion, thoughts?
No previous message | Next message →

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

From: Ryan E. Benson
Date: Tue, Dec 13 2011 1:06PM
Subject: Re: Using headings and lists inside a table, makes navigation difficult in my opiinion, thoughts?
← Previous message | Next message →

Birkir,

That page suffers from what some call divitis (div i tus), that is
using divs a little too liberally. I had to dig through 10 levels (if
I am counting correctly) to get to the content in question. I would do
#2 with some modifications or #3. The modifications would be instead
of putting the <h3>'s in their own cell, put them into the same cell
as the list they are associated with. You can make #3 with sadly more
divs and CSS to position it.

--
Ryan E. Benson



On Mon, Dec 12, 2011 at 10:41 PM, Birkir R. Gunnarsson
< = EMAIL ADDRESS REMOVED = > wrote:
> 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
>

From: SaravanaMoorthy.P
Date: Wed, Dec 14 2011 3:57AM
Subject: Re: Using headings and lists inside a table, makes navigation difficult in my opiinion, thoughts?
← Previous message | No next message

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