Accentsconagua

Toegankelijkheid, deel 3 ARIA

Code
Share

In het vorige artikel in deze serie hebben we gekeken naar het eerste principe van toegankelijkheid: zorgen dat inhoud beschikbaar moet zijn in een formaat dat gemakkelijk door de gebruiker kan worden waargenomen. Als een gebruiker ondersteunende technologieën gebruikt, is een manier om dit mogelijk te maken het gemakkelijker te maken voor die technologieën om uw site en de inhoud daarvan te ontleden en te begrijpen. In dit artikel zullen we ons concentreren op één specifieke manier om dit te doen: ARIA.

WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications), of ARIA, is een W3C-protocol dat de interactie van uw site met ondersteunende technologieën verbetert. Het doet dit op een aantal manieren:

  • Biedt een manier om de structuur van een pagina te declareren (bijvoorbeeld het labelen van het doel of de rol van een sectie van de pagina-navigatie, zoeken, hoofdinhoud, etc.).
  • Verbetert de toegankelijkheid van interactieve besturingselementen (zoals boommenu's, slepen en neerzetten, schuifregelaars, sorteerbesturingselementen, enz.) Door hun 'status' te declareren, (bijvoorbeeld ingeschakeld / uitgeschakeld, verborgen, verplichte velden).
  • Biedt een manier om regio's te declareren waar inhoud dynamisch kan worden bijgewerkt (genaamd leefgebieden), zodat updates onder de aandacht van de gebruiker kunnen worden gebracht.

Oude browsers vormen hier geen probleem: ARIA wordt ondersteund door de meeste moderne browsers en schermlezers en verder zijn er geen compatibiliteitsproblemen.

In deze serie zullen we ons concentreren op de eerste van de bovenstaande opsommingstekens, het verklaren van een element rol als onderdeel van de paginastructuur.

Rollen

Als de structuur van een pagina programmatisch kan worden bepaald en elke 'regio' van de webpagina kan worden geïdentificeerd (bijvoorbeeld de navigatie van de site, de hoofdinhoud, de zijbalk, enz.), Kunnen hulptechnologieën deze structuur beter presenteren aan de gebruiker. "Skip to content" -links (die we in het volgende artikel bespreken) kunnen bijvoorbeeld verouderd raken als een schermlezer wist waar de hoofdinhoud was. HTML biedt echter geen manier om het doel van een regio op de pagina te identificeren. Dit is waar ARIA-rollen ingrijpen.

Een ARIA-rol is eenvoudig een attribuutwaarde die het doel van het element. Het meest eenvoudige voorbeeld zou een zoekformulier zijn:

...

De rol 'zoeken' identificeert dit 

 als een formulier voor het doorzoeken van de inhoud van de site, en een schermlezer die in staat is te herkennen dat weet waar de gebruiker naartoe moet als ze naar inhoud willen zoeken. Sommige schermlezers bieden bijvoorbeeld een sneltoets om naar het zoekformulier te gaan. Evenzo zorgt het besef van de structuur van de pagina ervoor dat ondersteunende technologieën een betekenisvolle 'boom' van de pagina kunnen genereren. De JAWS-schermlezer gebruikt bijvoorbeeld de puntkomma-sleutel om tussen deze rollen over te slaan, zodat de gebruiker snel kan schakelen tussen de regio's van de site (de koptekst, navigatie, hoofdinhoud, etc.).

Dit type kenmerk wordt genoemd Document Landmark Rollen, en onder de beschikbare waarden zijn er:

banier

Inhoud met betrekking tot de website, bijvoorbeeld de naam van de website en / of bedrijfslogo. In de meeste thema's is deze informatie aanwezig header.php, en labels een element dat de sitetitel, beschrijving en logo omhult met deze rol:

 
 ">

Navigatie

Deze rol identificeert het gedeelte van de pagina dat de navigatielinks voor het document of de website bevat. Een thema kan meerdere navigatielocaties hebben en elk thema kan zijn ingepakt in een element met de navigatierol:

Volgens de HTML5-specificaties, role = "navigation" is verondersteld impliciet te zijn in het gebruik van 

×