Title-attribut för etiketter

Silktide kontrollerar knapparna och länkarna på dina sidor för att hitta kontroller som är beroende av attributet title för att förklara vad de gör. Webbläsare visar title endast som en fördröjd verktygstipsruta när muspekaren hålls över elementet, så de flesta ser det aldrig.

<!-- Problem: verktygstipsrutan är den enda etiketten -->
<button title="Close"><svg>…</svg></button>

<!-- Åtgärd: ge kontrollen ett riktigt tillgängligt namn -->
<button aria-label="Close"><svg>…</svg></button>

Varför detta är viktigt

En title-verktygstipsruta visas endast för musanvändare, och först efter en fördröjning. Tangentbordsanvändare, användare på pekskärmar och mobila enheter samt de flesta användare av får aldrig se den. En kontroll som endast är etiketterad med sitt title blir därför en mystisk knapp för en stor andel av dina besökare. Skärmläsare hanterar dessutom title på olika sätt – vissa läser upp det, andra ignorerar det – vilket gör det opålitligt även för de användare som det egentligen är avsett för.

När en kontroll har både ett title och ett annat är problemet konsekvensen: en musanvändare ser kortvarigt en beskrivning medan en användare av hjälpmedel hör en annan, och skillnaden ökar ytterligare när sidan underhålls.

Så åtgärdar du problemet

Ge kontrollen en riktig etikett: synlig text där det är möjligt, eller en aria-label (eller aria-labelledby som pekar på befintlig text) för kontroller som endast består av ikoner.
Om kontrollen har både ett title och en aria-label som inte överensstämmer, välj den mest användbara formuleringen och använd den överallt. Den enklaste lösningen är vanligtvis att ta bort title och låta aria-label innehålla beskrivningen.
Behåll title endast för genuint kompletterande information. Det får aldrig vara det enda sättet att förstå vad en kontroll gör.

Så testar Silktide detta

Hitta de synliga knapparna, länkarna och expanderingskontrollerna på varje sida, inklusive element med role="button" eller role="link".
För varje kontroll med ett title-attribut som innehåller mer än trivial information kontrollerar vi om den har någon annan etikettering: synlig text, bildens , aria-label eller aria-labelledby.
Rapportera kontroller vars enda etikett är title-attributet.
När en kontroll har både ett title och ett uttryckligt aria-label eller aria-labelledby jämför vi dem och rapporterar dem när de säger väsentligt olika saker. Om det ena bara utökar det andra (ett title med värdet "Search" och ett namn med värdet "Search now") rapporteras det inte.

Formulärfält som <input> och <select> testas inte av denna kontroll; deras etikettering täcks av etiketter för formulärkontroller.

Felsökning

Title-attributet krävs på iframes

Korrekt – title på ett <iframe> är standardmetoden för att namnge det, och denna kontroll testar inte iframes. Den testar endast interaktiva kontroller som knappar och länkar.

Min verktygstipsruta innehåller användbar extra information

Det är en legitim användning, så länge kontrollen också har en riktig etikett. Denna kontroll rapporterar endast kontroller där title är den enda etiketten eller där det motsäger det tillgängliga namnet.