Praktisk med ARIA Hjemmesideelementer og Standard Navigasjon

Ønsker du å gjøre nettstedet ditt mer tilgjengelig? Vil du være den første som nye nettgrensesnitt kommer på markedet? Se ikke lenger enn ARIA.

Dette settet av standarder som vedlikeholdes av W3C (World Wide Web Consortium) gir deg det beste fra begge verdener ved å legge til en rekke attributter som tillater at HTML utvides på meningsfulle måter. Her går vi gjennom hva ARIA er, se hvordan det kan være til nytte for et informativt nettsted, og gå gjennom en brukstilstand trinnvis med kodeeksempler. La oss komme i gang!

ARIA Grunnleggende

ARIA (eller noen ganger WAI-ARIA) er akroniet for et sett med tilgjengelighetsstandarder, kalt Web Accessibility Initiative-Accessible Rich Internet Applications. Du kan sjekke ut mer om grunnlaget for ARIA i min forrige artikkel, men la oss gå over noen av søylerne nå.

Definere ikke-tradisjonelle relasjoner

Et flertall av nettsteder er bygget ved hjelp av HTML, som primært relaterer elementer til hverandre på en hierarkisk måte gjennom foreldre og barns relasjoner. Denne strukturen er flott for å definere innhold, men faller kort når det gjelder å definere brukergrensesnitt. For eksempel på mange nettsteder og webapplikasjoner styres et område med innhold av knapper i et søskenelement - søsken har samme foreldreelement, men i HTML har de ikke et direkte forhold til hverandre. På grunn av dette blir det vanskelig å definere hvilke brukergrensesnitt (UI) -elementer som kontrollerer hvilke deler av innholdet når de bruker hjelpende teknologier.

Dette fører også til nyere grensesnitt. Hvis du for eksempel prøver å navigere et nettsted via en smart enhet, blir det vanskelig når elementendringer ikke er synlige.

ARIA lar deg knytte HTML-elementer sammen ved hjelp av flere attributter som representerer disse typer kontroller.

Ikke-stiv element klassifisering

En annen mangel på HTML er dens manglende evne til å skille strukturen fra hensikt.

For eksempel kan det være lurt å lage et bildeelement i en klikkbar knapp. Imidlertid definerer HTML fortsatt stort sett det bildet som bare et bilde, og alt utover det som skjer andre steder.

Med ARIA kan hensikten skilles fra et element, slik at bilder kan merkes som knapper eller en link som skal defineres som et verktøytips. Dette gir mer kontroll til utvikleren om brukergrensesnittet, og skaper tydeligere relasjoner.

Opprette landemerkeområder

Utover merkingselementer i brukergrensesnittet, gir ARIA også tilgang til rolleattributtet - brukes til å definere områder av en side. For eksempel kan du markere hovedmenyen som navigasjon og artikkelenes innholdsområde som hovedinnhold. Dette gjør det lettere for brukerne å bevege seg gjennom de viktige områdene på nettstedet ditt, og kan forhindre forvirring for de med uvanlige eller komplekse nettstedoppsett.

Bruk Case: Small Business Hjemmeside

For å få litt erfaring med å legge til ARIA på et nettsted, skal vi ta en wireframe på et nettsted som kan brukes av en liten bedrift og implementere våre attributter trinnvis.

Siden wireframe vi merker opp

For klarhets skyld er koden vi skal jobbe med, fjernet, med CSS-klasser og hvilken som helst funksjonalitet fra et CMS fjernet.

Det første vi vil gjøre er å bryte opp vår wireframe i deler for å legge til i ARIA enklere samlet. På bildet nedenfor ser du at jeg har valgt å bryte ned nettstedet i fem hoveddeler: 

• navigasjon
• innhold
• sidebar
• kontaktskjemaer
• spesialiserte brukergrensesnittelementer

I vårt tilfelle ser det slik ut:

Delene vi skal jobbe med

Når du bryter nettstedet ditt ned i områder som dette, ser vi etter to ting. Den første er for store elementer som kan defineres av et ARIA landemerke: banner, navigasjon, hoved, komplementær, innholdsinformasjon, søk og skjema. Disse representerer de nødvendige delene av nettstedet vårt, og alt som er unødvendig for bruk av det, vil ikke bli merket som et landemerke (for eksempel annonser).

Den andre tingen å se etter er spesifikke elementer som må avklares med ARIA. I de fleste tilfeller er dette ganske enkelt (for eksempel å markere et bilde som et bilde), men for enkelte UI-elementer kan det bli litt vanskelig.

Når vi vet hvilke områder som må ha ARIA implementert, kan vi begynne å bevege seg gjennom dem systematisk. La oss komme i gang med sidens navigasjon.

Navigasjon

I vårt eksempel vil du legge merke til at vi har noen få typer navigering. Den første er en meny som sett på de fleste nettsteder, og viser noen sider for nettstedet. Direkte nedenfor er en mindre meny som inneholder alternativer for brukere.

Vi vil markere disse med role = "navigasjon" attributt slik at de enkelt kan velges som nettstedets menyer. Dette fører til spørsmålet: bør de grupperes sammen i et enkelt navigasjonsmiljø, eller merket som to separate landemerker?

For å svare på dette spørsmålet i dine egne prosjekter, kan du vanligvis stille deg to spørsmål:

1. Er hensikten med disse menyene forskjellige? I vårt eksempel navigerer toppmenyen på sidestøttesidene, mens den mindre menyen fokuserer på ting som en innlogget bruker kan trenge. Disse intensjonene er forskjellige, så det er fornuftig å skille dem fra.

2. Er menyene innenfor samme foreldreelement? Jeg vet at dette virker counterintuitive siden ARIA er designet for å hjelpe oss med å overvinne disse typer forholdsbegrensninger, men i dette tilfellet er det mindre om hva som er mulig og mer om hva som er riktig for brukeren. Å ha en enkelt meny definert, men med halvparten av den på ett sted og den andre halvdelen andre steder, gjør navigasjonen vanskeligere.

For vårt tilfelle skal vi behandle våre navigasjoner som to separate landemerker. Så vi gjør noen endringer i koden. Til å begynne med har vi bare vår grunnleggende HTML:

 
 
 
Hjem
 
Handle om
 
tjenester
 
plassering
 
Kontakt oss
 
 
 
Logg Inn
 
Konto
 
innstillinger
 
 

Nå annoterer vi det med noen landemerker.

Det neste trinnet i å definere disse landemerkene er å gi brukeren et hint om hva hensikten med hver meny er. Hvis vi forlater dem begge som navigasjon uten ytterligere informasjon, gjør det bare vanskeligere å tolke. Så la oss legge til meningsfulle etiketter til dem ved hjelp av aria-etikett Egenskap:

Utover det vil vi legge til flere rolleoppslag i menyen vår for å la brukerne vite at dette er en meny, og merk hver kobling som et menyelement:

Innholdsområde

Nå videre til innholdsområdet. Her merker vi beholderen som inneholder hele vårt hovedinnhold med role =”main”. Igjen, til sammenligning, her er vår startkode. 

 
  
 Lorem ... scelerisque ... 
 
  Finn det 
 

Og her er hvordan det ser ut etter at vi legger til "hoved" landemerke.

 
  
 Lorem ... scelerisque ... 
 
  Finn det 
 
 

Innenfor dette innholdet, fortsetter vi å finne ethvert element som har en hensikt som ikke samsvarer med HTML-definisjonen.

Først tar vi vare på bildet som fungerer som en knapp ved å legge til "knapp" rolle:

Denne lenken som aktiverer en modal er litt vanskeligere, fordi det avhenger av hva som er i modalet selv. For oss skal vi si at det er et verktøytips:

scelerisque

I vårt hovedinnhold har vi også et søkeskjema. Dette har et ekstra lag av kompleksitet til det, fordi det er et søkeskjema ved hjelp av HTML-elementer, og det kvalifiserer også som et søkefelt landemerke. Vi ville markere det slik:

 
  Finn det 
 

Utover det kan du definere hvert element med riktig ARIA-tag. For de fleste nettsteder kan dette være for mye av en tidsbelastning på utviklingsprosessen, men i de fleste CMSs kan den automatiseres. I tilfeller der det ikke kan være, hvis et elements HTML-definisjon samsvarer med bruksintensjonen, kan det betraktes som lav prioritet når det gjøres ARIA-implementeringer. Her ser du hvordan hovedinnholdet ser ut etter at du har gjort alle disse endringene:

 
  
 Lorem ... scelerisque ... 
 
 
  Finn det 
 
 
 

sidebar

Sidebjelken til et nettsted kan ta mange former. I vårt tilfelle gir det ytterligere innhold relatert til nettstedet, med en liste over relaterte innlegg nederst.

Her er startmarkeringen for sidefeltet:

For å definere innholdet, vil vi gi det "Supplerende" rolle, slik at brukerne vet at informasjonen i sidefeltet er ekstra innhold relatert til hovedinnholdet. Det kan se slik ut:

De relaterte innleggene nedenfor kan betraktes som en form for navigering, slik at brukerne kan undersøke innleggene på nettstedet ytterligere. Vi vil markere det med en "navigasjon" rolle, og gi den en passende etikett, slik som:

Hvert sides sidebjelke er annerledes og kan kreve en annen kombinasjon av roller og landemerker. Hvis sidelinjen din har en annonse, er det best å ikke markere elementet. Hvis det finnes et søkeskjema i sidelinjen, merker du det med den aktuelle rollen også. Alle menyer som vises i et sidebjelke, bør følge det samme mønsteret som vi diskuterte i navigasjonsdelen: 

• en "navigasjon" landemerke
• en "Meny" rolle for menybeholderen
• roller av "Menypost" for hver av de nestede elementene

Her er hva vår siste sidebar ser ut som:

Håndtering Kontaktskjemaer

Til slutt, nederst på siden vår, er et handlingsskjema, og ber om brukerens navn og e-post, med en standard sende-knapp nedenfor. Når det kommer til skjemaer, er det tre deler å huske på:

1. Gi skjemaet landemerkerollen til "Form": siden skjemaet er en stor del av nettstedet, må vi gjøre det enkelt for brukerne å komme seg til det. Vi gjør det ved å gi den en milepælrolle

2. Tilordne matchende roller til elementer. Skjemaer er et felles område for hensikt, og HTML-definisjoner skal ikke samsvares. Legg til i ARIA roller når det er nødvendig, spesielt når det gjelder kryssbokser, skyveknapper, verktøytips og andre elementer som kan implementeres på flere måter.

3. Match etikettene med de aktuelle elementene. HTML håndterer dette på en enkel måte, slik at du kan bruke element for å knytte en etikett med en inngang. Skjemaer kan enkelt ha en mer komplisert struktur som forhindrer det fra å arbeide; heldigvis kan vi fikse det med aria-labelledby Egenskap.

La oss se på hva vår oppdaterte kode ser ut som:

 
 Tekstboks   Valg nr. 1 Valg nr. 2  avkrysnings