Navngiving med title-attributtet

Silktide kontrollerer knappene og lenkene på sidene dine for kontroller som er avhengige av title-attributtet for å forklare hva de gjør. Nettlesere viser bare title som et forsinket verktøytips når musepekeren holdes over elementet, så de fleste ser det aldri.

<!-- Problem: verktøytipset er den eneste etiketten -->
<button title="Close"><svg>…</svg></button>

<!-- Løsning: gi kontrollen et ordentlig tilgjengelig navn -->
<button aria-label="Close"><svg>…</svg></button>

Hvorfor dette er viktig

Et title-verktøytips vises bare for musebrukere, og først etter en forsinkelse. Tastaturbrukere, brukere på berøringsskjermer og mobilenheter og de fleste brukere av får det aldri opp, så en kontroll som bare er merket med title, blir en mystisk knapp for en stor del av de besøkende dine. Skjermlesere håndterer også title på ulike måter – noen leser det opp, andre ignorerer det – noe som gjør det upålitelig selv for brukerne det tilsynelatende er ment å hjelpe.

Når en kontroll har både en title og et annet , er problemet manglende samsvar: En musebruker ser kort én beskrivelse, mens en bruker av hjelpemiddelteknologi hører en annen, og de to beskrivelsene kan bli stadig mer forskjellige etter hvert som siden vedlikeholdes.

Slik løser du det

Gi kontrollen en ordentlig etikett: synlig tekst der det er mulig, eller en aria-label (eller aria-labelledby som peker på eksisterende tekst) for kontroller som bare har ikoner.
Hvis kontrollen har både en title og en aria-label som ikke samsvarer, velger du den mest nyttige formuleringen og bruker den overalt. Den ryddigste løsningen er vanligvis å slette title og la aria-label inneholde beskrivelsen.
Behold title bare for genuint supplerende informasjon. Det må aldri være den eneste måten å forstå hva en kontroll gjør på.

Slik tester Silktide dette

Finn de synlige knappene, lenkene og kontrollene for visning på hver side, inkludert elementer med role="button" eller role="link".
For hver kontroll med et title-attributt som inneholder mer enn uvesentlig informasjon, kontrollerer vi om den har annen merking: synlig tekst, bildets , aria-label eller aria-labelledby.
Rapporterer kontroller der title-attributtet er den eneste etiketten.
Når en kontroll har både en title og en eksplisitt aria-label eller aria-labelledby, sammenligner vi dem og rapporterer dem når de sier vesentlig forskjellige ting. Hvis den ene bare utvider den andre (en title på "Search" med navnet "Search now"), rapporteres det ikke.

Skjemafelt som <input> og <select> testes ikke av denne kontrollen. Merkingen av dem dekkes av etiketter for skjemakontroller.

Feilsøking

title-attributtet er obligatorisk på iframes

Det stemmer – title på en <iframe> er standardmåten å navngi den på, og denne kontrollen tester ikke iframes. Den tester bare interaktive kontroller som knapper og lenker.

Verktøytipset mitt gir nyttig tilleggsinformasjon

Det er en legitim bruk, så lenge kontrollen også har en ordentlig etikett. Denne kontrollen rapporterer bare kontroller der title er den eneste etiketten, eller der den motsier det tilgjengelige navnet.