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:42PM

I'm assuming this is a document you coded yourself to play with? Possibly
you wrapped the first vertical bar in the tag. as in:

<a (stuff goes here) | </a>

To me the use of the vertical bar goes back to the days before graphic
technology was available. Remember making images by using ascii text
symbols, arranged in column and row placement to make an image of things. A
bicyclist, a car, a dog, a flower, etc. (oops, I should have put that list
in a ul tag, sorry.)

The technique of the horizontal links has real world similarity. Think of
file tabs on those manilla folders in a desk drawer, or the tabs on a
rolodex. The vertical bar harkens back to the ascii style of dividing one
choice from another, or as a representation of the gap between file tabs. It
is also helpful when such a choice of links contain more than a single word.
For example, if a simple web page has the options:

Home About Car Parts Service Support

Without any separation, or visual clues about the site areas, how many are
there? Six? Four? Maybe only three? A screen reader user will have the
advantage, since the software will separate the links, and you'll know what
the text is that's included in each link. The vertical bar then is
irrelevant. It's only there for the disadvantaged person with perfectly good
eyesight.

Of course, a vertical line can better, and more semantically be drawn with a
style sheet. It's invisible to the screen user, who it's irrelevant for, and
it appears to divid the links for the sighted person. Not to mention that
the style sheet can also tweak the color scheme, size, and certain other
dynamic actions as well.

from
Keith H

-----Original Message-----
From: Birkir R. Gunnarsson
Sent: Monday, April 11, 2011 12:56 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] evaluating accessibility with WCAG 2.0 (Angela French)

Hi

At lesat my set up of Jaws 12 and IE8 inserts a new line before links re
read.
So, if I create a link of links and put | between the linka (anchor
tags) Jaws put the | on a new line between each link, except, for some
strange reason, after the first link, where the | actually is on the
same line, but after the link.
For all other links you get a link on a line by it self followed by a
| on the following line.
This is from a document that did not use any paragraphs or any other
tags, just the a tag, the closing a tag and | in between links.
Weird.
Thanks
-Birkir

On 4/11/11, Accessibility India < <EMAIL REMOVED> > wrote:
> 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?
>
> For a screen reader such as JAWS a blank line is encountered before
> and after the paragraph i.e <p>. Alternately by using the short-cut
> "p" with JAWS you can jump from one para to another. With NVDA you
> cannot find much different with <p> tag. I tried using the short-cut
> "p" on webpage with NVDA but cannot find any any paragraphs.
> So if the user wants to jump from one paragraph to another they can
> use short-cut p. Its not possible <p> tag is used. I recommend to use
> scemantic HTML.
> -----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:
> block quote
> 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 :
> block quote
> 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
>