Gå til innhold

3.3.2 Ledetekster eller instruksjoner

Krav:

Det vises ledetekster eller instruksjoner når innholdet krever inndata fra brukeren.

Kilde: Direktoratet for forvaltning og IKT (åpnes i nytt vindu)

Hva betyr dette kravet?

Dette kravet retter seg mot bruk av skjema. For de feltene det er påkrevd at brukeren fyller ut før innsendelse, skal det komme klart og tydelig frem hva som skal fylles ut i hvilket felt. 

Kodeeksempel

Riktig bruk av label for å beskrive skjemafelt:

<label for="postnummer">Postnummer</label>
<input id="postnummer" name="postnummer" type="number">

<label>Postnummer:
  <input id="postnummer" name="postnummer" type="number">
</label>

 

Kodeeksempel

Riktig bruk av fieldset for å gruppere skjemafelt:

<fieldset>
  <legend>Vil du motta nyhetsbrev?</legend>
  <input type="radio" name="radio" id="ja" value="ja">
  <label for="ja">Ja</label>
  <input type="radio" name="radio" id="nei" value="nei">
  <label for="nei">Nei</label>
</fieldset>

 

Bruk av placeholder

Placeholder bør ikke erstatte bruk av label. Ikke alle skjermlesere tolker placeholdere som label. Hvis du planlegger å bruke placeholder for å beskrive et skjemafelt, husk å også legge til label. Dette kan så evt. skjules ved hjelp av CSS (ikke bruk display:none da dette får skjermlesere til å ignorere det). Bootstrap gjør dette på en god måte. Klikk her for å se eksempel.

 

Lage usynlige ledetekster/labels

Selv om en i de fleste tilfeller bør bruke labels/ledetekster for ulike typer skjemafelt så finnes det tilfeller hvor ledetekster ikke er nødvendig. Dette kan være fordi skjemafeltet enten er selvforklarende er plassert i en kontekst som forklarer skjemafeltet. Brukere av skjermlesere er imidlertid avhengig av at samtlige skjemafelt blir tydelig merket. I slike tilfeller kan man velge å lage usynlige labels. I CSS kan man for eksempel gjøre dette ved å sette position:absolute, height og width til 0 og overflow:hidden. Slike teknikker sørger for at ledeteksten ikke er synlig for seende samtidig som skjermlesere vil uttale ledeteksten selv om den ikke er synlig på skjermen.

NB! Bruk ikke display:none for å skjule labels da dette medfører at skjermlesere ignorerer og ikke leser dem opp.

Gå til toppen av siden