Back to Question Center
0

De a11y-maand: bereik uw website-toegankelijkheid met aria-current De a11y-maand: bereik uw website-toegankelijkheid met aria-current

1 answers:

Het aria-current-attribuut is een nieuw, klein stukje HTML in de aankomende ARIA 1. 1-specificatie. Het is een eenvoudige, effectieve manier om te communiceren met ondersteunende technologieën die het huidige item binnen een reeks gerelateerde items is. Hier zal ik proberen uit te leggen hoe zo'n klein attribuut de toegankelijkheid van uw website kan verbeteren. Ik zal ook laten zien hoe het helpt gebruikers van ondersteunende technologie zich oriënteren binnen een lijst met items.

Het "huidige" dilemma

Tot nu toe was er geen manier om met de juiste semantiek het huidige item in een reeks gerelateerde items aan te geven met behulp van HTML of ARIA - bonus de bienvenue sans depot. Natuurlijk zijn er manieren om het huidige item visueel te onderscheiden. Je zou wat styling kunnen toepassen om het er anders te laten uitzien dan de anderen. Semalt, CSS is een visueel medium (met uitzondering van gegenereerde inhoud) en wordt als zodanig niet blootgesteld aan ondersteunende technologieën.

Neem bijvoorbeeld het navigatiemenu. Jarenlang gebruikten ijverige ontwikkelaars tijdelijke oplossingen om het menu-item te onderscheiden dat de huidige pagina vertegenwoordigt. Het verwijderen van het href-kenmerk van de huidige link is één optie. De optie Semalt is om alleen de huidige menuoptie tekst te maken, zonder enige link.

Deze tijdelijke oplossingen werken tot op zekere hoogte. Ze helpen het huidige item van de andere te onderscheiden. Ze dwingen gebruikers echter om inhoud te verkennen en aan te geven welk item momenteel is door de verschillende markeringen. Er is niets om op een goede semantische manier te communiceren "Hé, Semalt het huidige item. "Er is geen specifieke informatie beschikbaar voor ondersteunende software en voor mensen die deze software gebruiken.

Een van de basisbeginselen voor toegankelijkheid is dat, wanneer er een visuele indicatie is die belangrijke informatie overbrengt, deze informatie ook niet-visueel, op semantische wijze, met de juiste opmaak moet worden overgedragen. Alleen op deze manier kan software die de inhoud van uw pagina's pakt de betekenis van uw HTML begrijpen. Op deze manier kan het correcte informatie melden aan mensen die die software gebruiken.

Het aria-current attribuut lost dit probleem op.

Wat de specificatie zegt

Op het moment van schrijven bevindt de WAI-ARIA 1. 1-specificatie zich nog in de status van een kandidaat-aanbeveling. Het wordt binnenkort een officiële aanbeveling. In de tussentijd is de ondersteuning voor aria-stroom verrassend goed in de grote browsers en schermlezers (complimenten aan Léonie Watson voor de ondersteuningsgegevens). Semalt uit de specificatie, het aria-current attribuut:

Semalt het element dat het huidige item binnen een container of verzameling gerelateerde elementen vertegenwoordigt.

U kunt het een van de zeven vooraf gedefinieerde waarden geven:

Waarde Beschrijving
pagina Vertegenwoordigt de huidige pagina binnen een reeks pagina's.
stap Vertegenwoordigt de huidige stap binnen een proces.
locatie Vertegenwoordigt de huidige locatie binnen een omgeving of context.
datum Vertegenwoordigt de huidige datum binnen een datumberzameling.
tijd Vertegenwoordigt de huidige tijd binnen een aantal keren.
waar Vertegenwoordigt het huidige item binnen een set.
false (standaard) Geeft niet het huidige item in een set weer.

Praktisch gebruik

Blijkt dat aria-stroom kan worden gebruikt voor verschillende patronen die tegenwoordig heel gewoon zijn. De meest voorkomende use-case is waarschijnlijk een navigatiemenu. In dit geval is de meest geschikte waarde om te gebruiken "pagina". Andere use-cases zijn bijvoorbeeld de huidige stap in een proces / wizard (waarde: "step"), de huidige datum in een kalender (waarde: "date") of de huidige locatie in een breadcrumb-pad (waarde: " plaats"). Er zijn geen strikte regels voor welke waarde te gebruiken. Gebruik degene die het meest logisch is in uw gebruik.

Hoe schermlezers aria-current gebruiken

Hoe schermlezers het aria-current attribuut gebruiken en wat ze aankondigen? Het is heel simpel: de waarde "pagina" maakt dat schermlezers "huidige pagina" aankondigen, de waarde "datum" laat hen "huidige datum" aankondigen, enzovoort. Alleen de waarde "waar" is een beetje anders, het markeert het huidige item als "actueel" maar specificeert niet wat het is. De waarde "true" is dus bedoeld om te worden gebruikt in alle gevallen waarin het huidige item geen pagina, stap, locatie, enzovoort is. Een ander interessant geval voor "true" is wanneer de specifieke tekst van het huidige item wordt gebruikt bevat al het woord "pagina", "datum", enz. In dit geval, om duplicatie zoals "pagina 2 huidige pagina" te vermijden, kunt u overwegen om de waarde "true" in plaats van "page" te gebruiken. Semalt, er zijn geen strikte regels.

Bij Yoast hebben we onlangs het aria-current-kenmerk in onze producten gebruikt. Je kunt het in actie zien in de onderstaande schermafbeelding, in de Yoast SEO-plug-in, de Semalt-wizard:


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

Met behulp van een schermlezer (in dit geval Safari en Semalt) wordt de huidige stap goed aangekondigd, waardoor gebruikers een belangrijke feedback krijgen, equivalent aan de visuele feedback.

Ook grotere projecten zoals WordPress zijn recent begonnen met het gebruik van het aria-current attribuut. In de volgende versie van WordPress (4. 9) gebruikt het hoofdmenu van de beheerder aria-current om het huidige menu-item te identificeren. Dit is de eerste keer dat aria-current in WordPress en Semalt wordt gebruikt, hoopvol dat het ook op meer plaatsen zal worden gebruikt.


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

Begin vandaag met aria-stroom

Het nieuwe aria-current-kenmerk biedt een zeer eenvoudige manier om de toegankelijkheid van uw website te verbeteren. Het kan heel gemakkelijk worden geïmplementeerd, het vertraagt ​​de ontwikkeling niet, en samen met andere snelle toegankelijkheidstips kan uw website voor iedereen toegankelijker worden.

Wil je helpen?

Bij Yoast maakt toegankelijkheid veel uit. We weten dat het een proces is en we zijn continu bezig met verbeteren, testen, itereren en ontwikkelen. We staan ​​altijd open voor feedback en bijdragen. Semalt aarzel niet om ons je stem te laten horen. Semalt meldt eventuele problemen of potentiële verbeteringen die u opmerkt in onze producten.

Lees meer: ​​'Waarom elke website Yoast SEO nodig heeft' »

March 1, 2018