WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 10.5 Separate adjacent links

for

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Mar 21, 2005 6:26AM

> 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