Mijn fout met de toegankelijkheid van tooltips herstellen

Wat ik deed

Ik maakte deze fout bij het maken van een tooltip. Dit was onderdeel van een video over popover="hint", waarin ook wordt uitgelegd hoe je de tooltip zichtbaar maakt voor visuele gebruikers.

Ik heb geprobeerd het goed te doen. Ik heb gesproken met vrienden die meer weten over toegankelijkheid dan ik, en zij wezen me op demo's van Scott O'Hara. Aangezien Scott weet waar hij het over heeft, dacht ik dat ik simpelweg de patronen uit zijn demo kon kopiëren. De demo's van Scott stammen uit de tijd van vóór de 'hint popovers', dus hier is een gemoderniseerde versie van een van zijn voorbeelden:

<button aria-describedby="edit-tooltip">Edit</button>
<div id="edit-tooltip" popover="hint">Modify account settings.</div>

De knop is verbonden met de tooltip via aria-describedby, waardoor schermlezers de tooltip meestal voorlezen wanneer de knop gefocust is. Een van de mooie eigenschappen van aria-describedby is dat het werkt, zelfs als het element waarnaar wordt verwezen verborgen is, wat in dit geval geldt.

Ik paste de code van Scott aan voor mijn toolbar-demo:

<button aria-label="Bold" aria-describedby="bold-tooltip">
    <svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>

Dit is een vergelijkbaar patroon, al heb ik aria-label op de knop gezet omdat deze een SVG-icoon bevat in plaats van tekst. Net als Scott voegde ik aria-describedby toe aan de knop om de verbinding met de tooltip te leggen.

Ik testte dit in VoiceOver, en het zei: "Bold. Bold. Command B. Button". Ik dacht: dat is niet helemaal juist; het hoeft niet twee keer "bold" te zeggen. Dat gebeurde omdat mijn tooltip, in tegenstelling tot het voorbeeld van Scott (waar de tooltip alleen aanvullende inhoud bevatte), ook het label bevat. "Bold" wordt twee keer uitgesproken omdat het er ook echt twee keer staat.

Dus ik verwijderde de aria-label:

<button aria-describedby="bold-tooltip">
    <svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>

Nu zei VoiceOver: "Clickable image. Bold. Command B. Button". Ik dacht dat dit wel goed genoeg was, publiceerde mijn video en ging naar de kroeg.

Waar het misging

Ik kreeg een bericht van Léonie Watson en Gez Lemon van het toegankelijkheidsbureau TetraLogical, die me heel beleefd vertelden dat ik een domme fout had gemaakt.

Het patroon van Scott was correct, maar ik ging de mist in toen ik de aria-label verwijderde. De knop heeft nu namelijk geen toegankelijke naam (accessible name). aria-describedby biedt aanvullende informatie; het is geen vervanging voor de toegankelijke naam.

Sterker nog, JAWS op Windows probeert toegankelijke tekst te verzamelen van nabijgelegen elementen en kondigt de 'bold'-knop uiteindelijk aan als zowel 'bold' als 'italic', omdat het tooltip-element voor italic een sibling in de DOM was.

Er was eigenlijk een aanwijzing toen VoiceOver "clickable image" zei; dit was de manier van VoiceOver om aan te geven dat er geen toegankelijke naam was om uit te spreken. Op dat moment realiseerde ik me dat simpelweg niet.

De oplossing

Léonie en Gez vertelden me hoe ik het kon oplossen: ik stapte over van aria-describedby naar aria-labelledby.

<button aria-labelledby="bold-tooltip">
    <svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">Bold (⌘B)</div>

aria-labelledby werkt op dezelfde manier als aria-describedby, maar het levert de toegankelijke naam in plaats van een aanvullende beschrijving. Nu haalt de knop zijn toegankelijke naam uit de tooltip en zegt VoiceOver: "Bold. Command B. Button." — perfect!

Indien gewenst zou ik dit kunnen opsplitsen, zodat de toegankelijke naam alleen "Bold" is en de aanvullende beschrijving "Command B":

<button aria-labelledby="bold-label" aria-describedby="bold-description">
    <svg>(bold icon)</svg>
</button>
<div id="bold-tooltip" popover="hint">
    <span id="bold-label">Bold</span>
    <span id="bold-description">(⌘B)</span>
</div>

Ik denk dat dit in dit specifieke geval overbodig is, maar het kan zinvol zijn als je een tooltip hebt met een langere beschrijving.

Kortom: zorg er altijd voor dat interactieve elementen een toegankelijke naam hebben. En test indien mogelijk met meerdere schermlezers. Testen in slechts één schermlezer is als testen in slechts één browser; het geeft niet altijd het volledige beeld.

Opmerking: de gecorrigeerde demo werkt momenteel nog niet optimaal in Safari, aangezien deze versie van de browser popover="hint" nog niet ondersteunt.