WebAIM - Web Accessibility In Mind

E-mail List Archives

List Headings

for

From: David Ashleydale
Date: Jun 18, 2013 1:55PM

Hi,

Is there a good way to code a list and its "heading" so that they are
programmatically associated? It would be nice if there were such a thing as
a "legend" or "heading" tag for ordered and unordered lists, but I don't
think there is. Here's an example:

Spring 2012 Quarterly Report:

- Word <https://www.google.com>
- PDF (Summary) <https://www.google.com>
- PDF (Full) <https://www.google.com>

Summer 2012 Quarterly Report:

- Word <https://www.google.com>
- PDF (Summary) <https://www.google.com>
- PDF (Full) <https://www.google.com>

This example contains two lists of 3 items. The links go to different
versions of information and it felt really repetitive to repeat the topic
for every single link. We didn't want to do this:

- Spring 2012 Quarterly Report (Word) <http://www.google.com>;
- Spring 2012 Quarterly Report - Summary (PDF) <http://www.google.com>;
- Spring 2012 Quarterly Report - Full (PDF) <http://www.google.com>;
- Summer 2012 Quarterly Report (Word) <http://www.google.com>;
- Summer 2012 Quarterly Report - Summary (PDF) <http://www.google.com>;
- Summer 2012 Quarterly Report - Full (PDF) <http://www.google.com>;

But we want to make sure the links are programmatically associated with
their topic right before the list (trying to satisfy WCAG 2.4.4). We want
to make sure that when someone clicks on a "Word" link, they can
programmatically determine which document they're opening based on
providing enough context.

Perhaps the best solution is to use an H2, H3, etc. I'm a little reluctant
to do that because I don't really consider these to be "sub-sections" of
the page. That is, if I were doing an outline of the entire page, I don't
think I would write down these two list intros as part of the structural
outline of the page.

But maybe that's the best solution.

I just wish there were something more like this:

<ul>
<legend>Spring 2012 Quarterly Report</legend>
<li><a href="word1.html">Word</a></li>
<li><a href="pdfsumm1.html">PDF (Summary)</a></li>
<li><a href="pdffull1.html">PDF (Full)</a></li>
</ul>

Thoughts?

David