Wanneer u aria-label, aria-labelledby, aria-describedby of gewoon zichtbare tekst gebruikt, met 20 voor-en-na-snippets, veelgemaakte fouten en een checker voor de toegankelijke naam.
Gebruik aria-label alleen als een element geen zichtbare tekst heeft die het benoemt, zoals een knop met alleen een icoon: <button aria-label="Close dialog">. Als zichtbare tekst het al benoemt, vertrouw daarop of verwijs er met aria-labelledby naar. aria-describedby voegt extra hulp toe die na de naam wordt voorgelezen. Native HTML-labels hebben altijd voorrang.
Welk middel u kiest om iets een naam te geven
Elke knop, link, elk veld en elk landmark heeft een toegankelijke naam nodig: de korte zin die hulpsoftware uitspreekt wanneer de focus daar terechtkomt. Deze pagina laat zien hoe die naam wordt bepaald, twintig foute patronen naast hun herstelde versies, en een checker die een geplakte snippet leest en meldt welke naam die zou krijgen.
aria-label bevat de naam als string in het attribuut. aria-labelledby verwijst naar een of meer element-id's en bouwt de naam op uit hun tekst, zodat de naam altijd overeenkomt met wat ziende gebruikers zien. Als beide aanwezig zijn, wint aria-labelledby.
Ja. Bij de meeste bedieningselementen overschrijft de aria-label-waarde de tekstinhoud, dus een knop met Kopen erop die aria-label="Add to basket" draagt, wordt aangekondigd als Add to basket. Die mismatch verwart gebruikers van spraakbesturing en schendt WCAG 2.5.3 Label in Name.
Gebruik het voor ondersteunende informatie die niet de naam is: een wachtwoordregel, een formaathint of een foutmelding. Schermlezers lezen de beschrijving meestal na de naam en de rol voor, vaak na een korte pauze, en sommige gebruikers zetten beschrijvingen uit.
Alleen als de div een rol heeft die een naam toestaat, zoals role="region" of role="dialog". Op een generieke div of span verbiedt ARIA een naam en negeren de meeste schermlezers het attribuut.
Nee. Afbeeldingen halen hun naam uit het alt-attribuut. Gebruik alt="" voor decoratie zodat de afbeelding wordt overgeslagen. aria-label op een img werkt, maar voegt niets toe wat alt niet kan.
Loop deze lijst van boven naar beneden af en stop bij de eerste optie die past. Zichtbare tekst staat bovenaan omdat die met één string ziende gebruikers, schermlezergebruikers en gebruikers van spraakbesturing bedient.
De vier manieren om een element een naam of beschrijving te geven
Elke snippet toont het foute patroon, de reparatie en ongeveer wat een schermlezer na de reparatie zegt. Aankondigingen verschillen per product en instellingen.
Zonder naam wordt de knop doorgaans alleen als knop aangekondigd. Verberg de tekening zodat die niet als afbeelding zonder label wordt voorgelezen. Na de fix wordt hij doorgaans aangekondigd als: Sluiten, knop.
Een lege link wordt vaak als zijn URL voorgelezen, op sommige opstellingen letter voor letter. Na de fix wordt hij doorgaans aangekondigd als: Onze winkel op Instagram, link.
Echte tekst in een visueel verborgen span overleeft vertaaltools, die attribuutwaarden meestal overslaan. Na de fix wordt hij doorgaans aangekondigd als: Winkelwagen, 3 artikelen, link.
Met twee naamloze nav-elementen toont de landmarklijst twee keer navigatie en kan niemand ze uit elkaar houden. Na de fix wordt het doorgaans aangekondigd als: Hoofdmenu, navigatie.
Placeholdertekst is een zwakke reservenaam en verdwijnt zodra iemand typt. Na de fix wordt het doorgaans aangekondigd als: Producten zoeken, zoekveld.
Een echt label-element maakt het bijschrift ook klikbaar, wat het klikdoel vergroot. Na de fix wordt het doorgaans aangekondigd als: E-mail, invoerveld.
Beschrijvingen worden samengevoegd in de volgorde waarin de id's staan. Na de fix wordt het doorgaans aangekondigd als: Wachtwoord, beveiligd invoerveld, ongeldige invoer, Minimaal 12 tekens, Te kort....
De legend benoemt de groep, zodat elke optie op zichzelf begrijpelijk is. Na de fix wordt het doorgaans aangekondigd als: Leversnelheid, groep, Standaard, keuzerondje, 1 van 2.
Door naar de zichtbare kop te verwijzen blijven de uitgesproken en getoonde titel identiek. Open het met showModal() voor een echt modaal venster. Na de fix wordt het doorgaans aangekondigd als: Project verwijderen?, dialoogvenster, Hiermee worden alle 14 pagina's verwijderd..
Houd de naam vast en laat de status veranderen. Verander het label niet ook nog in Niet vet. Na de fix wordt het doorgaans aangekondigd als: Vet, schakelknop, ingedrukt.
Tegelijk het label en een ingedrukte status veranderen klinkt als een dubbele ontkenning. Na de fix wordt het doorgaans aangekondigd als: Dempen, schakelknop, niet ingedrukt.
Een script moet aria-expanded en het hidden-attribuut samen omzetten. Na de fix wordt het doorgaans aangekondigd als: Producten, knop, samengevouwen.
Een klikbare div kan geen focus krijgen en wordt helemaal niet als bedieningselement aangekondigd. Na de fix wordt het doorgaans aangekondigd als: Menu, knop, samengevouwen.
Schrijf op wat de afbeelding de lezer vertelt. Een lege alt markeert decoratie zodat die wordt overgeslagen. Na de fix wordt het doorgaans aangekondigd als: De verkoop steeg in mei van 40 naar 65 bestellingen per week, afbeelding.
role=img maakt van de SVG één object in plaats van een boom met vormen. Na de fix wordt het doorgaans aangekondigd als: Northgate Bakery, afbeelding.
Een zichtbaar bijschrift benoemt de tabel voor iedereen. Gebruik aria-labelledby alleen als de titel buiten de tabel staat. Na de fix wordt het doorgaans aangekondigd als: Openingstijden, tabel, 2 kolommen, 8 rijen.
De region moet bestaan voordat de tekst verandert, anders missen veel schermlezers de update. Na de fix wordt het doorgaans aangekondigd als: Opgeslagen (uitgesproken zonder de focus te verplaatsen).
aria-roledescription verandert de uitgesproken rol. Gebruik het spaarzaam en nooit op generieke elementen. Na de fix wordt het doorgaans aangekondigd als: Klantfoto's, carrousel.
Unieke linktekst helpt iedereen die een lijst met links doorloopt. Door met de zichtbare woorden te beginnen blijft Label in Name intact. Na de fix wordt het doorgaans aangekondigd als: Lees meer over de openingstijden in de winter, link.
Wie tegen spraakbesturing klik Verzenden zegt, moet deze knop raken, dus het zichtbare woord hoort in de naam. Na de fix wordt het doorgaans aangekondigd als: Verzenden, knop.
Fouten uit audits en hoe u ze oplost
Controleer namen voordat u live gaat
Plak een snippet. De checker ontleedt die in uw browser zonder scripts uit te voeren, zoekt het eerste interactieve of benoemde element en bepaalt een naam met een ingekorte versie van de officiële volgorde. Hij slaat een aantal stappen uit de specificatie over, dus zie het als een snelle hint en bevestig het in de dev tools of met een schermlezer.
Icoonknop
Herstelde icoonknop
Veld met label
Niet-overeenkomend label
Dialoogvenster met labelledby
HTML-snippet
Geen knop, link, veld, landmark, afbeelding of tabel gevonden in de snippet.
Element
Berekende naam
(leeg)
Naam afkomstig van
Waarschuwingen
Geen gevonden door deze vereenvoudigde controle.
label-element
tekstinhoud
svg-title
title (zwakke terugvaloptie)
placeholder (zwakke terugvaloptie)
aria-labelledby verwijst naar ontbrekende id "{id}".
aria-label op een div of span zonder rol wordt door de meeste schermlezers genegeerd.
Afbeelding heeft geen alt-attribuut.
De placeholder is de enige naam. Voeg een label toe.
Geen toegankelijke naam gevonden.
Zichtbare tekst "{visible}" staat niet aan het begin van de naam (WCAG 2.5.3 Label in Name).
De naam eindigt op een rolwoord, dus de rol wordt twee keer uitgesproken.
Het element zelf is aria-hidden.
Gratis beginnen · Geen creditcard nodig