homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Skip links, language, stylesheet switching
I need some advice on this
Bert36




msg:3414106
 9:52 am on Aug 5, 2007 (gmt 0)

I am trying to create some sort of template which I can use as a base for my projects. I would like some feedback on my choice of sequence and choice of words.

<!--Language===========================================================================================================-->
<p class="auralonly">The current language is set to English.</p>
<ul class="nav language">
<li><a class="linkto en" lang="en" href="index.html" title="This web site in English.">&nbsp;<span>English</span></a></li>
<li><a class="linkto nl" lang="nl" href="nl/index.html" title="Deze website in het Nederlands.">&nbsp;<span>Nederlands</span></a></li>
<li><a class="linkto de" lang="de" href="de/index.html" title="Diese Web site auf deutsch.">&nbsp;<span>Deutsch</span></a></li>
<li><a class="linkto fr" lang="fr" href="fr/index.html" title="Ce site Web en fran&ccedil;ais.">&nbsp;<span>Fran&ccedil;ais</span></a></li>
<li><a class="linkto tr" lang="tr" href="tr/index.html" title="Turk&ccedil;e dil bu web sitesi.">&nbsp;<span>Turk&ccedil;e</span></a></li>
</ul>
<!--Accessibility======================================================================================================-->
<ul class="nav styles">
<li><a href="http://ni.example.org/info.html" title="Information about the accessibility and usability of this site.">Accessibility info</a></li>
<li><a href="switcher.php?set=aural" title="Style sheet for screen readers and braille (this will unhide certain navigational elements).">Screenreaders and Braille</a></li>
<li><a href="switcher.php?set=bonw" title="Style sheet with high contrast black font on white background.">High contrast black on white</a></li>
<li><a href="switcher.php?set=wonb" title="Style sheet with high contrast white font on black background.">High contrast white on black</a></li>
<li><a href="switcher.php?set=style" title="Default style sheet.">Default stylesheet</a></li>
</ul>
<!--Header=============================================================================================================-->
<h1 id="header"></h1>
<!--Navigation=========================================================================================================-->
<div id="navigation">
<ul class="nav local">
<li><p class="auralonly">Navigational links start here.</p></li>
<li><a href="#content" title="Go to main content.">Go to main content</a></li>
<li><a href="#subcontent" title="Go to sub-content.">Go to sub-content</a></li>
<li><a href="#page" title="Go to top of page.">Go to top of page</a></li>
</ul>
<ul class="nav levela">
<li><a href="#" title="">Menu 1</a></li>
<li><a href="#" title="">Menu 2</a></li>
<li><a href="#" title="">Menu 3</a></li>
</ul>
<ul class="nav levelb">
<li><a href="#" title="">Menu 1</a></li>
<li><a href="#" title="">Menu 2</a></li>
<li><a href="#" title="">Menu 3</a></li>
</ul>
</div>
<!--Content============================================================================================================-->
<div id="contentwrapper">
<div id="content">
<ul class="nav local">
<li><p class="auralonly">Main content starts here.</p></li>
<li><a href="#subcontent" title="Go to sub-content.">Go to sub-content</a></li>
<li><a href="#page" title="Go to top of page.">Go to top of page</a></li>
<li><a href="#navigation" title="Go to navigation.">Go to navigation</a></li>
</ul>
</div>
<!--Subcontent=========================================================================================================-->
<div id="subcontent">
<ul class="nav local">
<li><p class="auralonly">Sub-content starts here.</p></li>
<li><a href="#page" title="Go to top of page.">Go to top of page</a></li>
<li><a href="#navigation" title="Go to navigation.">Go to navigation</a></li>
<li><a href="#content" title="Go to main content.">Go to main content</a></li>
</ul>
</div>
</div>
<!--Footer=============================================================================================================-->
<p id="footer"></p>
<!--===================================================================================================================-->
<ul class="nav local">
<li><p class="auralonly">You have reached the bottom of the page.</p></li>
<li><a href="#page" title="Go to top of page.">Go to top of page</a></li>
<li><a href="#navigation" title="Go to navigation.">Go to navigation</a></li>
<li><a href="#content" title="Go to main content.">Go to main content</a></li>
<li><a href="#subcontent" title="Go to sub-content.">Go to sub-content</a></li>
</ul>
</div>

for example: I worried about the fact that each page will start with the language links; could that be percieved as annoying?

[edited by: pageoneresults at 12:17 pm (utc) on Aug. 5, 2007]
[edit reason] Examplified URI Reference [/edit]

 

encyclo




msg:3426325
 9:39 pm on Aug 19, 2007 (gmt 0)

That's a nice setup, Bert36, and extremely well thought-out! :) There are a couple of things that stand out for me: firstly, you are announcing the website language, then offering the choice via a link to view the site in the same language. You could consider displaying only the links which are to other languages (ie. use PHP to make them conditional on the declared language of the current page).

The verbosity is perhaps overwhelming for anything other than a complex document, I'm not sure whether the "You have reached the bottom of the page" and similar are really necessary, the links are probably clear enough in their intention to speak for themselves.

Finally, are you planning on hiding much of these links? I prefer offering a visible set of "skip" links, as they are not only useful for the visually handicapped, but also vital tools for a physically impaired user who cannot use a mouse and has to tab through the links to navigate around the page. Leaving the skip links in view allows much more rapid on-page navigation.

Bert36




msg:3431924
 1:48 pm on Aug 25, 2007 (gmt 0)

Thanks encyclo,

You are right ofcourse, I should remove the language that is already displayed.

In all stylesheets I display the skip-links. I can however think of simple sites where these would not be displayed in the "default style sheet".

As for the "content starts here" etc. perhaps you are right, I'm not sure. I am hoping more people will react to this. I can imagine someone getting lost while "skipping".

yannis




msg:3431998
 4:05 pm on Aug 25, 2007 (gmt 0)

I am not sure about removing the top link that refers to the current language, since is in the aural only stylesheet I would rather rephrase it with a reference to the fact that one can click to other languages.

From a usability point of view displaying 'flags' rather than language links for the 'screen' stylesheets is preferable. Overall though a very well thought scheme.

Bert36




msg:3432343
 7:55 am on Aug 26, 2007 (gmt 0)

Thanks Yannis,

You can't tell from my code, but as you can see the actual language is inside a <span> tag:
<a class="linkto en" lang="en" href="index.html" title="This web site in English.">&nbsp;<span>English</span></a>

In the stylesheet, all span-tags inside an a-tag are hidden (in the screen stylesheet). and links with class "en" will have an english flag as background, etc.

Do any you don't think it would be annoying that each pages starts with "current language is set..." or "you can change the language to...". W3C states that the skip-link should be at the top of the page, but should that be before or after the language? I think the language should come first, but this should only be nescessery once. Would you think it preferable to have the languge set on a seperate page perhaps?

In other words, would it be more accessible and user friendly to have the language and stylesheet options on a seperate "preference" page?

encyclo




msg:3432508
 2:17 pm on Aug 26, 2007 (gmt 0)

I'm afraid I disagree with the use of flags for languages, for a couple of reasons. Firstly, in terms of accessibility, a graphic is a sub-optimal choice, not just for blind users, but also those with a visual impairment such as color-blindness. The second, and more important, problem with flags is that a flag represents a country or territory, not a language. A British flag would therefore indicate a British version, and wouldn't be a natural choice for an American even if the content is in English. I'm Canadian, but a Canadian flag doesn't tell me if the content is in English or French.

When offering a choice of language versions, you should always use text in the target language. For example, English, Franšais, Espa˝ol, Hrvatski, Italiano... If you are using UTF-8, you can use all the characters required for each language (ie. Chinese or Japanese characters). When you mark up the text, you should always add a lang attribute to each section in a language which differs from the main declared language of the page. So, if you have a document which is in English, you have:

<html lang="en">

At the top of the page, and for each language link:

<a href="http://example.fr/" [b]lang="fr" hreflang="fr" rel="alternate" title="This website in French"[/b]>Franšais</a>
<a href="http://example.es/" [b]lang="es" hreflang="es" rel="alternate" title="This website in Spanish"[/b]>Espa˝ol</a>

- the lang indicates the language of the anchor text itself
- the
hreflang indicates the language of the linked document
- the
rel indicates that the link is to an alternate version of the same document
- the
title can be used as an explanatory text for the link, written in the language of the main document

Don't forget to ensure that there is more than just white-space between each link, you can use a floated unordered list if you want the links on one line.

Reference: [w3.org...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved