6 replies [Last post]
fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 15 years 19 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

I have been trying to make all my websites as accessible as possible - mostly with good success.
recently i have come across a recomendation that is causing me a few headaches.

Quote:
Separate adjacent links with more than white space

Place some sort of separating character between adjacent links. Images or bulleted or numbered lists are good choices. You can also use explicit separator characters such as "|" or enclose the links in brackets [ ]. "White space characters", such as spaces, line l. breaks, carriage returns, and paragraph breaks, are not sufficient.

For example:

[<A HREF="jim.html">Jim's Home Page</A>] [<A
HREF="alice.html">Alice's Home Page</A>]

or:

<OL type="1" compact>
<LI><A HREF="jim.html">Jim's Home Page</A></LI>
<LI><A HREF="alice.html">Alice's Home Page</A></LI>
</OL>

as far as i can work out, the only way you are alowed to present links is as a list which i thought was incorrect practice?

The first option of adding [ and ] around the links would be good but it just looks ugly and spoils the look of the navigation

does anyone have any alternative suggestions please. (Lorraine - where are you?)

Cheers

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Accessibility

I think we need to be careful here that we do not get bogged down by thinking that every utterance of the W3C and the WCAG has to be regarded as gospel, this is still an area that is trying to establish a set of definitive practises., and some points that are made are known to be vague and not that helpful, and to cause confusion with many.

I can understand the need for visual clarity to links , especially where you may just have two or three inline links in a horizontal bar, you would need to define them as being clear individual links rather than say a sentence and then a simple bullet or as suggested [] or indeed an image background should be fine. The concern would be how these links present themselves when rendered sans styling, as plain text. if you have set the links as purely inline anchors then in plain text they are just going to look like a flowing sentence and would require a method of separating them to provide the visual clue as to their nature over and above the colour coding.

As for a large list of links, well normally there is some sort of visual definition to them we generally don't just separate them with some white space. do we? they would have some sort of background or border , maybe an image, or an underline denoting a link and would generally be contained within a list element, even if you chose to hide the list styling, when rendered as plain text then the bullets would display providing the visual cues to the items.

I think this is one of those times when we ought not to be too worried by the guidelines and accept them as a general encouragement to keep links clear and obvious, on the other hand if this is in respect of some particular problem with say screen readers then it needs to be stated.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Accessibility

fatfreddy wrote:
as far as i can work out, the only way you are alowed to present links is as a list which i thought was incorrect practice?

My understanding was that it was correct practice to present your links as lists.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Accessibility

I think there may be (at least) two different things here.

A menu style list of links, being displayed unstyled by a browser. If you are using a list or have separated them with pipes ("|") they will display unstyled with visual cues to indicate they are separate links.

Normal text which may have several links together. Especially given the current tendency to not underline links in normal text, it is not clear if there is one link or several. e.g. css forum is that one link to a [css forum], or two links to something about [css] and another to a related discussion [forum]. If I assume one and get the other I could be mighty confused.

Footers are a common place where links are presented one after the other with little to separate them - take a look at the bottom of this page and consider what would happen with a little less white space.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Accessibility

Exactly Chris this was what I was saying, it's largely in respect of those odd links that can tend to look like sentences if one is not careful that don't stand out as links or as separate link if some further identification is not used.

I do think that this is a case when one must not get overly worked up over the WCAG instruction, it's somewhat a matter of common sense. Have a look at the page, do the links make sense as links are they apparent as such.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Accessibility

fatfreddy wrote:
(Lorraine - where are you?)

Just to add my bit to the learned discussion...
Chris..S highlights the valid visual aspects of coding of links. Once it *looks* OK, there is no need to worry about people who have no useful vision. In practice, their screen reading software will recognise links howsoever semantically or *correctly* they may be presented. For example:
<a href="cssforum.htm;">css forum</a>
will be read aloud as Linkn: css forum.
<a href="css.html">css</a><a href="forum.html">forum</a>
will be read aloud as Linkn: css Linkn: forum.

The screen-reader only needs <a href> to do its job. This a representation of what a screen-reader makes of part of this page.

Quote:
Webpage: CSS Creator Forum View topic - Accessibility
Link 1: Cascading Style Sheets Forum
The CSS forum is a Cascading Style Sheet learning resource for web developers and designers. Web developers give and receive tips and advice on CSS and website creation.
If you have a website and find this site useful please
Link 2: link to us
and help continue the growth of our CSS Community.
Link 3: JavaScript Kit >
Link 4: JavaScript Reference
Comprehensive listing of JavaScript objects, properties, and methods. Also includes concise explanations and useful examples.
Link 5: Click here.
Link 6: Accessibility
Link 7: Post new topic
Link 8: Reply to topic
Link 9: CSS Forum Index ->
Link 10: Off Topic
Link 11: View previous topic ::
Link 12: View next topic
fatfreddy
Enthusiast
Image: Enthusiast
Joined: 25 Mar 2005
Posts: 91
Location: Deep down under
Link 13: Reply with quote
Link 14: sutra53186.html#53186
Posted: Tue Aug 02, 2005 4:06 am Post subject: Accessibility
I have been trying to make all my websites as accessible as possible - mostly with good success.
recently i have come across a recomendation that is causing me a few headaches.
Quote:
Separate adjacent links with more than white space
Place some sort of separating character between adjacent links. Images or bulleted or numbered lists are good choices. You can also use explicit separator characters such as "|" or enclose the links in brackets [ ].

hth
Lorraine

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 15 years 19 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Accessibility

Hi All
Thanks!

The links in questions are actually displayed as a block (one on top of the other) so no-one will read it as a sentence. I agree that inline links should have a seperator.

It is really good to see what the screenreader will see Lorraine. Although watchfire objects to my links, it doesn't seem it will cause any problems in the real world - which is, after all, the important bit!

That's one problem off my mind

Cheers

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns