@utrecht/alternate-lang-nav-css
v1.2.0
Published
Alternate language navigation component for the Municipality of Utrecht based on the NL Design System architecture
Downloads
132
Keywords
Readme
Alternate Language Navigation
HTML
Use the <nav> with <a> element approach for hyperlinks to alternate languages. Use the button group with toggle button approach (role="region" with <button aria-pressed="true">) for single page apps where language is replaced using client-side scripting.
Use
aria-current="page"to annotate the link to the page the use is on currently.Use a word separator between the links to keep the links comprehensible without CSS, so do not write
<a>EN</a><a>NL</a>.The links are best discoverable inside a navigation landmark region, so inside a
role="navigation"or<nav>element.The buttons are best discoverable inside a
role="region"landmark. Provide a label for the landmark, for example by usingaria-label.Since it is not possible to provide alternate content for every language, it can help users that only understand other languages to use automatic translation tools such as Google Translate. Ensure the language of the current page is declared using
<html lang="…">, so the browser can recognize the page is in a foreign language and suggest to enable automatic translation. Provide server side-rendering to improve the ability of those tools to retrieve the text content for translation.
UX
- For users that don't understand the language of the current page, it should be simple to discover if the page is available in alternate languages. Provide the links as part of the page header or the page footer, or both.
- Do not use flags as symbol for a language, this design pattern is discouraged: W3C Internationalization Best Practices: "Do not use flag icons to indicate languages"
Relevante WCAG eisen
- WCAG eis 1.3.1: de heading van de landmark gebruikt de juiste heading level.
- WCAG eis 1.3.6
- de
hreflangmaakt duidelijk dat de link verwijst naar een pagina in een andere taal rel="alternate"maakt duidelijk dat het om dezelfde informatie gaat op een andere paginaaria-currentmaakt duidelijk welke pagina op dit moment wordt weergegeven- maak duidelijk dat je kunt navigeren naar alternatieve versies door het plaatsen van deze links in een
navigationlandmark (<nav>)
- de
- WCAG eis 2.4.4: met alleen de naam van de taal als label ("English") is het doel van de link duidelijk in de context van een navigation landmark
- WCAG eis 2.4.6: alle labels moeten duidelijk zijn:
- het label van de landmark (de heading in de
navofsection). Zie ook: Usingaria-labelto provide labels for objects. - het zichtbare label van de links of buttons
- het langere label van de link of button (in
aria-labeloftitle)
- het label van de landmark (de heading in de
- WCAG eis 2.4.9: gebruik een label als "This page in English" zodat het doel van de link ook duidelijk is zonder context.
- WCAG eis 2.5.3: door een afkorting te gebruiken als link-tekst, wordt het moeilijk om met een gesproken instructie de link te activeren.
- WCAG eis 2.5.5: de link moet groot genoeg zijn om aan te klikken, en kleine links moeten niet te dicht op een andere link staan.
- WCAG eis 3.1.2: voor de bezoeker die de huidige taal niet kan lezen, is het handig om voor de linktekst juist de andere taal te gebruiken. Gebruik het
langattribuut om aan te geven dat deze linktekst in een andere taal is geschreven. - WCAG eis 3.1.4: als de taal wordt weergegeven als afkorting, dan moet de volledige naam in het
titleattribuut beschikbaar zijn. - WCAG eis 3.2.3: de links naar alternatieve talen moeten op alle pagina's op dezelfde plek staan.