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: [email protected]
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]
*******************************************************************

Reply via email to