Forum Moderators: open
Unfortunately the adjacent links guidelines [w3.org] from the WAI states that you must separate them with more than white space which mashes up your menu. Perhaps there is a way of formatting the <p> tag which I am about to look into.
Are the WAI receptive to suggestions for changes in the guidelines, if so anyone got a contact. Anyone else got any gripes?
Cheers
Use fresh <p> tags for each link and set the CSS to alter the respective gaps:
#menu p {
margin-top: 1px;
margin-bottom: 1px
}
then set the link and hover (#menu a{}) behaviours to look like graphics.
Cheers
10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
Don't see any need for tables here. Or any CSS styling for that matter. All you need to do is make sure there is a space character between links so you can see where one link ends and another starts.
So..
<!-- this is illegal -->
<a href="#1">1</a><a href="#2">2</a>
<!-- but this is legal -->
<a href="#1">1</a> <a href="#2">2</a>
Links that are stacked vertically (by placing a <br> after the link or by using other markup) are already 'rendered discinctly' so they should be fine.
Incidentally, for a menu of links consider using the list markup tags...
<ul>
<li><a href="#1">Link One</a></li>
<li><a href="#2">Link Two</a></li>
<li><a href="#3">Link Three</a></li>
</ul>
After all, a menu is a list of links.
You can then style the list with css to look like any kind of menu you like. I wrote a how-to thread on the CSS board a while ago about this, but I can't find it (Note to Brett: more powerful search options would be most welcome!). Forunately someone has since pointed out that AListApart has a similar article [alistapart.com].
10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
A space is not a printable character. You would have to use periods, middots, vertical bars or something else. But it has to be a real, printable character.
<a href="#">blah</a> ¦ <a href="#">blah</a> ¦ <a href="#">blah</a><a href="#">blah</a> · <a href="#">blah</a> · <a href="#">blah</a><a href="#">blah</a> / <a href="#">blah</a> / <a href="#">blah</a>[<a href="#">blah</a>] [<a href="#">blah</a>] [<a href="#">blah</a>]The best solution, for both vertical and horizontal links, is to use lists. The article at A List Apart describes this very well.
Good old CSS comes to the rescue
The page has to make just as much sense with CSS turned off. If your links are "taken care of" because of some nifty CSS thingy, but still break the recommendation without the same - then it doesn't conform to WAI at all (not even level A).
One of the most important priorities is to be cross-useragent-friendly. No matter the tool used to access your page, and no matter how ancient it might be, your page must be just as usable and make just as much sense.
I'm afraid you're not quite right, grahamstewart
Fair enough (it happens sometimes :))
I read it to mean that '(surrounded by spaces)' was an example of the printable characters that you could use. But you are right, after re-readin it, it sounds more like they want you to place separator characters between links.
This seems a bit unneccessary to me, and I am inclined to take the position that most user agents do render adjacent links distinctly
Visual browsers only highlight the link itself. The screen readers I have seen generally announce a link like "link: home page" "link: contact us" which seems nicer that "square bracket link: home page square bracket" or whatever.
The page has to make just as much sense with CSS turned off.
Yup, another good reason to use the <ul> solution - you don't end up with a horrible mess when CSS is off. Just a nice bulleted list of the links.
seems a bit unneccessary to me, and I am inclined to take the position that most user agents do render adjacent links distinctly
Yeah, in most cases a space or line break should be enough. I mean, that's how most pages create their "link lists" anyway. Even W3C's page doesn't have "printable characters" between all links. Disabled people aren't stupid.
seems nicer that "square bracket link: home page square bracket" or whatever
What's wrong with that? ;)
and
>>If your links are "taken care of" because of some nifty CSS thingy
Using the <p> tag, the page will render sufficiently readable without the CSS, however the <ul> option had totally slipped my mind and is a better option yet. I have been making sure that pages still look fine without styles and they seem to. I have to use tables as we still have a proportion of NN4 users. I do see a day when it is moved to 100% CSS but I will need to show a damn fine example of it. For now it is a case if complying and exceeding the recent legislation (SENDA for UK acadmemic sites)
Cheers
