WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: evaluating accessibility with WCAG 2.0 (Angela French)

for

From: Keith (mteye)
Date: Apr 11, 2011 3:18PM

The p tag primarily is for denoting a new paragraph. Just as in writing on a
piece of paper, it's there to tell where the information changes to another
group of information. Simple.

In the world of html, it also has the handy feature of adding white space,
although the white space can be better dealt with by a style sheet when more
or less is needed. Or in creating other affects. Such as indents, hanging or
otherwise.

I suppose that a p tag could also be handy in separating an object. Wrapping
an element in it to make sure it stood out, with white space around it.
Although a div tag might be the better choice there.

In the case where someone placed a series of p tags, hoping that it has the
same affect as multiple carriage returns on a typewriter, a screen reader
only presents on blank line. As mentioned in another response, Jaws uses the
single key shortcut in browsers, and even html based email clients, for
jumping from paragraph to paragraph. Similar to the windows keystroke of
ctrl+down arrow. This command isn't necessarily based on the p tag, but the
white space on a page. It does the same if the whitespace comes from stacked
up br tags, or a div tag, or table tag, or any that inserts whitespace
before the information it presents.

from
Keith H


-----Original Message-----
From: Angela French
Sent: Monday, April 11, 2011 10:22 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela French)

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
>>