Skip to content

Language selector ARIA implementation #436

@ppvg

Description

@ppvg

From independent accessibility report, SC 3.3.2:

Op pagina components/header-example-language-select-list.html staat een element waarmee een taal geselecteerd kan worden. Deze heeft visueel geen label. Omdat het op zichzelf voldoende duidelijk is wat er gebeurt als er een taal wordt geselecteerd, is dit ook niet verplicht. Het kan echter wel om de functie nog iets duidelijker te maken. In de code is visueel verborgen tekst aanwezig, maar deze is niet gekoppeld aan het veld, doordat het aria-describedby attribuut op een div-element staat.

From independent accessibility report, SC 4.1.2:

Op pagina components/header-example-language-select-list.html staat een uitklapbaar element waarmee een andere taal geselecteerd kan worden. Dit is nu een knop (button-element). Het aria-expanded-attribuut, waarmee wordt aangegeven wat de waarde (in- of uitgeklapt) is, staat echter op een div-element dat eromheen staat. Dit attribuut moet op het interactieve element staan, het element dat daadwerkelijk wordt in- en uitgeklapt. Deze informatie wordt hierdoor nu niet goed overgebracht.

The language selector places aria-describedby and aria-expanded on the wrapper div. It should instead be on the interactive element, the button.

Additionally, we should look into whether the role="listbox" is correct. It might make sense to implement the ARIA APG's Navigation Menu Button Example here instead.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Core setFrom the base set of componentsHeaderComponent 'Header'NavigationComponent 'Navigation'a11yAccessibility fixes and improvements

    Type

    No type

    Projects

    Status

    No status

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions