Share
I den forvirrende verden av webapplikasjoner kan ARIA bidra til å forbedre tilgjengelighet og brukervennlighet for dine kreasjoner. HTML er ikke i stand til å håndtere mange typer forhold mellom elementene på siden, men ARIA er ideell for nesten alle slags oppsett du kan komme med. La oss se på hva ARIA er, hvordan det kan gjelde for din webapp, og noen raske oppskrifter du kan bruke til dine egne nettsteder.
ARIA, også kalt WAI-ARIA, står for Web Accessibility Initiative-Accessible Rich Internet Applications. Dette initiativet, oppdatert av W3C, har som mål å gi utviklere et nytt sett med skjemaer og attributter for å gjøre deres kreasjoner mer tilgjengelige. Det tar sikte på å dekke de iboende hullene som er igjen av HTML. Hvis du ikke er kjent med hva den allerede gjør, bør du se på vår primer på ARIA. Du kan også være interessert i våre brikker på ARIA for hjemmesiden og ARIA for e-handel.
Kort sagt, ARIA har imidlertid tre hovedtrekk som vi skal fokusere på:
Accentsconagua
aria-live Attributt gir skjermlesere og andre enheter en lytter for når innholdet på siden endres. Dette gjør det lettere å kommunisere når endringer på skjermen.Først så vi på å legge til ARIA på de vanlige elementene i eCommerce-sider og hjemmesider. Med webapps varierer imidlertid hver av dem drastisk fra sist. Skjemaer og funksjoner skifter mellom hver app, og ofte til og med mellom versjoner av samme app. På grunn av dette behandler vi våre implementeringer her som oppskrifter i en kokebok i stedet for en engroskonvertering av en side.
Når det gjelder webapps, er en brukers hensikt vanskeligere å skille seg i generell forstand. Med e-handel, uansett hvilket nettsted du er på, er det sannsynlig at de besøkende ønsker å kjøpe et produkt eller en tjeneste. Nettprogrammer tjener en rekke formål, så i stedet fokuserer vi på å skape nyanserte kontroller som er tilgjengelige og brukervennlige.
La oss komme inn i noen av disse kontrolltypene.
Den første kontrollen vi skal se på er en vist verdi oppdatert med en knappetrykk. Disse typer kontroller blir vanligvis sett hvor et element viser en mengde som kan justeres med knapper merket '+'og'-', men kan ta mange former, for eksempel pilknapper som lar deg sykle gjennom forhåndsdefinerte statuser.
En standardimplementering kan gi noen hull i forståelse for brukeren. Det er uklart hvilke elementer knappene påvirker, hvordan de påvirker dem, og når elementets verdi endres.
Nedenfor vil vi bruke ARIA til å opprette en forbindelse mellom knappene og verdien på displayelementet ved hjelp av aria-kontroller Egenskap. Da vil vi gjøre bruken av knappene klar ved bruk av aria-etikett og HTML . Til slutt bruker vi ariaen varsling rolle og aria-live attributt til å la brukeren få vite når verdien oppdateres.
La oss se på hvilken kode som ser ut:
Når du utarbeider et nettsted med ARIA, er det vanlig å bruke "progressiv tilgjengelighet". Tanken bak denne termen er at å ta et nettsted eller en webapp fra det grunnleggende skjemaet til fullt tilgjengelig er en skremmende oppgave. For å håndtere dette på en måte som fremdeles gjør fremoverbevegelse, kan du implementere nye funksjoner gradvis og iterativt.
For et verktøytips med tilhørende popup eller modal, betyr dette at vi kan bryte problemet i to trinn, ruller hver ut som vi kan. I dette tilfellet er verktøytipset vi snakker om, det vanlige bildet av et lite spørsmålstegn som åpner ytterligere informasjon når du svinger over.
For å la brukerne vite at spørsmålstegnbildet egentlig er et verktøytips, har vi definert det ved å bruke en passende rolle, slik som denne:
Det er imidlertid noen problemer med denne implementeringen. Brukere kan fortsatt ikke være oppmerksom på at sveve over verktøytipset starter en popup med ytterligere informasjon. Slik kan vi legge til det i vår kode:
I stedet for et hover-basert verktøytips er det også vanlig at en webapp bruker utgaver der hver inngang har sin egen tilknyttet verktøytip.
Uten ytterligere ARIA-markering kan det være vanskelig å fortelle hvilke verktøytips som gjelder for hvilken inngang for en bruker. Hvis du ikke har dette forholdet på plass, kan det hende at hjelperen din er ubrukelig i noen tilfeller.
For å korrigere for dette, vil vi pakke inn våre verktøytips innenfor sine egne elementer. Hver av disse kan være nestet i nærheten av deres relaterte inngang, har deres relasjoner etablert med ARIA, og kan deretter utløses med JavaScript (eller bare CSS hvis du er slank).
Slik kan det se ut:
"Vår tjeneste er foreløpig nede", "Din konto er suspendert", og relaterte statusvarsler blir ofte brukt blant webapps, og viser viktig informasjon for brukere. Uten ARIA, kan de bli begravet i informasjonen på en side og forårsake en rekke problemer.
Utnytte ARIA varsling rolle og aria-live Attributt, vi kan sørge for at brukerne våre er oppmerksomme på problemer raskt når de kommer til en side.
Vi kan sette opp denne typen statusvarsel slik:
Systemet er offline!
Til slutt, la oss ta en titt på et annet vanlig kontrollelement som brukes i webapper: verktøylinjen. For vår hensikt skal vi merke en verktøylinje som virker slik: Vår webapp viser en stor mengde data, orientert i et bord. Over dette bordet har verktøylinjen flere knapper som lar brukerne sortere bordet på ulike måter. Disse knappene inkluderer klassiske sorteringsalternativer som A til Z og Z til A.
Relasjonsmessig gir disse noen problemer med hensyn til tilgjengelighet. For det første er det ikke klart at disse knappene påvirker bordet - vi løser dette ved hjelp av aria-kontroller Egenskap. Det er heller ikke klart at knappene er knyttet til hverandre, noe som kan være et nyttig stykke informasjon for våre brukere. For å definere dette, bruker vi verktøylinje rolle. Endelig vet en bruker ikke nødvendigvis hvilken knapp som ble trykket sist. For å rette opp dette, bruker vi aria pressede Egenskap.
Når du bruker aria pressede Attributt, det er viktig å merke seg at du må oppdatere disse elementene ettersom brukeren samhandler med dem. Dette vil sannsynligvis kreve endring av attributter gjennom JavaScript eller jQuery.
Slik ser vår verktøylinjekode ut:
Med denne håndfull nye kontrollordninger og relasjoner under beltet ditt, er du godt på vei til å lage din egen webapp fullt tilgjengelig! Når du har lagt til disse nye markeringene, kan du tenke på hvordan du kan bruke disse attributter til andre deler av brukergrensesnittet ditt for å maksimere brukervennligheten av din opprettelse.
Er det attributter, roller eller andre funksjoner i ARIA som du vil vite om? Eller kanskje du har noen spørsmål om dine egne implementeringer, eller rettelser for denne artikkelen? Kom i kontakt med kommentarseksjonen nedenfor, eller ved å merke kylejspeaker på Twitter!
