Saknade ARIA-etikett-ID:n
Silktide kontrollerar element som hämtar sitt från andra element via ID och rapporterar referenser till ID:n som inte finns på sidan. En trasig referens gör att elementet saknar det namn det var avsett att ha.
ARIA-attributet aria-labelledby namnger ett
element genom att hänvisa till id för elementet som innehåller dess etikett – en
rubrik som namnger en dialogruta eller en bildtext som namnger ett reglage:
<!-- Problem: referensen säger "dialog-label", men rubrikens id är "dialog-labell" -->
<h2 id="dialog-labell">Viktigt meddelande!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Varför detta är viktigt
Det tillgängliga namnet är det som en
läser upp när en besökare
kommer till ett element. När en aria-labelledby-referens inte pekar på något
kan elementet läsas upp helt utan namn – en namnlös dialogruta, en
namnlös knapp – och besökaren måste gissa dess syfte. Dessa fel är
osynliga: sidan ser likadan ut, och även noggranna användartester upptäcker
sällan ett namn som i tysthet misslyckades med att kopplas till elementet. ID:n
byts ut och innehåll struktureras om, så referenser blir med tiden inaktuella.
Så här åtgärdar du det
- Hitta elementet som var tänkt att tillhandahålla namnet och låt värdet för
aria-labelledbyexakt överensstämma med dessid(ID:n är skiftlägeskänsliga):
<!-- Åtgärdat: referensen överensstämmer med rubrikens id -->
<h2 id="dialog-label">Viktigt meddelande!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Om elementet som tillhandahöll etiketten har tagits bort kan du antingen
återställa det eller byta till ett
aria-label-attribut som innehåller namnet som text. - När ett element namnges av flera andra element ska du lista alla ID:n, separerade med mellanslag, och kontrollera vart och ett.
Så testar Silktide detta
- Hitta varje element med ett
aria-labelledby-attribut på varje sida. - Dela upp attributvärdet i individuella ID:n.
- Rapportera varje refererat ID som inte finns någonstans på sidan.