Hopp til innhold

DescriptionList

En definisjonsliste brukes gjerne til metadata eller begrepsdefinisjoner, for eksempel detaljer om et produkt eller en avtale kunden har.

Dekning
Kasko
Egenandel
2 000 kr for glass
6 000 kr for øvrige skader
Sjåfør under 23 år
Nei

Selv om en definisjonsliste visuelt sett kan deles inn i to kolonner, og kan sies å ha rader, så er det ikke en tabell. Om du trenger kolonneoverskrifter eller ønsker deg flere kolonner, se Table.

Tilgjengelighet

En definisjonsliste har en betydning som skjermlesere kan bruke til navigasjon og opplesning. Dessverre er støtten litt variabel, men de mest brukte skjermleserne VoiceOver, JAWS, og NVDA har for det meste god støtte. De som ikke har like god støtte vil lese opp innholdet som et vanlig avsnitt.

Siden støtten er noe variabel bør man kunne forstå forholdet mellom begrep og definisjon. Kanskje spesielt viktig at man forstår at neste begrep ikke er en del av definisjonen av det forrige begrepet.

Skjermlesere med full støtte vil annonsere en definisjonsliste som enten liste (list), definisjonsliste (definition list) eller beskrivelsesliste (description list). De vil også annonsere antall listeelementer, og gjerne annonsere om det som ble lest opp er et begrep (term) eller en beskrivelse (definition/description).

Fordi skjermlesere med støtte annonserer hva som er begrep og hva som er beskrivelse bruker vi ikke skilletegn som kolon etter begrep.

Forsikring
Innboforsikring
Adresse
Testgata 1

Riktig

La skjermleseren annonsere rollen uten ekstra støy

Forsikring:
Innboforsikring
Adresse:
Testgata 1

Feil

Skilletegn blir lest opp i tillegg til elementets rolle

React API

Her finner du en oversikt over props på komponentene i pakken.