Forum Moderators: open
<!--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."> <span>English</span></a></li>
<li><a class="linkto nl" lang="nl" href="nl/index.html" title="Deze website in het Nederlands."> <span>Nederlands</span></a></li>
<li><a class="linkto de" lang="de" href="de/index.html" title="Diese Web site auf deutsch."> <span>Deutsch</span></a></li>
<li><a class="linkto fr" lang="fr" href="fr/index.html" title="Ce site Web en français."> <span>Français</span></a></li>
<li><a class="linkto tr" lang="tr" href="tr/index.html" title="Turkçe dil bu web sitesi."> <span>Turkç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]
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.
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".
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.
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."> <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?
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<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
langhreflangreltitleDon'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...]
