En titt på ARIA Web Standards & HTML Apps Accessibility
En verkligt öppen och inkluderande web behöver teknologier som tillåter funktionshindrade användare att förlita sig på hjälpteknik för att njuta av dynamiskt webbinnehåll och moderna webbapps. W3C: s tillgänglighetswebstandarder syftar till att fylla på webben med tillgängliga Rich Internet Applications (ARIA) som användare med funktionshinder effektivt kan använda.
ARIA är en av de många tillgänglighetsstandarder och riktlinjer som publiceras av Web Accessibility Intitiative (WAI). Det ger en extra markering som enkelt kan sättas in i HTML-dokument. WAI-ARIA är en plattformsövergripande lösning som riktar sig till Open Web Platform, så tänka inte bara på webbplatser, utan även om spel, digital underhållning, vård, mobil och andra typer av appar.
I det här inlägget tar vi en titt på hur du kan lägga till tillgänglighet till dina HTML-dokument med hjälp av WAI-ARIA-standarder.
ARIA-ramverket
Syntaxen av HTML tillåter inte alltid att utvecklarna beskriver elementet korrekt, identifierar sina roller och anger relationerna mellan dem. Även om det sällan är ett problem för besökare som är fullt ägda av sina sinnen, kan det hindra assistentteknikanvändare från att förstå vad som händer på skärmen och utforska deras alternativ.
Det här är den punkt där ARIA kommer till vår hjälp, eftersom det är möjligt att definiera syftet med olika element med hjälp av landmärke roller, och beskriva deras natur med aria-prefixade attribut. Aria-prefixade attribut har två typer: egenskaper som beskriver funktioner som är mindre benägna att förändras under hela livscykeln, och stater som ger information om saker som ofta kan förändras på grund av användarens interaktion.
Landmärke Roller
Landmärke roller är de mest kända formerna av ARIAs rollmodell (andra är de abstrakta rollerna, Widget Rolls och Documents Structure Rolls). Landmärke roller gör det möjligt för utvecklare att identifiera stora uppfattningsbara regioner På webbsidan som hjälpmedelsanvändare kanske vill få tillgång till.
Det finns 8 typer av ARIA-landmärke roller, och de måste läggas till som attribut för de relaterade HTML-taggarna.
role =”baner”
Bannerrollen är avsedd att användas främst för innehåll som är relaterat till hela webbplatsen, inte bara till enskilda sidor. Den läggs vanligtvis till som ett attribut till webbplatsens huvudrubrik för logotypen och annan viktig webbplatsinformation. Det är viktigt att du bara kan använda bannerrollen en gång i några HTML-dokument eller appar.
role =”huvud”
Den viktigaste landmärkesrollen är relaterad till huvudinnehållet i dokumentet. Den kan inte användas mer än en gång på någon HTML-sida. Det brukar följa Navigationsrollen är avsedd att användas för att indikera ett område som innehåller navigationselement som länkar och listor på en webbplats. Den kompletterande landmärkerollen beskriver ytterligare innehåll som är relaterat till webbplatsens huvudsakliga innehåll. Det måste placeras på samma nivå i DOM-hierarkin som Contentinfo-rollen informerar användaragenter om närvaron av en region där olika typer av metadata, t.ex. upphovsrättsinformation, juridiska och sekretessutlåtanden kan hittas. Det används vanligtvis för sidfoten till en webbplats. Formmarkeringsrollen anger ett formulär som väntar på användarinmatning. För sökformulär ska du använda Sökrollen är ganska självförklarande, den är avsedd att hjälpa hjälpteknik identifiera sökfunktionaliteten hos en webbplats. Du kan använda programmets landmärkesroll för en region som du vill deklarera som en webbapp, snarare än ett webbdokument. Det rekommenderas inte att inkludera det på traditionella webbplatser, eftersom det tycks vara till hjälpteknik för att växla från normalt surfningsläge till applikationslägesläge. Du bör bara använda denna milstolpe roll med stor omsorg. Medan roller kan du definiera betydelsen av HTML-taggar, ger stater och egenskaper användaren extra information om hur man kan interagera med dem. Båda staterna och egenskaperna är markerade med aria-prefixade attribut med syntaxen aria-*. De mest kända ARIA-egenskaperna är förmodligen den aria-nödvändiga egenskapen och det aria-kontrollerade tillståndet. Aria-krävs är a fast egendom eftersom det är en permanent egenskap hos ett inmatningselement (dvs användaren måste fylla i den), medan aria-checked är a stat eftersom en kryssruta ofta ändrar sitt värde på grund av användarens interaktion. Stater och egenskaper tar ibland token-värden (en begränsad uppsättning fördefinierade värden), till exempel kan aria-live-egenskapen ha 3 olika värden: av, artig, bestämd. Syntaxen i det här exemplet ser så här ut: I andra fall representeras värdena för aria-prefixade attribut av strängar, tal, heltal, ID referenser eller sant falskt värden. Använd relationsattribut för att ange relationer mellan olika element på din webbplats, som inte kan bestämmas på annat sätt av dokumentstrukturen. Till exempel När du har ställt in en ARIA-landmärkesroll för ett uppfattningsbart område på din HTML-sida kan det hjälpa till med hjälpteknik om du ändrar ARIA-prefixade tillstånd och egenskaper hos barnelement i enlighet med händelser som händer på skärmen. Detta kan vara avgörande där användarna måste interagera med webbplatsen, till exempel fylla i en blankett eller köra en sökfråga. Den allmänna tumregeln för tillgänglighetsdesign är att nuvarande tillstånd för användargränssnittet alltid måste kunna uppfattas av hjälpteknik. Till exempel om användaren väljer ett alternativ i en form, måste den också väljas ut för hjälpteknik. Detta kan lätt uppnås genom att använda det aria-valda tillståndet med följande syntax: W3Cs WAI-ARIA Authoring Practices riktlinje kan ge dig många andra bra idéer om hur du korrekt harmoniserar de visuella och tillgängliga gränssnitten på din webbplats. Att använda ARIA-roller och attribut kan ibland vara överflödiga. När du använder semantiska taggar av HTML5 som Till exempel är det onödigt att använda form landmärke roll att definiera Så om du redan har lagt till dold HTML-attribut till en forminmatning, är det onödigt att lägga till aria-hidden Ange, eftersom webbläsaren innehåller det som standard.. Den senare tillsattes till W3C-specifikationerna med syftet att kartlägga huvud ARIA landmärke roll till ett semantiskt HTML-element. role =”navigering”
role =”komplementär”
role = "main". Relaterade inlägg, populära artiklar, senaste kommentarer är typiska exempel på autonomt komplementärt innehåll.role =”contentinfo”
role =”form”
role = "sök" istället.role =”Sök”
role =”Ansökan”
Stater och egenskaper
Syntaxen av Aria-prefixade attribut
Så här använder du ARIA-stater och egenskaper
1. Bygg relationer mellan element med förhållande attribut
aria-labelledby egenskap identifierar det element som markerar det aktuella elementet.aria-labelledby - bland många andra saker - kan binda rubriker till ARIA landmärke regioner på följande sätt:Detta är en rubrik
Huvudinnehåll… 2. Synkronisera stater och egenskaper med elementets livscykel
3. Matcha de visuella och tillgängliga gränssnitten
.Överdriv inte ARIA
eller , moderna webbläsare lägger till lämplig ARIA semantik som standard. I det här fallet har det ingen mening att separat ställa in ARIA-landmärkesrollerna. element. Istället för syntaxen är perfekt nog att bara använda . Det är också överflödigt att använda HTML: s inbyggda attribut tillsammans med lämplig ARIA-attribut.
