Share
Hva du skal skapeVed hjelp av standard HTML alene kan moderne webapplikasjoner låse ut brukere med tilgjengelighetsbehov.
HTML er det dominerende oppslagsspråket på nettet, som brukes av nesten 83% av eksisterende nettsteder. Selv om det har vært noen endringer i de 25 årene siden etableringen, gir det til og med nyere iterasjoner, som HTML5 og AMP, mye å være ønsket - spesielt når det gjelder tilgjengelighet. Det er her ARIA kommer inn. I denne opplæringen skal jeg snakke om hva ARIA er, hvorfor det er nyttig for nettstedet ditt, og et par måter det kan legges til på nettstedet ditt.
ARIA, også kjent som WAI-ARIA, står for The Web Accessibility Initiative's Tilgjengelige Rich Internet Applications. Det fulle spesifikasjonsdokumentet finner du her. Merk at hele dokumentet er ganske tett, så det kan være lurt å begynne å lese dette innlegget og sjekke ut noen av de andre ressursene jeg linker under.
Hovedformålet med ARIA er å tillate avansert semantisk struktur innen HTML som en motsetning til HTML syntaks-tung natur. Med andre ord, HTML forteller nettleseren hvor ting går, og ARIA forteller det hvordan de samhandler.
ARIA er et prosjekt som er vert for W3C (World Wide Web Consortium). Prosjektet overholder de samme standardene for oppdatering og redigering som sine andre tiltak. De tilbyr også et GitHub-depot av flere tester du kan kjøre for å sikre at siden din kjører riktig.
De fleste nettsteder som har en strukturert, godt gjennomtenkt design, gjør det bra nok når det gjelder adaptiv teknologi (dvs. skjermlesere). Men å ha en bruker å kunne finne ut hvordan du bruker nettstedet ditt og har det lett å bruke er forskjellige ting. Lavvisjonsbrukere utgjør nesten 2% av befolkningen, og for dem kan forskjellen bety at man sparer mye tid og detektivarbeid når man prøver å utføre grunnleggende nettoppgaver. Det kan være forskjellen mellom å tilby besøkende en spektakulær opplevelse og gi en labyrint for dem å navigere.
Utover det tradisjonelle tilgjengelighetsmetoden, finner ARIA sin vei inn i teknologier som gir nye muligheter for standardinteraksjon. Et økende antall stemmesystemer, aggregert nettlesing (som for eksempel innebygde datamaskiner) og andre innovasjoner setter ARIA i bruk, utnytter sin økte semantiske evner.
Samlet forbinder ARIA elementer sammen på en semantisk meningsfull måte. Det gir brukeren ekstra mening om samhandling. Her er noen virkelige eksempler på hvordan det kan brukes:
Accentsconagua
Vi har snakket om hva ARIA kan gjøre, så nå la vi se på noen av de vanligste eksemplene. Vi starter hver seksjon med en kort redegjørelse for målet vi ønsker å oppnå, etterfulgt av en kodeks av hvordan du skal oppnå det.
Når det gjelder alternativ merking, er de fleste utviklere kjent med alt attributt som vanligvis brukes på
ARIA gir et lignende attributt som heter aria-etikett som kan knyttes til et hvilket som helst HTML-element, forbedrer tilgjengeligheten for ikke bare bilder, men nettstedsseksjoner, skjemakontroller og mer. Her er et eksempel på hvordan det ser ut:
En tekstbeskrivelse av bildet, synlig på skjermen
HTML inneholder allerede en rekke elementer for opprettelsen av nettsider, men deres hovedfokus er vanligvis å definere et område generisk og presentere brukeren med nettstedets struktur. ARIA gir et par dusin ekstra elementer som fokuserer mer på hvordan et element brukes, for eksempel en tidtaker, verktøylipp eller fremdriftslinje.
Et eksempel på bruk her er et verktøytips som du kanskje finner på et skjema. Det finnes en rekke måter å opprette en, som spenner fra en kobling som utløser noe JavaScript til et element som skaper en modal når den svinger over. Det manglende stykket her er det til tross for hvordan det kan virke for synete brukere, kan lavvisjonsbrukere ikke engang vite at verktøytipset eksisterer.
Du kan definere et verktøytips ved hjelp av ARIA slik:
For å utvide på disse brukergrensesnittelementene, her er en kort liste over noen av de mest interessante "roller" som kan defineres. Den fullstendige oppføringen er tilgjengelig i det refererte spesifikasjonsdokumentet.
SøkebannerpresentasjonverktøylinjestatusmenyvalgetLoggdialoglinkLa oss nå utvide på et punkt som vi snakket om tidligere: den tvungne strukturen til HTML. Mens foreldre / barn forholdet er bra for å bestemme hvordan ting skal bestilles, blir det kort når det er behov for flere meningsfulle forbindelser. Et eksempel på dette er søskenelementer. Noen biblioteker har lagt til muligheten for søsken eller andre former for elementrelasjoner å bli krysset, men dette skjer vanligvis i JavaScript eller et annet språk utenfor merkingen.
ARIA gir oss muligheten til å definere disse relasjonene rett i oppslaget, noe som gjør det enklere å gruppere menyelementer, lage ikke-standard navigering og legge til kontroller på elementområder som ville være vanskelige å gjøre normalt.
La oss se på hvordan vi kan bruke dette til å koble til noen kontroller til et innholdsområde:
Din opplærings innhold
Denne brikken sier at nextbutton.jpg bildet er en knapp, som er en kontroll for opplæringen div under.
Den siste funksjonen til ARIA som vi vil dekke her er aria-live Egenskap. Mens de fleste av de andre funksjonene i ARIA her omhandler semantiske forbindelser, handler dette direkte med ideen om å gi brukerne varsler om innhold eller elementendringer.
For mange med lav syn kan det ikke være umiddelbart klart at deres interaksjon med nettstedet ditt forårsaket endring andre steder på siden. Dette kan spesielt gjelde for subtile endringer, for eksempel små uskarpheter av tekst som kan endres, men forbli relativt like lenge. Ved å bruke dette attributtet, blir brukeren varslet hver gang innholdet endres i det definerte elementet.
Vi kan legge til dette attributtet til et element som dette:
Innhold som oppdateres, dvs. guidede retninger
Med litt over 2% av den amerikanske befolkningen som bærer noen form for lavvisemerket, kan forbedringen av tilgjengeligheten til nettstedet ditt øke nettstedets rekkevidde dramatisk. For de med nettsteder som kommer til flere land, blir tallet enda større. I tillegg til tilgjengelighet, gir ARIA også en måte for ikke-nettlesergrensesnitt å bruke nettstedet ditt, med en rekke stemmebaserte enheter som allerede gir støtte.
Implementering av ARIA hjelper brukerne dine og kan hjelpe trafikken din, så kom deg til det!
Har jeg savnet noen detaljer, eller har du flere spørsmål? Legg igjen en kommentar nedenfor!
Hvis du vil dykke inn i full ARIA-dokumentasjonen eller prøv det offisielle testverktøyet, sjekk ut koblingene nedenfor:
