WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: evaluating accessibility with WCAG 2.0 (Angela French)

for

From: Andrew Kirkpatrick
Date: Apr 11, 2011 6:30AM

I find myself wondering where to draw the line. If the argument for the use of a list for any set of related links is based on the need for users to know that a set of items are in a group and how many items are in that group then perhaps lists should be used more - cnn.com has story after story on their home page, do we recommend that the story titles and short teaser blurbs be encased in a list item and the group of stories be marked up as a list? This would help people know how many stories there are, why don't we do this? Or even within a story, there may be nine paragraphs that are related information that is supposed to be presented in an ordered fashion - perhaps we need to put each paragraph into a list item and make the story an ordered list? Of course, I'm being deliberately difficult but I think that we may be overstating the importance of embedding simple sets of links into semantic lists and running the risk of creating an unnecessarily verbose audio UI for audio users.

Looking around, people that you'd think would be in tune with end-user needs seem perfectly content without using OL or UL for sets of links...

Freedom Scientific's navigation bar:
<p class="navp"><a href="/default.asp"> Home </a> <img src="/images/vline.gif" alt=""><a href="/product-portal.asp" > Products </a><img src="/images/vline.gif" alt="" ><a href="/purchase.asp"> Purchase </a><img src="/images/vline.gif" alt=""><a href="/support.asp"> Support </a><img src="/images/vline.gif" alt=""><a href="/training.asp"> Training </a><img src="/images/vline.gif" alt=""><a href="/about/about.asp"> About Us </a><img src="/images/vline.gif" alt=""><a href="/about/vision-facts.asp"> Low Vision Facts </a></p>

GW-Micro's navbar:
<A HREF="#mainHeadingTitle" STYLE="position: absolute; left: -1000px; font-size: 0px;">Skip to Main Content</A><A CLASS="navBarLink" HREF="/Window-Eyes" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Window-Eyes</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/Notetakers" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Notetakers</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/DAISY_Readers" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >DAISY Readers</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/Braille_Displays" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Braille Displays</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/Low_Vision" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Low Vision</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/Support" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Support</A>&nbsp;<IMG SRC="/images/white_bullet.gif" ALT="" ALIGN="bottom">&nbsp;<A CLASS="navBarLink" HREF="/Training" onMouseOver="this.style.color='#230E75';" onMouseOut="this.style.color='#FFFFFF';" >Training</A>

National Federation of the Blind navbar:
<div id="HomeMenu"><a href="http://www.nfb.org/nfb/About_the_NFB.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_About.gif" alt="About NFB" width="128" height="38" border="0"></a><img src="/images/nfb/Template/NFBHome_MeniDivider.gif" width="1" height="38" alt="Line"><a href="http://www.nfb.org/nfb/Info_About_Vision_Loss_For.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_Information.gif" alt="Information About Vision Loss For" width="169" height="38" border="0"></a><img src="/images/nfb/Template/NFBHome_MeniDivider.gif" width="1" height="38" alt="Line"><a href="http://www.nfb.org/nfb/Members.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_Members.gif" alt="Members" width="103" height="38" border="0"></a><img src="/images/nfb/Template/NFBHome_MeniDivider.gif" width="1" height="38" alt="Line"><a href="http://www.nfb.org/nfb/Resources.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_Resources.gif" alt="Resources" width="117" height="38" border="0"></a><img src="/images/nfb/Template/NFBHome_MeniDivider.gif" width="1" height="38" alt="Line"><a href="http://www.nfb.org/nfb/Products_and_Technology.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_Products.gif" alt="Products and Technology" width="114" height="38" border="0"></a><img src="/images/nfb/Template/NFBHome_MeniDivider.gif" width="1" height="38" alt="Line"><a href="http://www.nfb.org/nfb/Publications.asp?SnID=1950147763"><img src="/images/nfb/Template/NFBHome_Publications.gif" alt="Publications" width="127" height="38" border="0"></a></div>

American Council of the Blind nav:
<p><font size="-2">
[<A HREF="index.html">ACB Home</A> |

<A HREF="profile.html">About ACB</A> |
<A HREF="washington/index.html">Washington Connection</A> |
<A HREF="magazine/index.html">Braille Forum</A> |
<A HREF="http://acb.org/store/index.php?option=com_content&;view=article&id=11&Itemid=14">Donate to ACB</A> |
<br>
<A HREF="affiliates/index.html">Affiliates</A> |
<A HREF="resources/index.html">Helpful Resources</A> |

<a href="conference/index.html">Conference and Convention</a> |
<a href="http://acb.org/store/index.html">ACB Store</a> ]
</font></p>

Worth noting that AFB and RNIB both use lists widely.

On Zeldman.com, there are items that seem like lists, but are not marked up as such:
e.g. "Filed under: A Book Apart, A List Apart, content, content strategy, Design, E-Books, editorial, Education, wordpress"

Same thing on the Yahoo! Accessibility blog:
"Tags: assistive technology, Closed Captions, Deaf, hard of hearing, sean zdenek, Television"

My gut is that we are calling things lists when the design aspects of web development work make it easy to do so, and that the connection to what users need is not clearly identified. I'd really like to see a description of what content types belong in lists and to what level of complexity an author should pursue in achieving that goal. Until we have that, when I see a set of links that are marked up inline within a simple paragraph I can't justify calling it a 1.3.1 failure.

Thanks,
AWK

Andrew Kirkpatrick
Group Product Manager, Accessibility
Adobe Systems

<EMAIL REMOVED>
http://twitter.com/awkawk
http://blogs.adobe.com/accessibility