Vad är Aria-attribut i HTML och varför är de viktiga?

Webbdesigners som är nya för HTML kan stöta på en uppsättning okända attribut. Dessa attribut förekommer med ordet ARIA och visas över hela webben, men deras syfte kan vara ett mysterium för nya användare.

ARIA-attribut tjänar ett viktigt syfte i din webbplatss tillgänglighet. De beskriver både innehållet i ett givet element och hur ett element relaterar till en sida eller de andra elementen runt den.

Genom att lägga till dessa viktiga attribut på din webbplats kan du säkerställa att alla besökare får samma upplevelse, oavsett vilken teknik de använder.

Vad är ARIA-attribut?

ARIA är en akronym för Accessible Rich Internet Applications. I modern HTML, särskilt JavaScript-rika applikationer, är det inte alltid direkt uppenbart baserat på syntax vilken roll enskilda element har.

Svårigheten att urskilja roller kan vara ett problem när användare tittar på webbplatsen med hjälp av tillgänglighetsverktyg som skärmläsare. Om du saknar korrekt semantisk HTML, kanske din slutanvändare inte kan navigera på en webbplats när du använder tillgänglighetsverktyg.

Medan det föredragna sättet för dig att lösa det här problemet är att använd de rätta semantiska elementen i HTML5, detta är inte alltid praktiskt eller möjligt. Det är här ARIA-attribut på HTML-element kommer in. Dessa attribut hjälper till att definiera rollen och attributen för ditt element på ett sätt som tillgänglighetsverktygen kan bearbeta.

Varför är ARIA-attribut viktiga?

Kort sagt, ARIA-attribut gör det möjligt för användare med funktionshinder att använda din webbplats. Dessa roller och attribut definierar extra information om olika element på din webbplats som annars kanske inte är lättillgängliga.

Det finns en mängd olika ARIA-attribut som du kan tilldela. Du bör använda dem var som helst där det behövs ytterligare sammanhang för att dokumentet ska vara vettigt på ett icke-visuellt sätt.

Tänk till exempel på en webbplats som har en huvudnavigering som består av en element insvept i en element, snarare än ett element:

<divklass="nav">
<ul>
<li>Hemli>
<li>affärli>
<li>Handla omli>
ul>
div>

Du kan använda ARIA-attribut för att hjälpa användare att navigera. Lägga till attributen roll och aria-etikett till element låter skärmläsare och hjälpmedelstekniker veta var din meny är.

<divklass="nav">
<ulroll="navigering"aria-etikett="Main">
<li>Hemli>
<li>affärli>
<li>Handla omli>
ul>
div>

Även om du i de flesta fall bör använda de rätta elementen, kanske detta inte alltid är möjligt inom begränsningarna för vad du gör. Om din webbplats till exempel kräver användning av en förloppsindikator, men du vill ha en design som standardfältet inte tillåter.

I det här scenariot kan du skapa en anpassad uppsättning element för att visa din förloppsindikator. För en skärmläsare kommer dessa element dock att se ut som en rörig röra; det kommer inte att kunna leverera användbar information till din webbplats besökare.

Genom att ställa in omslagets roll till förloppsindikator, och lägga till aria-valuenow, aria-valuemin, och aria-värdemax attribut till omslaget kan du fortfarande indikera framsteg.

I modern tid är det viktigare än någonsin att bygga tillgängliga webbplatser. Det finns flera React-komponentbibliotek byggda med tillgänglighet i åtanke.

Att ha en tillgänglig webbplats kan inte bara hjälpa dig med din sökrankning för flera stora sökmotorer, det säkerställer att du inte skär bort en potentiell grupp användare från din användarbas.

Genom att lägga till lämpliga ARIA-attribut på din webbplats kan du se till att du presenterar informationen för alla användare. Slutresultatet blir en sajt som välkomnar all publik och presenterar så nära samma upplevelse som möjligt för alla.

Vilka ARIA-attribut ska jag använda?

Det finns många olika attribut som du bör använda på din webbplats. Generellt faller dessa attribut in i två olika kategorier. Det första är widgetattribut som vanligtvis beskriver ett anpassat interaktivt element.

Den andra kategorin du måste vara medveten om är relationsattribut. Dessa är attribut som vidarebefordrar information till hjälpmedel om hur ett visst element relaterar till resten av webbplatsen eller andra element.

När det gäller att överväga vilka ARIA-attribut du bör inkludera är det enkla svaret så många som möjligt. Var som helst där elementet du använder inte beskriver rollen som elementet fyller, bör du använda rollattributet.

Om du har ett fält med en etikett, bör det fältet ha aria-märkt av attribut. Så länge attributen du använder är meningsfulla gör du bara din webbplats mer tillgänglig genom att lägga till dem.

Widgetattribut är den mycket större kategorin. Den innehåller de flesta ARIA-attribut som du behöver lägga till på en standardwebbplats. I det tidigare exemplet med den anpassade förloppsindikatorn är aria-valuenow, aria-valuemin och aria-valuemax alla widgetattribut. De beskriver tillståndet eller möjliga tillstånd för elementet de befinner sig på.

Det finns många olika attribut som du kan använda för att beskriva ett elements tillstånd. En av de vanligaste är aria-etikett. Det här attributet tillämpar en etikett på elementet du placerar det på som endast är synlig för hjälpmedelstekniker.

Ett annat vanligt par av ARIA-attribut som faller inom denna kategori är aria-dold och aria-handikappad. Dessa kan kommunicera det aktuella tillståndet för ett element och om en skärmläsare ska läsa det för användaren. Detta är användbart för en mängd olika enheter med egna skärmläsare.

Relationsattribut

Till skillnad från widgetattribut ger relationsattribut hjälpteknologier indikationer om relationen och användningen av ett element till andra element runt det. Det vanligaste av dessa är rollattributet. Roll specificerar vilket syfte ett element tjänar på en webbplats.

Om du ställer in roll tillskriva navigering, kommer den omedelbart att identifieras som en navigeringsomslag.

Vissa relationsattribut definierar hur ett element förhåller sig till andra element runt det. De aria-märkt av attribut, till exempel, visar vilket element som fungerar som en etikett för detta element. Detta kan vara användbart när du använder layouter som är logiska visuellt men som har etiketter för specifika formulärkontroller efter dem i dokumentflödet.

Även om det finns färre relationsattribut än widgetattribut, har dessa attribut ofta större betydelse. De kan ofta beskriva flödet och kontrollen av ett dokument och ge ytterligare information om hur en användare kan navigera på din webbplats.

Dessa attribut är av särskild betydelse när du utformar formulär och navigeringsobjekt på din webbplats.

Varför det är så viktigt att inkludera ARIA-attribut i din HTML

ARIA-attribut tjänar ett enkelt och nödvändigt syfte på din webbplats. De tjänar till att säkerställa att webbplatsen är tillgänglig för alla användare, oavsett användning av tillgänglighetsprogramvara. För användare med funktionshinder kan dessa attribut göras användbar om du har dessa attribut på din webbplats.

Den föredragna metoden för att arbeta med hjälpmedel är att använda rätt semantiska element. När det inte är möjligt gör dock ARIA-attribut det möjligt att arbeta fritt utan att dina användare går miste om innehåll.