Brukere som bruker visuelle ledetekster skal også kunne bruke kodede ledetekster

2.5.3 Ledetekst i navn (Nivå A)


Formålet med retningslinjen er å sikre at personer som bruker de visuelle ledetekstene også kan bruke de programmeringsmessig bestemte (dvs. kodede) ledetekstene.
For å sørge for at både navn og etiketter er forståelig for hjelpeteknologi, må navnene være identiske.
Når det kommer til navn som kun skjermlesere og andre hjelpemidler bruker, kan disse utvides så lenge etikett og navn er identisk i begynnelsen.


Hva bør jeg gjøre

  • Gjør etiketter synlige, unike og beskrivende når det er mulig. I dette tilfellet er etiketten det tilgjengelige navnet. Hvis du trenger flere detaljer i det tilgjengelige navnet, må du begynne med samme tekst som den visuelle etiketten, og sørge for at hver etikett er unik.

For å forstå dette suksesskriteriet må vi være klar på forskjellen mellom etiketter (visuelle ledetekster) og navn (programmerte ledetekster).

  • Etiketter
    Etiketten identifiserer kontrollen til alle brukere. Det er generelt synlig tekst. Eksempler på etiketter er etikettelementet på en skjemakontroll eller teksten til en lenke. Etiketten brukes ofte som navn som vist i eksempelfeltet i søkefeltet nedenfor.

HTML kode for søkefelt:

<label for="itemSearch">Search: </label>
<input type="text" id="itemSearch">

Etiketten er “Search.”

  • Navn
    Navnet er det hjelpemidler bruker for å identifisere kontrollen til brukeren. Dette betyr at det kan bestemmes programmatisk, og hvorfor det ofte omtales som det "tilgjengelige/universelt utforma navnet". Det tilgjengelige navnet er ikke relatert til navneattributtet på inputelementer.

En kontroll kan ha både et tilgjengelig navn og en etikett. Navnet kan være det samme som etiketten som i søkefelteksemplet over. Eller det kan hende at navnet ikke kan oppdages på siden med mindre du bruker en hjelpeteknologi. Eksempler inkluderer alt-teksten og ARIA-label og ARIA-labelledby.
Bildet under av det røde kaffekruset har alt-teksten, “rød kaffekrus med store svarte polka-prikker.” Alt-teksten er det tilgjengelige navnet som skjermleserne vil bruke, i vårt tilfelle på norsk..

Et annet eksempel på hvordan dette kan løses

  • Gjør etiketten og det tilgjengelige navnet til det samme. Hvis det ikke er mulig, har du den synlige etiketteksten i begynnelsen av det tilgjengelige navnet.

    I dette eksemplet er det tilgjengelige navnet som en skjermleser bruker hører "Buy <item> for <amount>." Seende ser "Buy <item>", og programvaren kan aktivere riktig knapp .