RE: [WSG] Accessible menu lists - using the pipe character as separator?

[Justin.Mcguire]

As others have suggested, I would go with a UL. However, you may be trying to 
get your list to run horizontally.

I most often see the pipe character used as a separator in horizontal lists, 
rather than vertical. IIRC, you can make your UL run horizontally by using the 
display:inline property. (I'm rusty on this, I can't recall if you need to 
apply it to the ul or the li items.) Once you have it running horizontally, put 
a border on the left of each list item, then use the first-child pseudo-class 
to remove it from the first one.

This should give the look of a horizontal list separated by pipes, but 
screen-readers will see it as a list.

Cheers

Justin McGuire

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Tim Offenstein
Sent: Sunday, 28 September 2008 1:40 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Accessible menu lists - using the pipe character as 
separator?

>Hello all
>
>I can't seem to find a definitive answer on this via Google - is it
>best practice to use something like the pipe character ( | ) to
>separate links in
>a menu so that screenreader software pauses between the list items?
>Any recommended articles dealing with accessible menus in general?
>
>Daisy
>
Hi Daisy,

As the others have said, best practice would be to use a UL for your
list of links. If you want a visual separator, the border property in
CSS will work best but there's no need to provide a separator for the
sake of screen reading software. A very beneficial best practice
that's recommended here at the University of Illinois is to proceed
all navigational lists with a header tag, usually a h2 or h3. That
way disabled users can go directly to the navigation via a list of
headers. Also the header alerts them to the purpose of the list
since, as David mentioned, screen reading software will announce the
list but the only thing it says is, "unordered list, 5 items". If a
header disturbs your layout, then it's recommended that you "hide" it
visually by absolute positioning off the top of the page using CSS.

-Tim
--
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
Tim Offenstein  ***  Campus Accessibility Liaison  ***  (217) 244-2700
 CITES Departmental Services  ***  www.uiuc.edu/goto/offenstein



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[Stuart Foulstone]

Hi,

Early screen-readers were not very good at differentiating links and would
run together the text of two adjacent links so it was necessary to use a
"separator" character.

The vertical line (pipe) became the preferred character to separate
adjacent links because, whilst it is quite  verbose - the screen reader
reads it as "vertical line" - this character is not used for very much
else and so reduces any possible confusion with other text.

(When I first started out in web design, I too thought this continual
repetition of "vertical line" would be annoying but was assured by a
screen-reader user that it was preferable to confusion otherwise).

Thus, this separator was not merely a visual cue but vital for separating
links from each other.

That said, modern screen-readers are much better at differentiating
between links and so screen-reader user's need this device much less.

Additionally, improvements in CSS have led to best practice in web design
increasingly placing navigation menus in lists.



On Sat, September 27, 2008 3:24 pm, Daisy Morgan wrote:
> Hello all
>
> I can't seem to find a definitive answer on this via Google - is it best
> practice to use something like the pipe character ( | ) to separate links
> in
> a menu so that screenreader software pauses between the list items? Any
> recommended articles dealing with accessible menus in general?
>
> Daisy
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[Tim Offenstein]

Hello all

I can't seem to find a definitive answer on this via Google - is it 
best practice to use something like the pipe character ( | ) to 
separate links in
a menu so that screenreader software pauses between the list items? 
Any recommended articles dealing with accessible menus in general?


Daisy


Hi Daisy,

As the others have said, best practice would be to use a UL for your 
list of links. If you want a visual separator, the border property in 
CSS will work best but there's no need to provide a separator for the 
sake of screen reading software. A very beneficial best practice 
that's recommended here at the University of Illinois is to proceed 
all navigational lists with a header tag, usually a h2 or h3. That 
way disabled users can go directly to the navigation via a list of 
headers. Also the header alerts them to the purpose of the list 
since, as David mentioned, screen reading software will announce the 
list but the only thing it says is, "unordered list, 5 items". If a 
header disturbs your layout, then it's recommended that you "hide" it 
visually by absolute positioning off the top of the page using CSS.


-Tim
--
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
   Tim Offenstein  ***  Campus Accessibility Liaison  ***  (217) 244-2700
CITES Departmental Services  ***  www.uiuc.edu/goto/offenstein



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[David Hucklesby]

> 2008/9/27 Daisy Morgan <[EMAIL PROTECTED]>
>
>> Hello all
>>
>> I can't seem to find a definitive answer on this via Google - is it best 
>> practice to
>> use something like the pipe character ( | ) to separate links in
>> a menu so that screenreader software pauses between the list items? Any 
>> recommended
>> articles dealing with accessible menus in general?
>>

On Sat, 27 Sep 2008 16:29:56 +0200, Svip replied:
> How about a list of links?  If you want a separator, use some CSS styles.  
> But for what
> you are asking, you are probably looking for an ul list.
>

I believe that (some) screen readers attempt to speak out "pipe 
character" or some such, which may be confusing. As Svip says,
a list of links generally goes in a list element. A screen reader *may*
even announce the number of items in the list, so visitors can
skip over them if if they wish.

Visually, you can add a border to the links.[1]

Others may correct me on my assumptions here.

Cordially,
David
--
[1] 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[Joseph Taylor]

A screen reader would read out each pipe character, resulting in a mild 
annoyance I would think.  Is it accessible?  Sure, the device can 
certainly handle the links and separator.


In the end though, the separator is a visual item, not part of the 
information.  The beginning and end of each link handle the separation 
on that level.


That said, CSS should be used to handle that visual aspect of the links.

Joseph R. B. Taylor
/Designer / Developer/
--
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Fax: (866) 301-8045
Web: http://sitesbyjoe.com
Email: [EMAIL PROTECTED]



Tim Gieseking wrote:

Agree with the list of links, and use a CSS border for a separator.

I have no evidence for you, but it sure seems to me that a pipe 
character would be the opposite of best practice.



On Sat, Sep 27, 2008 at 9:29 AM, Svip <[EMAIL PROTECTED] 
> wrote:


How about a list of links?  If you want a separator, use some CSS
styles.  But for what you are asking, you are probably looking for
an ul list.

Regards,
Svip

2008/9/27 Daisy Morgan <[EMAIL PROTECTED]
>

Hello all

I can't seem to find a definitive answer on this via Google -
is it best practice to use something like the pipe character (
| ) to separate links in
a menu so that screenreader software pauses between the list
items? Any recommended articles dealing with accessible menus
in general?

Daisy



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]

***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]

***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*** 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[kevin mcmonagle]

I use those sometimes if theres a load of dynamic links in the footer 
but never as the primary navigation bar. It would probably be torture 
for someone using a screen reader. Use a list with the border if you can.



Hello all

I can't seem to find a definitive answer on this via Google -
is it best practice to use something like the pipe character (
| ) to separate links in
a menu so that screenreader software pauses between the list
items? Any recommended articles dealing with accessible menus
in general?

Daisy






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[Tim Gieseking]

Agree with the list of links, and use a CSS border for a separator.

I have no evidence for you, but it sure seems to me that a pipe character
would be the opposite of best practice.


On Sat, Sep 27, 2008 at 9:29 AM, Svip <[EMAIL PROTECTED]> wrote:

> How about a list of links?  If you want a separator, use some CSS styles.
> But for what you are asking, you are probably looking for an ul list.
>
> Regards,
> Svip
>
> 2008/9/27 Daisy Morgan <[EMAIL PROTECTED]>
>
> Hello all
>>
>> I can't seem to find a definitive answer on this via Google - is it best
>> practice to use something like the pipe character ( | ) to separate links in
>> a menu so that screenreader software pauses between the list items? Any
>> recommended articles dealing with accessible menus in general?
>>
>> Daisy
>>
>>
>>
>> ***
>> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
>> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
>> Help: [EMAIL PROTECTED]
>> ***
>>
>>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Accessible menu lists - using the pipe character as separator?

[Svip]

How about a list of links?  If you want a separator, use some CSS styles.
But for what you are asking, you are probably looking for an ul list.

Regards,
Svip

2008/9/27 Daisy Morgan <[EMAIL PROTECTED]>

> Hello all
>
> I can't seem to find a definitive answer on this via Google - is it best
> practice to use something like the pipe character ( | ) to separate links in
> a menu so that screenreader software pauses between the list items? Any
> recommended articles dealing with accessible menus in general?
>
> Daisy
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] Accessible menu lists - using the pipe character as separator?

[Daisy Morgan]

Hello all

I can't seem to find a definitive answer on this via Google - is it best 
practice to use something like the pipe character ( | ) to separate links in
a menu so that screenreader software pauses between the list items? Any 
recommended articles dealing with accessible menus in general?


Daisy



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***