Brukere som bruker visuelle ledetekster skal også kunne bruke kodede ledetekster.
Hva er kravet?
Hva bør jeg teste?
Brukergrensesnittkomponenter som for eksempel skjemaelement og knapper, som har ledetekster som inneholder tekst eller bilder av tekst.
Hva er forventet resultat?
Brukergrensesnittkomponenter har en ledetekst i koden som enten
- er identisk med den synlige ledeteksten eller
- starter med den synlige ledeteksten eller
- inneholder den synlige ledeteksten på en eller annen måte, og de ordene som er i den synlige ledeteksten er sammenhengende og kommer i samme rekkefølge
Løsningsforslag for 2.5.3 Ledetekst i navn
Teksten til den synlige etiketten er inkludert som en del av det tilgjengelige navnet
Når brukere av taleinndata samhandler med en nettside, sier de vanligvis en kommando etterfulgt av referansen til en synlig etikett (som tekst i en knapp, lenketeksten eller inndatafeltene for tekstmerking). For eksempel kan de si "Klikk søk" for å aktivere en søkeknapp.
Når programvare for talegjenkjenning behandler taleinndata og ser etter treff, bruker den det "tilgjengelige navnet", som kan være forskjellig fra den synlige etiketten. For eksempel kan en knapp etter et søkeinndatafelt inneholde teksten "Gå til", men bruker et usynlig aria-label-attributt med verdien "Søk". Siden aria-label er prioritert over teksten som er inkludert i knappen, vil det tilgjengelige navnet på denne knappen være "Søk", ikke "Gå til".
Eksempel 1: Lenketekst samsvarer med begynnelsen av det tilgjengelige navnet
En lenke inneholder synlig tekst og skjult lenketekst. Begge utgjør sammen lenkens tilgjengelige navn. Den synlige teksten kommer først. Tanken er å gjøre koblingen mer beskrivende for brukere av hjelpemidler.
<p>Gå til <a href="personvernerklæring.html">personvernerklæring<span class="hidden_accessibly"> for uutilsynet</span></a><p>
Eksempel 2: Den synlige knappeteksten samsvarer med begynnelsen av det tilgjengelige navnet
Den synlige teksten i et button-element samsvarer med begynnelsen av det tilgjengelige navnet, som også inkluderer skjult tekst. Tanken med den skjulte teksten er å gjøre knappen mer beskrivende for brukere av hjelpemidler.
<button>Send <span class="accessibly-hidden"> e-post</span></button>
Eksempel 3: Lenketekst inkludert i aria-label
Der to strenger ikke kan kombineres grammatisk eller sømløst ved å bruke aria-labelledby, kan aria-label brukes til å lage et nytt navn som inkluderer den synlige etiketten.
... slutten av en nyhet. <a href="daarlig.html" aria-label="Les mer om dårlige lenkenavn">Les mer</a>
Merk
- Du bør unngå å bruke tekst i et bilde, men hvis du bruker tekst i et bilde som en knapp, sørg for at alt-teksten samsvarer med bildeteksten.
- Aria-label og aria-labelledby overstyrer annen informasjon om elementet når hjelpemiddelet lager et tilgjengelig navn. Dette betyr at å legge til en aria-label ikke legger til ytterligere informasjon til navnet, den erstatter ganske enkelt den andre informasjonen. Det er viktig å sørge for at aria-label eller aria-labelledby inneholder det brukeren ser, fordi disse attributtene blir hele det tilgjengelige navnet.
Det tilgjengelige navnet samsvarer med den synlige etiketten
Eksempel 1: Lenketekst gir både koblingens etikett og dens tilgjengelige navn
Ved bruk av vanlig HTML gir teksten mellom ankerelementets tagger både lenkens synlige tekst og det tilgjengelige navnet "personvernerklæring".
<p>Gå til <a href="url-til-nettsiden.html">personvernerklæring</a></p>
Eksempel 2: Tekst i label-element gir navn for input via for-attributt
Teksten mellom label-taggene fungerer også som avkrysningsboksens tilgjengelige navn "Varsle meg om forsinkelser" ved å bruke for-attributtet som refererer id til input.
<input type="checkbox" id="varsling" name="varsel" value="forsinkelse"><label for="varsling">Varsle meg om forsinkelser</label>
Eksempel 3: Knappeteksten gir det tilgjengelige navnet
Teksten inne i et button-element blir både dets synlige etikett og dets tilgjengelige navn.
<button>Send</button>
Eksempel 4: Enkel radioknappgruppe
Radioknapper vises vanligvis i en gruppe, der hver knapp er merket og gruppen med knapper er innledet med informasjon som forklarer eller kategoriserer gruppen.
<fieldset><legend>Oppfyller alt innhold kravet?</legend><br /><input type="radio" id="ja" name="oppfyllerkravet" value="ja"><label for="ja">Ja</label><input type="radio" id="nei" name="oppfyllerkravet" value="nei"><label for="nei">Nei</label></fieldset>
Eksempel på feil
Ledeteksten i koden er ikke identisk, eller starter ikke, med den synlige ledeteksten.
Det er også et brudd dersom den kodede ledeteksten inneholder de samme ordene som den synlige ledeteksten, men der ordene ikke kommer samlet, eller er i en annen rekkefølge.
Kommentar
Ledeteksten i koden kan gjerne inneholde mer informasjon enn den synlige ledeteksten. Det er anbefalt at ledeteksten i koden starter med innholdet i den synlige ledeteksten.