Alle komponenter har navn og rolle bestemt i koden.

Sektor:

    Hva er kravet?

    4.1.2 Navn, rolle, verdi.

    Hva bør jeg teste?

    Her er en oppsummering av våre testregler og hva som er forventet resultat av testingen.

    Hvordan oppnå samsvar med kravet

    Skjemaelementet er koblet til en ledetekst i koden. Dette kan gjøres på flere måter. Ledeteksten identifiserer skjemaelementet.

    Dersom skjemaelementet hører til en gruppe, er det i tillegg koblet til en ledetekst som gjelder for gruppa. Ledeteksten identifiserer gruppa.

    Hvordan oppnå samsvar med kravet

    Knapper er koblet til en ledetekst i koden. Dette kan gjøres på flere måter. Ledeteksten identifiserer funksjonen til knappen.

    Knapper som ikke er kodet med standardelementene i (X)HTML, skal ha informasjon om rolle.

    Hvordan oppnå samsvar med kravet

    Der det er brukt iframe-elementet i koden, har iframe en ledetekst som identifiserer innholdet.

    Løsningsforslag for 4.1.2 Navn, rolle, verdi

    Skjema

    Kodeeksempler

    Ledetekst i skjema for å legge inn fornavn, og velge å abonnere på nyhetsbrev:

    <label for="Fornavn">Fornavn:</label>
    <input type="text" name="Fornavn" id="Fornavn"><br>

    <input type="checkbox" name="abonner" id="abonner">
    <label for="abonner">Abonner på nyhetsbrev</label>

    Ledetekst for søkefelt:

    <input type="text" name="søk" aria-label="Søk">
    <button type="submit">Søk</button>

    Ledetekst for søkefelt med aria-labelledby:

    <input type="text" name="søk" aria-labelledby="sokknapp">
    <button id="sokknapp" type="submit">Søk</button>

    Ledetekst for søkefelt med title-element:

    <input title="Søk" type="text" name="søk">

    Ledetekst for skjemaelement som hører til en gruppe:
    (Eksempelet viser ledetekst for en gruppe med legend «Filformat». Skjemaet har radioknapper med label «Tekstfil» og «CSV-fil», som er koblet til gruppen ved hjelp av fieldset. Ved hjelp av ledeteksten til gruppen, er det mulig å identifisere skjemaelementet.)

    <fieldset>
    <legend>Filformat</legend>
    <div>
    <input type="radio" name="format" id="tekst" value="txt" checked>
    <label for="tekst">Tekstfil</label>
    </div>

    <div>
    <input type="radio" name="format" id="csv" value="csv">
    <label for="csv">CSV-fil</label>
    </div>
    […]
    </fieldset>

    Knapper

    Kodeeksempler

    Ledetekst for knapp med aria-label:

    <button aria-label=”Send inn”><img src=”img.png”></button>
    <button type="button">Send inn</button>

    Knapper som ikke er kodet med standardelementene i (X)HTML, skal ha informasjon om rolle:

    <button>Send inn</button>
    <button>Avbryt</button>
    <input type="submit" value="Send inn">
    <input type="button" value="Avbryt">

    Iframe

    Kodeeksempel

    Ledetekst for iframe med title-element:

    <iframe src="https://www.w3schools.com" title="W3Schools Gratis nettveiledning"></iframe>