Etikettering med title-attributten

Silktide tjekker knapperne og linkene på dine sider for kontrolelementer, der afhænger på attributten title for at forklare, hvad de gør. Browsere viser kun title som et forsinket værktøjstip, når en musemarkør holdes over elementet, så de fleste mennesker ser det aldrig.

<!-- Problem: værktøjstippet er den eneste etiket -->
<button title="Luk"><svg>…</svg></button>

<!-- Løsning: giv kontrolelementet et rigtigt tilgængeligt navn -->
<button aria-label="Luk"><svg>…</svg></button>

Hvorfor det er vigtigt

Et title-værktøjstip vises kun for musebrugere og først efter en forsinkelse. Tastaturbrugere, touch- og mobilbrugere samt de fleste -brugere modtager det aldrig, så et kontrolelement, der kun er etiketteret med sin title, er en mystisk knap for en stor del af dine besøgende. Skærmlæsere håndterer også title inkonsekvent – nogle læser det op, andre ignorerer det – hvilket gør det upålideligt, selv for de brugere, det nominelt er beregnet til.

Når et kontrolelement både har en title og et andet , er problemet konsistens: En musebruger ser kortvarigt én beskrivelse, mens en bruger af hjælpeteknologi hører en anden, og de to afviger mere og mere, efterhånden som siden vedligeholdes.

Sådan løser du det

Giv kontrolelementet en korrekt etiket: synlig tekst, hvor det er muligt, eller en -attribut aria-label (eller aria-labelledby, der peger på eksisterende tekst) til kontrolelementer, der kun består af ikoner.
Hvis kontrolelementet både har en title og en aria-label, der ikke stemmer overens, skal du vælge den mest nyttige formulering og bruge den overalt. Den mest enkle løsning er som regel at slette title og lade aria-label indeholde beskrivelsen.
Behold kun title for reelt supplerende detaljer. Det må aldrig være den eneste måde at finde ud af, hvad et kontrolelement gør.

Sådan tester Silktide dette

Find de synlige knapper, links og kontrolelementer til visning/skjul på hver side, herunder elementer med role="button" eller role="link".
For hvert kontrolelement med en ikke-triviel title-attribut skal du tjekke, om det har anden etikettering: synlig tekst, til billeder, aria-label eller aria-labelledby.
Rapportér kontrolelementer, hvis eneste etiket er attributten title.
Når et kontrolelement både har en title og en eksplicit aria-label eller aria-labelledby, skal du sammenligne de to og rapportere dem, når de siger væsentligt forskellige ting. Hvis den ene blot udvider den anden (en title på "Søg" med et navn på "Søg nu"), rapporteres det ikke.

Formularfelter som <input> og <select> testes ikke af dette tjek; deres etikettering dækkes af etiketter til formularfelter.

Fejlfinding

Title-attributten er påkrævet på iframes

Det er korrekt – title på en <iframe> er standardmåden at navngive den på, og dette tjek tester ikke iframes. Det tester kun interaktive kontrolelementer som knapper og links.

Mit værktøjstip tilføjer nyttige ekstra oplysninger

Det er en legitim anvendelse, så længe kontrolelementet også har en rigtig etiket. Dette tjek rapporterer kun kontrolelementer, hvor title er den eneste etiket, eller hvor attributten modsiger det tilgængelige navn.