Taalkiezer

Een gebruik van het uitklapmenu: de talen van een site, elk genoemd in de eigen taal met eigen lang en hreflang, de huidige gemarkeerd met aria-current.

Demo

Eigenschappen bewerken

Wijzig een waarde en pas die toe; de demo wordt met de nieuwe waarden getoond. Een geweigerde waarde wordt bij het veld gemeld en de demo houdt de beginwaarde.

Eigenschappen

Eigenschap	Type	Standaard	Toegestane waarden	Omschrijving
`languages`	`array`	verplicht		[code => naam van de taal in die taal], de $languages van de site.
`links`	`array`	verplicht		[code => URL van dezelfde pagina in die taal, of haar startpagina].
`current`	`string`	verplicht	`de`, `en`, `es`, `fr`, `it`, `nl`	De code van de taal van de pagina: op het knopje getoond en in de lijst gemarkeerd met aria-current.
`strings`	`array`	verplicht		De interfaceteksten in de taal van de pagina (language_current met %s).

Gebeurtenissen

Dit component verstuurt geen gebeurtenissen.

Toetsenbord

Toetsen	Doet
`Enter, Space, Escape, Arrow Down, Arrow Up, Home, End, Tab`	Die van het uitklapmenu: openen en sluiten, sluiten en focus terug, langs de talen gaan, verlaten en sluiten.

Toegankelijkheid

Elke taallink draagt lang en hreflang gelijk aan zijn code; de test controleert het voor elke taal van languages/.
De wereldbol is een CSS-masker op het knopje, nooit een inline SVG, zodat een schermlezer hem nooit tegenkomt.
Het id van de lijst ligt vast (language-picker-list), dus één pagina heeft één taalkiezer.

Waarom zo

Een taal wordt in die taal genoemd, met een bijpassende lang-tag, zodat een schermlezer "Deutsch" Duits en "Nederlands" Nederlands uitspreekt (filosofie 37, COMMON-287). Zichtbaar is het knopje een door CSS getekende wereldbol, de huidige taal en een pijltje; "Taal: " is er alleen voor schermlezers, als naastgelegen span, zodat het knopje als één regel wordt voorgelezen. Geen landmark eromheen: de eigen tekst van de knop is zijn naam.

Verwijzingen

philosophy 37
COMMON-287
WAI-ARIA APG disclosure navigation

Gebruikt

Uitklapmenu

Gebruikt door

Nog geen gebruik vastgelegd.

README

language-picker

A use of the disclosure: the languages of a 'subdomain' site. Each link is named in its own language with its own lang and hreflang; the current one has aria-current="true"; the chip shows a globe (globe.svg, a CSS mask), the current language and a chevron; "Taal: " is there for screen readers only, as a sibling span, in the page's language.

dvlop_language_picker(array $props): string; props: languages (code => name), links (code => URL of the same page or the home page), current, strings.
Script and keyboard: the disclosure's.
Language tags: the test renders the picker in every language of languages/ and asserts the tags.
Tokens: the disclosure's (--disclosure-*, css/tokens.css); the globe takes the chip's text colour. A site colours the picker in its css/site.css through those tokens (components/disclosure/README.md); no token of the picker's own, so the picker and the share menu are coloured alike.
On every site with more than one language, the 'legacy-path' road included (links /en/<page>, /en).

Change log

2026-10-14: colours from the --disclosure-* tokens; shown on 'legacy-path' sites too, in place of the EN NL switcher.
2026-10-14: new, from languagePicker() in header.php; the globe moved here from css/globe.svg.