WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: evaluating accessibility with WCAG 2.0 (Angela French)

for

From: Angela French
Date: Apr 11, 2011 9:21AM


Awesome discussion. I'd like to know how screen reader users experience the <p> tag. Is it transparent? Does it have semantic meaning? Do you expect a certain content when you encounter one? I am a sighted user. But to me, harkening back to early days of elementary school grammar, a paragraph is a distinct portion of writing that contains a particular thought or idea, and consists of at least one sentence, usually more. If a <p> tag has that same meaning to a screen reader user, wouldn't a bunch of hyperlinked words separated by a pipe be a nonsense sentence?

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Andrew Kirkpatrick
Sent: Monday, April 11, 2011 5:31 AM
To: WebAIM Discussion List
Subject: [UCE] Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela French)
Importance: Low

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


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jason Kiss
Sent: Monday, April 11, 2011 6:14 AM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela French)

Thanks for rekindling the discussion, John. Agreed: it is an interesting topic.

Success Criterion 1.3.1 does not seem to offer an absolute conclusion either way with regard to a group of links displayed horizontally and separated by the pipe character, even if we all seem to be in agreement that best practice would have it marked up as an unordered list. I meant to suggest in my earlier comments that, should one want to take a strict approach in terms of enforcing best practice and semantic HTML, that it could be considered a WCAG violation. In the end, however, the application of the Success Criterion, at least in this scenario, is certainly open to interpretation.

This is what I find most interesting about the discussion. While WCAG
2.0 has done much to provide more strongly testable guidelines, thereby resulting in more decisive declarations of what does or does not comply, there still remains room for argument and interpretation, particularly with certain Success Criteria like 1.3.1. I'm not suggesting this is necessarily a bad thing.

For argument's sake, let's assume that the main navigation is a group of links visually presented in typical fashion as a distinct and horizontally arranged grouping, with each link separated by a pipe. Is it reasonable to suggest that this arrangement visually *implies* that the structure of the overall grouping and the relationships among the links are those of a list? Certainly, such a visual arrangement is not the traditional presentation of a vertical list of bulleted list items, but does a sighted user conceptually understand this arrangement as a set or list of individual but related links? What are the reasons for displaying them as a distinct group and of separating each link with a pipe?

John correctly notes that a list of links so presented and marked up is hardly an egregious accessibility barrier. Still, declaring such less than ideal markup as a violation of WCAG, especially when more usable and semantically correct markup exists, can be a nice bit of leverage in certain contexts, at least in terms of requiring best practices and accessible, semantic HTML.

Is such an interpretation even reasonable, or am I just muddying the waters around the intent of Success Criterion 1.3.1 or of the application of WCAG Success Criteria in general?

Jason

On 11/04/11 20:26, John Hicks wrote:
> Hello
> I see from this exchange that my previous remark was perhaps too
> severe and I buy the arguments given since.
> Of course many screen readers do link listings also so the fact that
> these links are not in an html list is not the end of the story
>
> Nevertheless, using an ascii character (the pipe symbol) for
> formatting still irks me.
>
> If this "non-list" of links were vertical with a lower case "o" making
> a bullet for each item .... which is basically the same thing, I bet
> the reactions would be different.
>
> In any event it would read like a romantic poem (O! site map, O!
> Contact, O! Terms of Use...)
>
> Interesting topic
>
> best wishes,
> John
>
>
> e 09/04/2011 01:29, Angela French a écrit :
>> Agreed.
>>
>> -----Original Message-----
>> From: <EMAIL REMOVED>
>> [mailto: <EMAIL REMOVED> ] On Behalf Of Keith
>> (mteye)
>> Sent: Friday, April 08, 2011 4:27 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela
>> French)
>>
>> It may be that a self trained html coder isn't aware of the method to create horizontal lists, rather than a vertical list (default behavior for browsers.) There's no excuse for someone claiming to be a professional web designer.
>>
>> Just a personal observation, and opinion.
>>
>> from
>> Keith H
>>
>> -----Original Message-----
>> From: Karen Sorensen
>> Sent: Friday, April 08, 2011 1:29 PM
>> To: <EMAIL REMOVED>
>> Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela
>> French)
>>
>> Good reminder John Hicks. The separation of content from design/layout/format with CSS is critical. If the pipes are used to separate a list, but the list isn't HTML coded as a list, that would be interpreted incorrectly by a screen reader.
>>
>> Karen Sorensen
>> PCC Instructional Technology Specialist Coordinating ADA Compliance
>> of Instructional Media
>> 971-722-4720
>>