Labeling met het title-attribuut

Silktide controleert de knoppen en links op je pagina's op bedieningselementen die afhankelijk zijn van het title-attribuut om uit te leggen wat ze doen. Browsers tonen title alleen als een vertraagde tooltip wanneer de muisaanwijzer boven het element wordt gehouden, waardoor de meeste mensen deze nooit zien.

<!-- Probleem: de tooltip is het enige label -->
<button title="Sluiten"><svg>…</svg></button>

<!-- Oplossing: geef het bedieningselement een echte toegankelijke naam -->
<button aria-label="Sluiten"><svg>…</svg></button>

Waarom dit belangrijk is

Een title-tooltip verschijnt alleen voor muisgebruikers, en pas na een vertraging. Toetsenbordgebruikers, gebruikers van touchscreens en mobiele apparaten en de meeste gebruikers van krijgen deze nooit te zien. Een bedieningselement dat alleen met zijn title is gelabeld, is daarom een mysterieknop voor een groot deel van je bezoekers. Schermlezers gaan ook wisselend om met title: sommige lezen het voor en andere negeren het. Daardoor is het zelfs voor de gebruikers voor wie het bedoeld is onbetrouwbaar.

Wanneer een bedieningselement zowel een title als een andere heeft, ontstaat er een consistentieprobleem: een muisgebruiker ziet kort de ene beschrijving, terwijl een gebruiker van ondersteunende technologie een andere hoort. Naarmate de pagina wordt onderhouden, kunnen die twee steeds verder uit elkaar gaan lopen.

Hoe je dit oplost

Geef het bedieningselement een goed label: waar mogelijk zichtbare tekst, of een aria-label (of aria-labelledby dat verwijst naar bestaande tekst) voor bedieningselementen die alleen uit een pictogram bestaan.
Als het bedieningselement zowel een title als een aria-label heeft die van elkaar verschillen, kies dan de bruikbaarste formulering en gebruik die overal. Meestal is de eenvoudigste oplossing om title te verwijderen en de beschrijving door aria-label te laten geven.
Gebruik title alleen voor echt aanvullende informatie. Het mag nooit de enige manier zijn om te weten wat een bedieningselement doet.

Hoe Silktide dit controleert

Zoek op elke pagina naar de zichtbare knoppen, links en bedieningselementen voor het tonen en verbergen van informatie, waaronder elementen met role="button" of role="link".
Controleer voor elk bedieningselement met een betekenisvol title-attribuut of het nog andere labeling heeft: zichtbare tekst, alternatieve tekst van een afbeelding (), aria-label of aria-labelledby.
Rapporteer bedieningselementen waarvan het title-attribuut het enige label is.
Als een bedieningselement zowel een title als een expliciete aria-label of aria-labelledby heeft, vergelijk dan beide en rapporteer ze wanneer ze inhoudelijk sterk van elkaar verschillen. Als het ene het andere alleen uitbreidt (een title met "Zoeken" en een naam met "Nu zoeken"), wordt dit niet gerapporteerd.

Formuliervelden zoals <input> en <select> worden niet door deze controle getest; hun labeling valt onder labels voor formuliervelden.

Problemen oplossen

Het title-attribuut is verplicht voor iframes

Dat klopt: title op een <iframe> is de standaardmanier om deze een naam te geven, en deze controle test geen iframes. De controle test alleen interactieve bedieningselementen zoals knoppen en links.

Dat is een legitiem gebruik, zolang het bedieningselement ook een echt label heeft. Deze controle rapporteert alleen bedieningselementen waarbij title het enige label is, of waarbij het in tegenspraak is met de toegankelijke naam.