Label

Het label component kent een normale en een een smalle variant.

Gedrag en toegankelijkheid

De kleur van een label mag geen zelfstandige betekenis hebben. Gelet op WCAG succescriterium 1.4.1 gebruik van kleur mag de kleur van een label nooit een zelfstandige betekenis hebben. Kleurverschillen mogen wel worden gebruikt als extra visuele hint, maar als kleurverschillen een betekenis hebben dan moet deze betekenis daarnaast afleidbaar zijn uit de zichtbare tekst of een andere visuele hint in combinatie met een sr-only tekst.

Voorbeeld: Op een pagina met de uitslag van een quiz wordt gemeld dat de gebruiker 4 antwoorden goed en 6 antwoorden fout heeft gekozen. We adviseren om een op zichzelf duidelijke tekst te kiezen voor het label en de groene / rode achtergrondkleur alleen decoratief te gebruiken.

Afbrekingen

Gelet op WCAG succescriterium 1.4.4 zijn afbrekingen met ellipsis acceptabel als de volledige content beschikbaar is op focus of na activatie van de gebruiker. Dit gepaard met een indicatie dat deze informatie toegankelijk is voor de gebruiker, naast het feit dat het afgebroken is.

Variant met verwijder kruisje

Het tekstalternatief voor een verwijder knopje in een label is: verwijder [tekst label]. De tekst van het label wordt in het verwijder knopje herhaald om te zorgen dat voor screenreader gebruikers altijd duidelijk is welk verwijder knopje bij welk label hoort. Dit stelt hen in staat sneller te werken en voorkomt het per ongeluk verwijderen van het verkeerde item.