WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: evaluating accessibility with WCAG 2.0 (Angela French)

for

From: E.J. Zufelt
Date: May 16, 2011 12:51AM

Good afternoon,

IMO * Everything * that is a list should be marked up as a list, be there 1, 2, 3, or more items, this is proper semantics. However, assistive technology vendors are completely free to present shorter lists without the added textual representation of the list semantics.

HTH,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt



On 2011-05-16, at 2:42 AM, < <EMAIL REMOVED> > wrote:

> As a screen reader I don't like the idea of extra keyboard commands as it
> slows down the process. We could always go back to the standard rule in
> English grammar regarding uses of commas in that anything less than three
> items does not require the use of a comma. Perhaps this could be carried
> over to lists.
> Chuck
> ----- Original Message -----
> From: "Jason Kiss" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Monday, April 11, 2011 4:46 PM
> Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela French)
>
>
> Being deliberately difficult can sometimes be useful :)
>
> Despite my seeming protestations, I do echo your concerns, Andrew. It is
> very easy to see lists everywhere, and I am sensitive to the fact that not
> everything that is list-like should be marked up as a list, if only to avoid
> unnecessary noise. I, too, would like a more definite account of what
> content calls for list markup. Where my apparently demanding predilection
> for marking up a set of links in a nav bar as a list comes from, I don't
> know. I do think that list markup is semantically appropriate in this case,
> but it could also be that I'm just a slave to that convention. Then again,
> for some reason I'm okay with short lists of items that appear as part of a
> sentence or a more sentence-like structure, as I would consider the
> Zeldman.com and Yahoo! Accessibility Blog cases. I do the same thing on my
> site.
>
> Seeing how common the non-list markup approach is on sites like Freedom
> Scientific's, GW Micro's, the NFB's and the ACB's, perhaps it's just not
> something anyone should really get concerned about, at least from a screen
> reader accessibility and WCAG perspective.
>
> Then again, it's interesting to note that the HTML on those four sites is
> quite poor to begin with, at least compared to the AFB and RNIB sites, which
> have relatively decent markup and do use the list markup for their nav
> links. Presumably these last two sites have the same concerns in terms of
> accessibility and usability for screen reader users.
>
> Also, while list markup does lead to additional UI audio for screen reader
> users, isn't the point of HTML the structural and semantic markup of the
> content? What assistive technologies do with this programmatic information
> is to some degree up to them. Not applying more semantic markup for the sake
> of one group of assistive technologies doesn't seem the ideal path to me.
> But then these are the sorts of accommodations that we end up making all the
> time, and especially for screen readers. Maybe the default verbosity of
> screen readers around lists is just too great. What if lists were just
> verbally introduced and closed with the words "List" and "List end", leaving
> additional keyboard commands for users to interrogate the number of list
> items, navigate by list item, etc., if they wished?
>
> So, no easy answers here on the list markup question, it seems, but this is
> where my other concern kicks in, and that is the place for interpretation in
> WCAG and Success Criteria like 1.3.1. Is there a certain and definitive
> answer in this case, or are interpretations, opinions and arguments all that
> we have? Again, I'm not suggesting this is a bad thing.
>
> Thanks,
>
> Jason
>
> --
> Jason Kiss
> Web: www.accessibleculture.org
> Email: <EMAIL REMOVED>
> Twitter: @jkiss
>
>
> On Tue, Apr 12, 2011 at 12:31 AM, Andrew Kirkpatrick
> < <EMAIL REMOVED> >wrote:
>
>> 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
>>>>