WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: 10.5 Separate adjacent links

for

Number of posts in this thread: 13 (In chronological order)

From: Glenda
Date: Fri, Mar 18 2005 1:45PM
Subject: 10.5 Separate adjacent links
No previous message | Next message →

In my recent project - ie
http://www.eaglecom.bc.ca/CAPsite/facility/parking.htm - I used a white
vertical bar to separate the adjacent links in the top navigation bar. Is
this not adequate? Bobby is spitting it out, saying repairs are needed. Is
this another example of how automated checkers should not be relied upon as
the gospel??

Also, thanks John for your suggestion on how to add captions to images.
Scroll down to "hazard and emergency procedures" for an example - I think it
works well.

Cheers,
Glenda
Soaring Eagle Communications
www.eaglecom.bc.ca
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.4 - Release Date: 3/18/05

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Mon, Mar 21 2005 6:26AM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

> In my recent project - ie
> http://www.eaglecom.bc.ca/CAPsite/facility/parking.htm - I used a white
> vertical bar to separate the adjacent links in the top navigation bar. Is
> this not adequate? Bobby is spitting it out, saying repairs are needed. Is
> this another example of how automated checkers should not be relied upon as
> the gospel??
>

Using lists is the best way to overcome this problem and it will
reduce your markup as well. Screen readers will read out "vertical
bar" which can become very repetetive


Using This
Tool|


could be changed to a list


Using this tool
nav 2
nav 3


the white line can be achieved using borders in css, you will need a
final class to remove the border at the end.


#buttons {
list-style:none;
background-color:#ccf;
margin:0;
padding:0;
}
#buttons li {
display:inline;
padding:2px 5px;
margin:0;
border-right:#1px solid #000;
}
..last {
border-right:none;
}


there are some good tutorials around and even a utulity called
listamatic which will produce code for you:

http://css.maxdesign.com.au/listamatic/

regards
ben

From: Glenda
Date: Mon, Mar 21 2005 12:29PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Thanks Ben for such a detailed response. I'll definitely try it.

So, is using lists preferred over vertical bars or other non-linked
characters?

I thought one reason for providing the non-linked, printable characters
between adjacent links was to provide a visual cue to help people with
cognitive disabilities to identify the break between links. Using the lists
without the bullets wouldn't provide the visual cue.

Any thoughts here?

Cheers,
Glenda
Soaring Eagle Communications

-----Original Message-----
From: morrison.ben [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, March 21, 2005 5:25 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



> In my recent project - ie
> http://www.eaglecom.bc.ca/CAPsite/facility/parking.htm - I used a white
> vertical bar to separate the adjacent links in the top navigation bar. Is
> this not adequate? Bobby is spitting it out, saying repairs are needed.
Is
> this another example of how automated checkers should not be relied upon
as
> the gospel??
>

Using lists is the best way to overcome this problem and it will
reduce your markup as well. Screen readers will read out "vertical
bar" which can become very repetetive


Using This
Tool|


could be changed to a list


Using this tool
nav 2
nav 3


the white line can be achieved using borders in css, you will need a
final class to remove the border at the end.


#buttons {
list-style:none;
background-color:#ccf;
margin:0;
padding:0;
}
#buttons li {
display:inline;
padding:2px 5px;
margin:0;
border-right:#1px solid #000;
}
..last {
border-right:none;
}


there are some good tutorials around and even a utulity called
listamatic which will produce code for you:

http://css.maxdesign.com.au/listamatic/

regards
ben

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.4 - Release Date: 3/18/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.7.4 - Release Date: 3/18/05

From: Patrick H. Lauke
Date: Mon, Mar 21 2005 12:37PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

glenda wrote:
> I thought one reason for providing the non-linked, printable characters
> between adjacent links was to provide a visual cue to help people with
> cognitive disabilities to identify the break between links. Using the lists
> without the bullets wouldn't provide the visual cue.

The guideline has mostly been a technically motivated one. It was set
out to compensate for faulty assistive technology (screenreaders,
braille interfaces, etc) which would not clearly distinguish between
adjacent links (as far as I remember, one main culprit was an old
screenreader in combination Netscape 4, which would simply read
everything out as one, long link).

As for visual cues...that's what CSS is for. Yes, remove the bullet, but
add a left/right border and you have exactly the same visual effect (and
far greater control over it, for that matter).

Patrick
--
Patrick H. Lauke
_____________________________________________________
re

From: Glenda
Date: Mon, Mar 21 2005 12:48PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Thanks Patrick,

So for http://www.eaglecom.bc.ca, it is best to redo the top navigation bar
using css? I'm sensing the technique to satisfy this guideline has
changeder since the use of css has become more prevalent. Am I wrong here?

Cheers,
Glenda

-----Original Message-----
From: redux [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, March 21, 2005 11:38 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



glenda wrote:
> I thought one reason for providing the non-linked, printable characters
> between adjacent links was to provide a visual cue to help people with
> cognitive disabilities to identify the break between links. Using the
lists
> without the bullets wouldn't provide the visual cue.

The guideline has mostly been a technically motivated one. It was set
out to compensate for faulty assistive technology (screenreaders,
braille interfaces, etc) which would not clearly distinguish between
adjacent links (as far as I remember, one main culprit was an old
screenreader in combination Netscape 4, which would simply read
everything out as one, long link).

As for visual cues...that's what CSS is for. Yes, remove the bullet, but
add a left/right border and you have exactly the same visual effect (and
far greater control over it, for that matter).

Patrick
--
Patrick H. Lauke
_____________________________________________________
re

From: Terence de Giere
Date: Tue, Mar 22 2005 12:08PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

= EMAIL ADDRESS REMOVED = wrote:

I used a white vertical bar to separate the adjacent links in the top
navigation bar. Is this not adequate? Bobby is spitting it out, saying
repairs are needed. Is this another example of how automated checkers
should not be relied upon as the gospel?....

My experience with Bobby 5.0 has been if there are additional HTML
elements between the links surrounding a printable character, Bobby
thinks the character is not there. I got errors on a site I worked on
where I had inserted a span element around a vertical bar, with CSS
instructions to match the background color. Bobby reported an error;
when I removed the span elements, it passed. I sent samples to
Watchfire with an explanation of what was happening shortly after Bobby
5.0 came out. Bobby 4.01 (the Java version), slightly revised by
Watchfire, did all right with this scenario. I haven't tried the on line
version with this.

Terence de Giere
= EMAIL ADDRESS REMOVED =

From: Glenda
Date: Tue, Mar 22 2005 1:15PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Thank you, Terence!

That is the explanation I was actually looking for -- in case the client
asks why the site isn't Bobby-approved [even though it complies with Web
Content Accessibility Guidelines 1.0, as far I know]. Some clients put so
much credence into Bobby and other automated checkers, without fully
understanding what makes a site accessible.

Cheers,
Glenda
Soaring Eagle Communications
www.eaglecom.bc.ca

-----Original Message-----
From: terence [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 22, 2005 11:08 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



= EMAIL ADDRESS REMOVED = wrote:

I used a white vertical bar to separate the adjacent links in the top
navigation bar. Is this not adequate? Bobby is spitting it out, saying
repairs are needed. Is this another example of how automated checkers
should not be relied upon as the gospel?....

My experience with Bobby 5.0 has been if there are additional HTML
elements between the links surrounding a printable character, Bobby
thinks the character is not there. I got errors on a site I worked on
where I had inserted a span element around a vertical bar, with CSS
instructions to match the background color. Bobby reported an error;
when I removed the span elements, it passed. I sent samples to
Watchfire with an explanation of what was happening shortly after Bobby
5.0 came out. Bobby 4.01 (the Java version), slightly revised by
Watchfire, did all right with this scenario. I haven't tried the on line
version with this.

Terence de Giere
= EMAIL ADDRESS REMOVED =

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

From: Christian Heilmann
Date: Tue, Mar 22 2005 1:27PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

glenda wrote:

>Thank you, Terence!
>
>That is the explanation I was actually looking for -- in case the client
>asks why the site isn't Bobby-approved [even though it complies with Web
>Content Accessibility Guidelines 1.0, as far I know]. Some clients put so
>much credence into Bobby and other automated checkers, without fully
>understanding what makes a site accessible.
>
>
>
I normally create a page that does not make sense at all (bad
alternative text, wrong structure) and show that bobby deems it AAA
compliant. Then I point the clients to the plethora of "User Checks"
Bobby flags up and explain that accessibility testing is 10% tops
technical problems, the rest common sense and usability.

Another good example to show the user when is bobby complaining when an
onclick is not accompanied by an onkeypress that the onkeypress will
also be triggered by the tab key on mozilla. The workaround of course
is to apply the handler VIA javascript rather than in the HTML.

From: Glenda
Date: Tue, Mar 22 2005 2:12PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

What a fantastic idea! accessibility is definitely more than a set of
guidelines, which I don't think "outsiders" get.

Cheers,
Glenda

-----Original Message-----
From: lists38 [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 22, 2005 1:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



glenda wrote:

>Thank you, Terence!
>
>That is the explanation I was actually looking for -- in case the client
>asks why the site isn't Bobby-approved [even though it complies with Web
>Content Accessibility Guidelines 1.0, as far I know]. Some clients put so
>much credence into Bobby and other automated checkers, without fully
>understanding what makes a site accessible.
>
>
>
I normally create a page that does not make sense at all (bad
alternative text, wrong structure) and show that bobby deems it AAA
compliant. Then I point the clients to the plethora of "User Checks"
Bobby flags up and explain that accessibility testing is 10% tops
technical problems, the rest common sense and usability.

Another good example to show the user when is bobby complaining when an
onclick is not accompanied by an onkeypress that the onkeypress will
also be triggered by the tab key on mozilla. The workaround of course
is to apply the handler VIA javascript rather than in the HTML.

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

From: Robinson, Norman B - Washington, DC
Date: Wed, Mar 23 2005 3:09PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Glenda/Terence;

Could you post an example of said web page? Do you have a
"template" you would care to share?

Regards,

Norman Robinson

-----Original Message-----
From: lists38 [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 22, 2005 4:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



glenda wrote:

>Thank you, Terence!
>
>That is the explanation I was actually looking for -- in case the
>client asks why the site isn't Bobby-approved [even though it complies
>with Web Content Accessibility Guidelines 1.0, as far I know]. Some
>clients put so much credence into Bobby and other automated checkers,
>without fully understanding what makes a site accessible.
>
>
>
I normally create a page that does not make sense at all (bad
alternative text, wrong structure) and show that bobby deems it AAA
compliant. Then I point the clients to the plethora of "User Checks"
Bobby flags up and explain that accessibility testing is 10% tops
technical problems, the rest common sense and usability.

Another good example to show the user when is bobby complaining when an
onclick is not accompanied by an onkeypress that the onkeypress will
also be triggered by the tab key on mozilla. The workaround of course
is to apply the handler VIA javascript rather than in the HTML.

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

From: Glenda
Date: Wed, Mar 23 2005 3:29PM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Norman,

I used the vertical bar technique on my own site at www.eaglecom.bc.ca, and
on the project's site
http://www.eaglecom.bc.ca/CAPsite/introduction/overview.htm [temporary
url] - that is the one Bobby is fussing over. Which code would you like?

Cheers,
Glenda

Glenda Watson Hyatt, Principal
Soaring Eagle Communications
Accessible websites. Accessible content. Accessible solutions.
www.eaglecom.bc.ca


-----Original Message-----
From: norman.b.robinson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 23, 2005 2:09 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



Glenda/Terence;

Could you post an example of said web page? Do you have a
"template" you would care to share?

Regards,

Norman Robinson

-----Original Message-----
From: lists38 [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 22, 2005 4:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] 10.5 Separate adjacent links



glenda wrote:

>Thank you, Terence!
>
>That is the explanation I was actually looking for -- in case the
>client asks why the site isn't Bobby-approved [even though it complies
>with Web Content Accessibility Guidelines 1.0, as far I know]. Some
>clients put so much credence into Bobby and other automated checkers,
>without fully understanding what makes a site accessible.
>
>
>
I normally create a page that does not make sense at all (bad
alternative text, wrong structure) and show that bobby deems it AAA
compliant. Then I point the clients to the plethora of "User Checks"
Bobby flags up and explain that accessibility testing is 10% tops
technical problems, the rest common sense and usability.

Another good example to show the user when is bobby complaining when an
onclick is not accompanied by an onkeypress that the onkeypress will
also be triggered by the tab key on mozilla. The workaround of course
is to apply the handler VIA javascript rather than in the HTML.

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/


--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.8.0 - Release Date: 3/21/05

From: Terence de Giere
Date: Sat, Mar 26 2005 10:49AM
Subject: Re: 10.5 Separate adjacent links
← Previous message | Next message →

Norman Robinson at USPS wrote:

Glenda/Terence -

Could you post an example of said web page? Do you have a "template" you
would care to share?...

The performance of Bobby 5.0 with adjacent links and the Priority 3 WCAG
10.5 guideline is inconsistent, and its inconsistencies are more complex
than I initially discovered. The following test page can be used for the
test. I would say this is a bug. Both certain elements inside
surrounding link text and the element around a printing character
separator generate an error with my version of Bobby 5.0. Bobby 4.01
passes this page on the automated part of a Priority 3 test, as does the
Bobby WorldWide online test on the Watchfire web site. Watchfire does
not seem to have provided any patches for version 5.0 since its release,
which is a shame because small companies, schools etc., might not be
able to afford Watchfire's more extensive corporate testing software
applications that include accessibility modules.

The results of this short test indicate it might be possible to visually
mask the separators using elements other than with CSS, and then
pass the Bobby 5.0 test. But note that other arrangements of the code
also trigger the error even if is missing.

http://www.degiere.com/sample/adjacent-links.htm

Terenc de Giere
= EMAIL ADDRESS REMOVED =

From: Terence de Giere
Date: Sat, Mar 26 2005 10:49AM
Subject: Re: 10.5 Separate adjacent links
← Previous message | No next message

Norman Robinson at USPS wrote:

Glenda/Terence -

Could you post an example of said web page? Do you have a "template" you
would care to share?...

The performance of Bobby 5.0 with adjacent links and the Priority 3 WCAG
10.5 guideline is inconsistent, and its inconsistencies are more complex
than I initially discovered. The following test page can be used for the
test. I would say this is a bug. Both certain elements inside
surrounding link text and the element around a printing character
separator generate an error with my version of Bobby 5.0. Bobby 4.01
passes this page on the automated part of a Priority 3 test, as does the
Bobby WorldWide online test on the Watchfire web site. Watchfire does
not seem to have provided any patches for version 5.0 since its release,
which is a shame because small companies, schools etc., might not be
able to afford Watchfire's more extensive corporate testing software
applications that include accessibility modules.

The results of this short test indicate it might be possible to visually
mask the separators using elements other than with CSS, and then
pass the Bobby 5.0 test. But note that other arrangements of the code
also trigger the error even if is missing.

http://www.degiere.com/sample/adjacent-links.htm

Terenc de Giere
= EMAIL ADDRESS REMOVED =