Suzy Naschansky van het HTMHell adventskalender:
All About Dragons
I like dragons. Blah blah blah blah blah.
Zie dat aria-labelledby attribuut? Het koppelt twee ID's van de opmaak, één voor de kop (#article1-heading) en een voor de link (#article1-read-more). Wat daar gebeurt, is dat een schermlezer het bestaande semantische label tussen de link-tags zal vervangen en de inhoud van beide elementen zal gebruiken en ze samen zal aankondigen als een enkele tekstreeks:
Read more All About DragonsIk ben altijd schaapachtig als ik me realiseer dat er iets is waarvan ik denk dat ik het zou moeten weten, maar het niet weet. Dit is absoluut een van die gevallen en ik ben heel dankbaar dat Suzy het deelde.
Ik bevond me onlangs in een situatie waarin ik zou kunnen hebben had dit moeten doen. Ik probeer altijd een heleboel 'Lees meer'-links op dezelfde pagina te vermijden, maar het is moeilijk om verschillende smaken van hetzelfde te bedenken als je werkt met zoiets als een lus van 15 berichten (ook al zijn er middelen om te helpen). En als we om esthetische redenen labels kort moeten houden - ontwerpvereisten en dergelijke - is dat nog uitdagender. De aria-labelledby attribuut geeft me precies wat ik wil: consistente visuele labels en meer contextuele aankondigingen voor ondersteunende technologie.
En dit is alleen een ding als de tekst die u wilt gebruiken voor het toegankelijke label al op de pagina staat. Anders zou je mee willen gaan aria-label en met het voorbehoud dat het puur voor interactieve elementen is die dingen niet toegankelijk kunnen labelen met semantische HTML.
Als je in een CMS zoals WordPress werkt (wat ik ben), moet je misschien wat extra werk doen. Zoals wanneer ik een knopblok op de pagina neerzet, dit zijn de opties waarmee ik moet werken:
Er zitten een paar leuke opties in, maar niets te maken met toegankelijke labels. Als je je afvraagt wat er begraven ligt in dat geavanceerde paneel:
In plaats daarvan moet u de knop in HTML-modus bewerken:
Maar voordat u dat doet, moet u een ID toevoegen aan de kop die u wilt gebruiken. Het kopblok heeft dezelfde geavanceerde paneelinstelling voor het toevoegen van een anker, dat een ID op het element zal injecteren:
Vervolgens kunt u het Knoppenblok in HTML-modus bewerken en het accessible-labels ID en een ID voor de knop zelf. Dit is een voorbeeld van de bewerkte opmaak:
Super goed! Maar WordPress is daar gewoon niet cool mee:
U kunt proberen het probleem op te lossen:
Le zucht. Het Button-blok moet worden geconverteerd naar een aangepast HTML-blok. Een beetje verslaat het hele visuele bewerkingsgebeuren waar WordPress zo goed in is. Ik heb supersnel gezocht naar een plug-in die ARIA-labelopties aan bepaalde blokken zou kunnen toevoegen, maar kwam tekort. Het lijkt een rijpe kans om er een te maken of dien PR's in voor de blokken die deze opties zouden kunnen gebruiken.
