E-mail List Archives
Thread: List Headings
Number of posts in this thread: 7 (In chronological order)
From: David Ashleydale
Date: Tue, Jun 18 2013 1:55PM
Subject: List Headings
No previous message | Next message →
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
From: Jared Smith
Date: Tue, Jun 18 2013 2:34PM
Subject: Re: List Headings
← Previous message | Next message →
On Tue, Jun 18, 2013 at 1:55 PM, David Ashleydale wrote:
> Is there a good way to code a list and its "heading" so that they are
> programmatically associated?
You brought up this question here a couple months ago and I think
there were some good responses then -
http://webaim.org/discussion/mail_thread?threadX14
In HTML, we're pretty much limited to standard heading elements.
Regardless, I don't believe that 2.4.4 requires such a programmatic
association anyway - I think the natural reading flow of the content
is sufficient.
Your usage of <legend> for this would not be appropriate and would not
provide any utility.
Jared
From: David Ashleydale
Date: Tue, Jun 18 2013 3:02PM
Subject: Re: List Headings
← Previous message | Next message →
Thanks, Jared. You're correct that I did ask a very similar question
before. It's a slightly different angle, though.
It sounds like what you're saying is that if the text of a link isn't
explicit enough on its own, we should be able to rely on the reading order
for a user to be able to determine that a generic link in a list is related
to the sentence, phrase or paragraph right before the list, and still
conform to WCAG Level AA.
And sorry, I didn't mean that actually using <legend> would be appropriate
at all. I just meant that it would be nice if something like that existed
for lists. But it doesn't. Now i remember that you mentioned <lh> before,
which would have been nice if it had stuck.
Thanks,
David
On Tue, Jun 18, 2013 at 1:34 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Tue, Jun 18, 2013 at 1:55 PM, David Ashleydale wrote:
>
> > Is there a good way to code a list and its "heading" so that they are
> > programmatically associated?
>
> You brought up this question here a couple months ago and I think
> there were some good responses then -
> http://webaim.org/discussion/mail_thread?threadX14
>
> In HTML, we're pretty much limited to standard heading elements.
> Regardless, I don't believe that 2.4.4 requires such a programmatic
> association anyway - I think the natural reading flow of the content
> is sufficient.
>
> Your usage of <legend> for this would not be appropriate and would not
> provide any utility.
>
> Jared
> > > >
From: Keith Parks
Date: Tue, Jun 18 2013 3:42PM
Subject: Re: List Headings
← Previous message | Next message →
On Jun 18, 2013, at 12:55 PM, David Ashleydale wrote:
> 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>;
Seems like your "We didn't want to do this" format would actually be fine.
If you have the document titles be the hyperlinked text, and eliminate the "<http://www.whatever.com>;" following it, that doesn't seem so bad to me.
- Spring 2012 Quarterly Report (Word)
- Spring 2012 Quarterly Report - Summary (PDF)
- Spring 2012 Quarterly Report - Full (PDF)
- Summer 2012 Quarterly Report (Word)
- Summer 2012 Quarterly Report - Summary (PDF)
- Summer 2012 Quarterly Report - Full (PDF)
Unless your document titles are in reality a whole lot wordier or in some other way difficult to read, the downside of having some repeated words seems outweighed by the upside of clarity and simplicity.
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Proud member of D/d.U.T.R.T.W.O.C.H.S.
(Designers/developers United To Rid The Web Of "Click Here" Syndrome)
From: Jared Smith
Date: Tue, Jun 18 2013 3:56PM
Subject: Re: List Headings
← Previous message | Next message →
On Tue, Jun 18, 2013 at 3:02 PM, David Ashleydale wrote:
> It sounds like what you're saying is that if the text of a link isn't
> explicit enough on its own, we should be able to rely on the reading order
> for a user to be able to determine that a generic link in a list is related
> to the sentence, phrase or paragraph right before the list, and still
> conform to WCAG Level AA.
Precisely.
I suppose one could also use the <dl> element as defined in HTML5 to
provide an association:
<dl>
<dt>Spring 2012 Quarterly Report</dt>
<dd><a href="word1.html">Word</a></dd>
<dd><a href="pdfsumm1.html">PDF (Summary)</a></dd>
<dd><a href="pdffull1.html">PDF (Full)</a></dd>
</dl>
More details at http://html5doctor.com/the-dl-element/
A quick test in VoiceOver and NVDA showed that both read this as a
"list with 4 items", so there isn't really a good association between
the 'heading' and the list items anyway. In fact, because they are
grouped together this could be even worse than having the descriptor
text read separate from the list.
Again, I wouldn't worry about such things - they are adequately
accessible without adding additional markup and overhead.
Jared
From: David Ashleydale
Date: Tue, Jun 18 2013 4:33PM
Subject: Re: List Headings
← Previous message | Next message →
> Seems like your "We didn't want to do this" format would actually be fine.
My visual design team would kill me. Especially since it's really not just
two groups of three links, it's more like six to eight groups.
And, that's odd, I did have the document titles as hyperlinked text in the
email I originally sent from gmail. Maybe my or your email system formatted
it differently?
Thanks,
David
On Tue, Jun 18, 2013 at 2:42 PM, Keith Parks < = EMAIL ADDRESS REMOVED = > wrote:
>
> On Jun 18, 2013, at 12:55 PM, David Ashleydale wrote:
>
> > 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>;
>
> Seems like your "We didn't want to do this" format would actually be fine.
>
> If you have the document titles be the hyperlinked text, and eliminate the
> "<http://www.whatever.com>;" following it, that doesn't seem so bad to me.
>
> - Spring 2012 Quarterly Report (Word)
> - Spring 2012 Quarterly Report - Summary (PDF)
> - Spring 2012 Quarterly Report - Full (PDF)
>
> - Summer 2012 Quarterly Report (Word)
> - Summer 2012 Quarterly Report - Summary (PDF)
> - Summer 2012 Quarterly Report - Full (PDF)
>
> Unless your document titles are in reality a whole lot wordier or in some
> other way difficult to read, the downside of having some repeated words
> seems outweighed by the upside of clarity and simplicity.
>
> ******************************
> Keith Parks
> Graphic Designer/Web Designer
> Student Affairs Communications Services
> San Diego State University
> San Diego, CA 92182-7444
> (619) 594-1046
> mailto: = EMAIL ADDRESS REMOVED =
> http://www.sa.sdsu.edu/communications
>
> http://kparks.deviantart.com/gallery
> ----------------------------------------------------------
>
> Proud member of D/d.U.T.R.T.W.O.C.H.S.
> (Designers/developers United To Rid The Web Of "Click Here" Syndrome)
>
>
>
>
>
>
>
>
> > > >
From: Keith Parks
Date: Tue, Jun 18 2013 4:39PM
Subject: Re: List Headings
← Previous message | No next message
On Jun 18, 2013, at 3:33 PM, David Ashleydale wrote:
> And, that's odd, I did have the document titles as hyperlinked text in the
> email I originally sent from gmail. Maybe my or your email system formatted
> it differently?
An telling example of the unpredictability of the user experience. :^(
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Proud member of D/d.U.T.R.T.W.O.C.H.S.
(Designers/developers United To Rid The Web Of "Click Here" Syndrome)