En label, flere felt-demo

En label for flere felt kan være ganske forvirrende med skjermlesere. Nedenfor har jeg satt opp de fire vanlige måtene å kode dette på for å gi hvert felt en meningsfull beskrivelse for skjermlesere.

Kombiner feltene til ett felt

Kombiner felt med samme label til ett felt. Dette er selvsagt ikke alltid hverken ønskelig eller mulig. Eksempel

Telefonnummer:

Skjult label

I dette eksemplet brukes skjult tekst for å legge label på de fire feltene. Skjermlesere vil lese "Telefonnummer: første to sifre" på det første feltet. Deretter leses "Siffer 3 og 4", "Siffer 5 og 6" og "Siste to sifre" på det siste feltet. Denne metodenfungerer også med eldre kombinasjoner av nettleser/skjermleser, og informasjon repeteres ikke for hvert felt.

Kode


<label for="eks02">Telefonnummer: <span class="sr-only">første to sifre</span></label>
<input type="text" size="2" maxlength="2" id="eks02">
<label for="eks03" class="sr-only">Siffer 3 og 4</label>
<input type="text" size="2" maxlength="2" id="eks03">
<label for="eks04" class="sr-only">Siffer 5 og 6</label>
<input type="text" size="2" maxlength="2" id="eks04">
<label for="eks05" class="sr-only">Siste to sifre</label>
<input type="text" size="2" maxlength="2" id="eks05">

Telefonnummer: første to sifre Siffer 3 og 4 Siffer 5 og 6 Siste to sifre

aria-label

Jaws og NVDA vil kun lese aria-label for det første feltet nedenfor. VoiceOver leser begge, dvs. både label og aria-label (dårlig implementert av VO synes jeg). Grunnen til å ha en label på det første feltet er for å få større klikkflate.

Kode


<label for="eks06">Telefonnummer:</label>
<input type="text" size="2" maxlength="2" id="eks06" aria-label="Telefonnummer første to sifre">
<input type="text" size="2" maxlength="2" id="eks07" aria-label="Siffer 3 og 4">
<input type="text" size="2" maxlength="2" id="eks08" aria-label="Siffer 5 og 6">
<input type="text" size="2" maxlength="2" id="eks09" aria-label="Siste to sifre">

Telefonnummer:

fieldset

Fieldset og aria-label (evt. skjulte labler) er bakoverkompatibelt og fungerer fint med skjermlesere. Ulempen kan være at styling er litt mer krevende. Legend leses bare på det første feltet, men leses også på det siste feltet hvis du kommer dit med Skift+Tab, altså navigerer motsatt vei. Dette er derfor kanskje den aller beste metoden for skjermleser.

Kode


<fieldset>
  <legend>Telefonnummer:</legend>
  <input type="text" size="2" maxlength="2" id="eks10" aria-label="Første to sifre">
  <input type="text" size="2" maxlength="2" id="eks11" aria-label="Siffer 3 og 4">
  <input type="text" size="2" maxlength="2" id="eks12" aria-label="Siffer 5 og 6">
  <input type="text" size="2" maxlength="2" id="eks13" aria-label="Siste to sifre">
</fieldset>

Telefonnummer: