Stikkord: 1.3.1, 3.3.2, 4.1.2, aria-required, NVDA, required, skjema, skjermleser

Merk obligatoriske felt tydelig, også så dette kan bestemmes «programmeringsmessig».

Vis Skjermlesere og skjemamodus

Felt skal tilknyttes en label, og det bør også indikeres at felt er obligatoriske. Aktuelle suksesskriterier er: SK 1.3.1, SK 3.3.2 og SK 4.1.2.

Stjerne

Ofte brukes en stjerne (*) for å markere obligatoriske felt. Selv om stjerna har blitt en defacto-standard bør slike felt også merkes på en måte som kan brukes programmeringsmessig (for eksempel slik at en skjermleser kan gi tydelig beskjed om at et felt må fylles ut).

Stjerna kan legges i label. Det har jeg ikke gjort nedenfor. Grunnen er at stjerne kan ødelegge litt for syntetisk tale, men dette er mest et spørsmål om smak og behag – og eventuelt bakoverkompatibilitet. Stjernen må inn i label hvis feltet ikke merkes med HTML5 og/eller WAI-ARIA.

HTML5

I HTML5 kan felt merkes med attributtet required:

<input id="id_n" name="navn" type="text" required />

WAI-ARIA

WAI-ARIA kan også brukes for å merke obligatoriske felt. Hovedregelen er at du skal benytte markup-språkets funksjonalitet dersom det er tilgjengelig. Det kan imidlertid være hensiktsmessig å bruke WAI-ARIA på grunn av bakover-kompatibilitet.:

<input id="id_pnr" name="pnummer" type="text" aria-required="true"/>

Noen nettlesere, for eksempel Internet Explorer sjekker om obligatoriske felt er tomme. Hvis feltene er tomme settes fokus til det første feltet. Denne funksjonaliteten fungerer ikke dersom bare aria-required er brukt. Ønsker du en slik kontroll bør du altså bruke HTML5, eveltuelt i kombinasjon med WAI-ARIA.

Eksempelskjema

Bruk gjerne skjemaet nedenfor til å teste hvordan obligatoriske felt leses opp:

• Navn: merket med required (HTML5)
• Personnummer: merket med aria-required="true" (WAI-ARIA)
• Epost: merket med både required og aria-required="true"
• Vis HTML-koden for skjemaet

  
<form action="/innsendt-skjema" method="get">
<p><label for="id_n">Navn</label>*
<input id="id_n" name="navn" type="text" required />
</p>
<p><label for="id_pnr">Personnummer (11 siffer)</label>*
<input id="id_pnr" name="pnummer" type="text" aria-required="true"/>
</p>
<p><label for="id_e">Epost</label>*
<input id="id_e" name="epost" required="" type="text" aria-required="true" required/>
</p>
<input type="submit" value="OK" />
</form>


• Vis opplesing av obligatoriske felt med skjermleseren NVDA