Hvad er Aria-attributter i HTML, og hvorfor er de vigtige?

Webdesignere, der er nye til HTML, kan støde på et sæt ukendte attributter. Med ordet ARIA foran vises disse attributter overalt på nettet, men deres formål kan være et mysterium for nye brugere.

ARIA-attributter tjener et vigtigt formål med dine websteders tilgængelighed. De beskriver både indholdet af et givet element og den måde, et element relaterer til en side eller de andre elementer omkring den.

Tilføjelse af disse altafgørende attributter til dit websted vil hjælpe med at sikre, at alle besøgende får den samme oplevelse, uanset hvilken teknologi de bruger.

Hvad er ARIA-attributter?

ARIA er et akronym for Accessible Rich Internet Applications. I moderne HTML, især JavaScript-rige applikationer, er det ikke altid umiddelbart indlysende baseret på syntaks, hvilken rolle individuelle elementer tjener.

Vanskeligheden med at skelne roller kan være et problem, når brugere ser webstedet ved hjælp af tilgængelighedsværktøjer såsom skærmlæsere. Hvis du mangler den korrekte semantiske HTML, er din slutbruger muligvis ikke i stand til at navigere på et websted, når du bruger tilgængelighedsværktøjer.

Mens den foretrukne måde for dig at løse dette problem på er at bruge de korrekte semantiske elementer i HTML5, dette er ikke altid praktisk eller muligt. Det er her ARIA-attributter på HTML-elementer træder ind. Disse attributter hjælper med at definere rollen og attributterne for dit element på en måde, som tilgængelighedsværktøjer er i stand til at behandle.

Hvorfor er ARIA-attributter vigtige?

Kort sagt gør ARIA-attributter det muligt for brugere med handicap at bruge din hjemmeside. Disse roller og attributter definerer ekstra information om forskellige elementer på dit websted, som ellers måske ikke er let tilgængelige.

Der er en lang række ARIA-attributter, som du kan tildele. Du bør bruge dem overalt, hvor der er behov for yderligere kontekst for at give dokumentet mening på en ikke-visuel måde.

Overvej for eksempel et websted, der har en hovednavigation bestående af en element pakket ind i en element i stedet for et element:

<divklasse="nav">
<ul>
<li>Hjemli>
<li>Butikli>
<li>Omli>
ul>
div>

Du kan bruge ARIA-attributter til at hjælpe brugerne med at navigere. Tilføjelse af rolle- og aria-label-attributter til element giver skærmlæser og hjælpeteknologier mulighed for at vide, hvor din menu er.

<divklasse="nav">
<ulrolle="navigation"aria-mærke="Main">
<li>Hjemli>
<li>Butikli>
<li>Omli>
ul>
div>

Selvom du i de fleste tilfælde bør bruge de rigtige elementer, er dette muligvis ikke altid muligt inden for begrænsningerne af det, du laver. Hvis dit websted for eksempel kræver brug af en statuslinje, men du ønsker et design, som standardlinjen ikke tillader.

I dette scenarie kan du oprette et brugerdefineret sæt elementer for at vise din statuslinje. For en skærmlæser vil disse elementer dog ligne et rodet rod; det vil ikke være i stand til at levere nyttige oplysninger til dit websteds besøgende.

Ved at indstille indpakningens rolle til statuslinje, og tilføjer aria-valuenow, aria-valuemin, og aria-værdimax attributter til indpakningen, kan du stadig angive fremskridt.

I den moderne æra er det vigtigere end nogensinde at bygge tilgængelige websteder. Der er flere React-komponentbiblioteker bygget med tilgængelighed i tankerne.

Ikke alene kan have en tilgængelig hjemmeside hjælpe med din søgerangering for flere store søgemaskiner, det sikrer, at du ikke afskærer en potentiel gruppe af brugere fra din brugerbase.

Tilføjelse af de relevante ARIA-attributter til dit websted vil hjælpe med at sikre, at du præsenterer oplysningerne for alle brugere. Slutresultatet bliver et websted, der byder alle publikum velkommen og præsenterer så tæt på den samme oplevelse som muligt for alle.

Hvilke ARIA-attributter skal jeg bruge?

Der er masser af forskellige attributter, som du bør gøre brug af på dit websted. Generelt falder disse attributter i to forskellige kategorier. Den første er widget-attributter, som normalt beskriver et brugerdefineret interaktivt element.

Den anden kategori, du skal være opmærksom på, er relationsattributter. Disse er attributter, der videresender information til hjælpeteknologier om, hvordan et bestemt element relaterer sig til resten af ​​webstedet eller andre elementer.

Når det kommer til at overveje, hvilke ARIA-attributter du skal inkludere, er det enkle svar så mange som muligt. Hvor det element, du bruger, ikke beskriver den rolle, som elementet opfylder, skal du bruge rolleattributten.

Hvis du har et felt med en etiket, skal det felt have aria-mærket af attribut. Så længe de attributter, du bruger, giver mening, gør du kun dit websted mere tilgængeligt ved at tilføje dem.

Widget-attributter er den meget større kategori. Den indeholder de fleste ARIA-attributter, som du skal tilføje til et standardwebsted. I det tidligere eksempel på den tilpassede statuslinje er aria-valuenow, aria-valuemin og aria-valuemax alle widget-attributter. De beskriver tilstanden eller mulige tilstande for det element, de er på.

Der er masser af forskellige attributter, som du kan bruge til at beskrive et elements tilstand. En af de mest almindelige er aria-mærke. Denne attribut anvender en etiket til det element, du placerer det på, som kun er synligt for hjælpeteknologier.

Et andet almindeligt par ARIA-attributter, der falder ind under denne kategori, er aria-skjult og aria-handicappede. Disse kan kommunikere den aktuelle tilstand af et element, og om en skærmlæser skal læse det til brugeren. Dette er nyttigt for en række forskellige enheder med deres egne skærmlæsere.

Relationsattributter

I modsætning til widget-attributter giver relationsattributter hjælpeteknologier indikationer om relationen og brugen af ​​et element til andre elementer omkring det. Den mest almindelige af disse er rolleegenskaben. Rolle angiver, hvilket formål et element tjener på et websted.

Hvis du indstiller rolle tilskrive navigation, vil den straks blive identificeret som en navigationsindpakning.

Nogle relationsattributter definerer, hvordan et element relaterer sig til andre elementer omkring det. Det aria-mærket af attribut viser for eksempel, hvilket element der fungerer som en etiket for dette element. Dette kan være nyttigt, når du bruger layouts, der giver mening visuelt, men som har etiketter til specifikke formularkontrolelementer efter dem i dokumentflowet.

Selvom der er færre relationsattributter end widgetattributter, har disse attributter ofte større betydning. De kan ofte beskrive flowet og kontrollen af ​​et dokument og give yderligere detaljer om, hvordan en bruger kan navigere på dit websted.

Disse attributter er af særlig betydning, når du designer formularer og navigationselementer på dit websted.

Hvorfor det er så vigtigt at inkludere ARIA-attributter i din HTML

ARIA-attributter tjener et enkelt og nødvendigt formål på din hjemmeside. De tjener til at sikre, at siden er tilgængelig for alle brugere, uanset brugen af ​​tilgængelighedssoftware. For brugere med handicap kan det gøre webstedet brugbart at have disse attributter på dit websted.

Den foretrukne metode til at arbejde med hjælpemidler er at bruge de rigtige semantiske elementer. Når det dog ikke er muligt, gør ARIA-attributter det muligt at arbejde frit, uden at dine brugere går glip af indhold.