Wat zijn Aria-attributen in HTML en waarom zijn ze belangrijk?

Webontwerpers die nieuw zijn in HTML kunnen een reeks onbekende attributen tegenkomen. Deze attributen, voorafgegaan door het woord ARIA, verschijnen overal op internet, maar hun doel kan een mysterie zijn voor nieuwe gebruikers.

ARIA-attributen hebben een belangrijk doel in de toegankelijkheid van uw websites. Ze beschrijven zowel de inhoud van een bepaald element als de manier waarop een element zich verhoudt tot een pagina of de andere elementen eromheen.

Door deze uiterst belangrijke kenmerken aan uw site toe te voegen, zorgt u ervoor dat alle bezoekers dezelfde ervaring krijgen, ongeacht de technologie die ze gebruiken.

Wat zijn ARIA-kenmerken?

ARIA is een acroniem voor Accessable Rich Internet Applications. In moderne HTML, met name JavaScript-rijke applicaties, is het op basis van syntaxis niet altijd meteen duidelijk welke rol individuele elementen dienen.

De moeilijkheid om rollen te onderscheiden kan een probleem zijn wanneer gebruikers de site bekijken met behulp van toegankelijkheidstools zoals schermlezers. Bij gebrek aan de juiste semantische HTML kan uw eindgebruiker mogelijk niet door een site navigeren wanneer hij toegankelijkheidstools gebruikt.

Hoewel de beste manier om dit probleem op te lossen is om gebruik de juiste semantische elementen in HTML5, is dit niet altijd praktisch of mogelijk. Dit is waar ARIA-attributen op HTML-elementen van pas komen. Deze attributen helpen de rol en attributen van uw element te definiëren op een manier die toegankelijkheidstools kunnen verwerken.

Waarom zijn ARIA-kenmerken belangrijk?

Kortom, ARIA-attributen maken het voor gebruikers met een handicap mogelijk om uw website te gebruiken. Deze rollen en attributen definiëren extra informatie over verschillende elementen op uw site die anders niet direct beschikbaar zou zijn.

Er is een grote verscheidenheid aan ARIA-attributen die u kunt toewijzen. U moet ze overal gebruiken waar extra context nodig is om het document op een niet-visuele manier begrijpelijk te maken.

Neem bijvoorbeeld een site met een hoofdnavigatie bestaande uit een element verpakt in een element, in plaats van a element:

<divklas="navigatie">
<ul>
<li>Thuisli>
<li>Winkelli>
<li>Overli>
ul>
div>

U kunt ARIA-attributen gebruiken om gebruikers te helpen navigeren. De attributen role en aria-label toevoegen aan het element laat een schermlezer en ondersteunende technologieën weten waar uw menu is.

<divklas="navigatie">
<ulrol="navigatie"aria-label="Voornaamst">
<li>Thuisli>
<li>Winkelli>
<li>Overli>
ul>
div>

Hoewel u in de meeste gevallen de juiste elementen moet gebruiken, is dit misschien niet altijd mogelijk binnen de beperkingen van wat u doet. Als uw site bijvoorbeeld het gebruik van een voortgangsbalk vereist, maar u een ontwerp wilt dat de standaardbalk niet toestaat.

In dit scenario kunt u een aangepaste set elementen maken om uw voortgangsbalk weer te geven. Voor een schermlezer zien deze elementen er echter uit als een warboel; het zal geen nuttige informatie kunnen leveren aan de bezoekers van uw site.

Door de rol van de wrapper in te stellen op voortgangsbalk, en toevoegen aria-waardenu, aria-waardemin, En aria-waardemax attributen toe aan de wrapper, kun je toch voortgang aangeven.

In de moderne tijd is het bouwen van toegankelijke websites belangrijker dan ooit. Er zijn verschillende React-componentbibliotheken die zijn gebouwd met het oog op toegankelijkheid.

Het hebben van een toegankelijke website kan niet alleen helpen bij uw positie in de zoekresultaten voor verschillende grote zoekmachines, het zorgt er ook voor dat u geen potentiële groep gebruikers uit uw gebruikersbestand afsnijdt.

Door de juiste ARIA-kenmerken aan uw site toe te voegen, zorgt u ervoor dat u de informatie aan alle gebruikers presenteert. Het eindresultaat zal een site zijn die alle doelgroepen verwelkomt en voor iedereen zo dicht mogelijk bij dezelfde ervaring presenteert.

Welke ARIA-kenmerken moet ik gebruiken?

Er zijn tal van verschillende attributen die u op uw site zou moeten gebruiken. Over het algemeen vallen deze attributen in twee verschillende categorieën. De eerste zijn widgetattributen die gewoonlijk een aangepast interactief element beschrijven.

De andere categorie waarvan u op de hoogte moet zijn, zijn relatiekenmerken. Dit zijn attributen die informatie doorgeven aan hulptechnologieën over hoe een bepaald element zich verhoudt tot de rest van de site of andere elementen.

Als het erom gaat te overwegen welke ARIA-attributen u zou moeten opnemen, is het simpele antwoord zo veel mogelijk. Overal waar het element dat u gebruikt niet de rol beschrijft die het element vervult, moet u het rolattribuut gebruiken.

Als u een veld met een label heeft, moet dat veld de aria-labeledby attribuut. Zolang de kenmerken die u gebruikt logisch zijn, maakt u uw site alleen toegankelijker door ze toe te voegen.

Widgetattributen is de veel grotere categorie. Het bevat de meeste ARIA-attributen die u aan een standaardsite moet toevoegen. In het eerdere voorbeeld van de aangepaste voortgangsbalk zijn aria-valuenow, aria-valuemin en aria-valuemax allemaal widgetattributen. Ze beschrijven de toestand of mogelijke toestanden van het element waarop ze zich bevinden.

Er zijn tal van verschillende attributen die u kunt gebruiken om de toestand van een element te beschrijven. Een van de meest voorkomende is aria-label. Dit attribuut past een label toe op het element waarop je het plaatst, dat alleen zichtbaar is voor ondersteunende technologieën.

Een ander veelvoorkomend paar ARIA-attributen die in deze categorie vallen, zijn aria-verborgen En aria-gehandicapt. Deze kunnen de huidige status van een element communiceren en of een schermlezer het aan de gebruiker moet voorlezen. Dit is handig voor verschillende apparaten met hun eigen schermlezers.

Relatie Attributen

In tegenstelling tot widgetattributen geven relatieattributen hulptechnologieën indicaties over de relatie en het gebruik van een element met andere elementen eromheen. De meest voorkomende hiervan is het rolattribuut. Rol specificeert welk doel een element binnen een site dient.

Als u de rol toeschrijven aan navigatie, wordt het onmiddellijk geïdentificeerd als een navigatie-wrapper.

Sommige relatieattributen definiëren hoe een element zich verhoudt tot andere elementen eromheen. De aria-labeledby attribuut laat bijvoorbeeld zien welk element fungeert als label voor dit element. Dit kan handig zijn bij het gebruik van lay-outs die visueel logisch zijn, maar labels hebben voor specifieke formulierbesturingselementen erachter in de documentstroom.

Hoewel er minder relatieattributen zijn dan widgetattributen, zijn deze attributen vaak belangrijker. Ze kunnen vaak de stroom en controle van een document beschrijven en aanvullende details geven over de manier waarop een gebruiker op uw site kan navigeren.

Deze attributen zijn van bijzonder belang wanneer u formulieren en navigatie-items op uw site ontwerpt.

Waarom het zo belangrijk is om ARIA-kenmerken in uw HTML op te nemen

ARIA-attributen dienen een eenvoudig en noodzakelijk doel op uw website. Ze dienen om ervoor te zorgen dat de site toegankelijk is voor alle gebruikers, ongeacht het gebruik van toegankelijkheidssoftware. Voor gebruikers met een handicap kan het hebben van deze kenmerken op uw site de site bruikbaar maken.

De voorkeursmethode voor het werken met ondersteunende technologie is het gebruik van de juiste semantische elementen. Wanneer dit echter niet mogelijk is, maken ARIA-attributen het mogelijk om vrij te werken zonder dat uw gebruikers inhoud mislopen.