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: Ryan E. Benson
Date: Dec 13, 2011 1:06PM

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 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
>