Share
Vad du ska skapaMed hjälp av standard HTML, kan moderna webbapps låsa ut användare med tillgänglighetsbehov.
HTML är det dominerande språket på nätet, som används av nästan 83% av befintliga webbplatser. Även om det har skett några förändringar under de 25 åren sedan dess skapades, lämnar även nyare iterationer, till exempel HTML5 och AMP, mycket att önska, särskilt när det gäller tillgänglighet. Det är här ARIA kommer in. I den här handledningen ska jag prata om vad ARIA är, varför det är användbart för din webbplats och ett par sätt att lägga till på din webbplats.
ARIA, även känd som WAI-ARIA, står för Web Accessibility Initiatives tillgängliga Rich Internet Applications. Det fullständiga specifikationsdokumentet finns här. Observera att hela dokumentet är ganska tätt, så det kan vara en bra idé att börja med att läsa det här inlägget och kolla in några av de andra resurserna som jag länkar nedan.
Huvudsyftet med ARIA är att möjliggöra avancerad semantisk struktur inom HTML som en motsvarighet till HTML: s syntax-tunga natur. Med andra ord, HTML berättar webbläsaren där saker går och ARIA berättar hur de interagerar.
ARIA är ett projekt värd W3C (World Wide Web Consortium). Projektet följer samma standarder för uppdatering och redigering som andra initiativ. De tillhandahåller också ett GitHub-förråd av flera test som du kan köra för att se till att din sida körs korrekt.
De flesta webbplatser som har en strukturerad, genomtänkt design gör det tillräckligt bra när det gäller adaptiv teknik (dvs skärmläsare). Att ha en användare att kunna räkna ut hur man använder din webbplats och att den är lätt att använda är olika saker. Lågsynsanvändare utgör nästan 2% av befolkningen, och för dem kan skillnaden innebära att man sparar mycket tid och detektivarbete när man försöker utföra grundläggande onlineuppgifter. Det kan vara skillnaden mellan att erbjuda besökare en spektakulär upplevelse och ge en labyrint för att de ska navigera.
Utöver det traditionella sättet att nå tillgänglighet, finner ARIA sin väg in i teknologier som ger nya uppdrag på standard interaktion. Ett ökande antal röstsystem, aggregerad webbläsning (som t.ex. inbyggda datorer) och andra innovationer sätter ARIA i bruk, utnyttjar sin ökade semantiska kapacitet.
Sammantaget kopplar ARIA samman elementen på ett semantiskt meningsfullt sätt. Det ger användaren ytterligare mening om interaktion. Här är några exempel på hur det kan användas:
Accentsconagua
Vi har pratat om vad ARIA kan göra, så nu ska vi titta på några av de vanligaste exemplen. Vi börjar varje avsnitt med ett kortfattat redogörelse för målet vi vill uppnå, följt av ett kodprov av hur vi åstadkommer det.
När det gäller alternativ märkning är de flesta utvecklare bekanta med alt attribut som vanligen används på
ARIA ger ett liknande attribut kallat aria-etikett som kan kopplas till något HTML-element, vilket förbättrar tillgängligheten för inte bara bilder, utan även sidavsnitt, formskontroller och mer. Här är ett exempel på hur det ser ut:
En textbeskrivning av bilden, synlig på skärmen
HTML innehåller redan ett antal element för att skapa webbsidor, men deras huvudsakliga fokus är att generellt definiera ett område och presentera användaren med webbplatsens struktur. ARIA ger ett par dussin ytterligare element som fokuserar mer på hur ett element används, till exempel en timer, verktygstips eller framdriftsfält.
Ett exempel här är ett verktygstips som du kan hitta på en blankett. Det finns ett antal sätt att skapa en, allt från en länk som utlöser några JavaScript till ett element som skapar en modal när den svävar över. Den saknade biten här är det trots att det kan fungera för synskadade användare, kanske visionsanvändare kanske inte ens vet att verktygetipset finns.
Du kan definiera ett verktygstips med ARIA på följande sätt:
För att expandera på dessa användargränssnitt, här är en kort lista över några av de mest intressanta "roller" som kan definieras. Den fullständiga listan finns tillgänglig i det angivna specifikationsdokumentet.
SökbanerpresentationverktygsfältstatusmenuitemloggadialoglänkLåt oss nu expandera på en punkt som vi pratade om tidigare: den tvungna strukturen i HTML. Medan föräldra / barns förhållande är bra för att bestämma hur saker ska beställas, blir det kort när mer meningsfulla kontakter behövs. Ett exempel på detta är syskonelement. Vissa bibliotek har lagt till möjligheten för syskon eller andra former av elementrelationer att korsas, men det händer vanligtvis i JavaScript eller ett annat språk utanför markeringen.
ARIA ger oss möjlighet att definiera dessa relationer direkt i markeringen, vilket gör det enklare att gruppera menyalternativ, skapa icke-standardiserad navigering och fästa kontroller till elementområden som skulle vara svåra att göra normalt.
Låt oss ta en titt på hur vi kan använda det här för att ansluta några kontroller till ett innehållsområde:
Din handledning är innehåll
Det här stycket säger att nextbutton.jpg bilden är en knapp, som är en kontroll för handledningen div Nedan.
Den sista egenskapen hos ARIA som vi kommer att täcka här är aria-live attribut. Medan de flesta av de andra funktionerna i ARIA här handlar om semantiska anslutningar, handlar det här direkt om tanken att ge användarna meddelanden om innehåll eller elementändringar.
För många med låg syn kan det inte vara omedelbart klart att deras interaktion med din webbplats orsakade en förändring någon annanstans på sidan. Detta kan särskilt vara sant för subtila förändringar, till exempel små oskärpa av text som kan ändras men förbli relativt lika långa. Genom att använda det här attributet kommer varje användare att meddelas varje gång innehållet ändras inom det definierade elementet.
Vi kan lägga till det här attributet till ett element så här:
Innehåll som uppdateras, dvs. guidade anvisningar
Med drygt 2% av den amerikanska befolkningen som bär någon form av lågvisningsetikett kan förbättring av tillgängligheten på din webbplats öka din webbplatss räckvidd dramatiskt. För dem med webbplatser som når flera länder blir det numret ännu större. Utöver tillgänglighet erbjuder ARIA också ett sätt för gränssnitt för icke-webbläsare att använda din webbplats, med ett antal röstbaserade enheter som redan tillhandahåller stöd.
Genomförandet av ARIA hjälper dina användare och kan hjälpa din trafik, så ta itu med det!
Missade jag några detaljer, eller har du ytterligare frågor? Lämna en kommentar nedan!
Om du vill dyka in i hela ARIA-dokumentationen eller prova det officiella testverktyget, kolla länkarna nedan:
