Accentsconagua
Share
Ønsker du å gjøre nettstedet ditt mer tilgjengelig? Eller kanskje du vil gjøre det enklere å krysse hele nettstedet ditt ved hjelp av nettlesere og andre grensesnitt? Ved å bruke ARIA kan du gjøre begge deler. La oss se på hva ARIA er, og hvordan det kan være til nytte for et e-handelsnettsted. Vi vil også gå gjennom noen eksempler trinnvis.
WAI-ARIA står for Web Accessibility Initiative-Accessible Rich Internet Applications. Dette initiativet tar form av et sett med retningslinjer og attributter som vedlikeholdes av W3C. Ved hjelp av disse attributter kan vi opprette relasjoner mellom våre nettstedelementer som ikke kan uttrykkes gjennom HTML alene. Det viktigste for vår bruk her er at vi kan definere elementrelasjoner utenfor foreldre-barn-forholdet, og tydeligere koble UI-elementer til brukerne våre.
På dette tidspunktet kan det være lurt å sjekke ut vår opprinnelige primer på ARIA for å pusse opp på noen av grunnene.
Tidligere snakket vi om hvordan du bruker ARIA til en generell nettside som lignet en felles småbedrifts hjemmeside. Denne gangen skal vi se nærmere på hvordan ARIA kan forbedre brukeropplevelsen for store eCommerce-nettsteder.
Vi skal fokusere på fire sentrale områder av eCommerce som utgjør unike situasjoner: produktsider, kategorisider (eller produktaggregatssider), navigasjon på flere nivåer og fasettert navigasjon. Vi bruker disse to wireframes for å veilede oss gjennom prosessen:
Et veldig grunnleggende produktmockup
Eksempel på en produktoppføringsside mockupFor de fleste nettsteder er å legge til ARIA en ganske enkel prosess. Du definerer brikkene på nettstedet ditt, bryter dem ned i landemerker og elementer, og legger til den nødvendige koden.
Vi skal følge en lignende prosess med vår e-handelsside, men vi har nå et nytt lag av intricacy. Med kompleksiteten som følger med eCommerce-nettsteder, kan ARIA bli et kaninhull i mange tilfeller. Selv om det er viktig å forbedre tilgjengeligheten til nettstedet ditt så mye som mulig, vil vi dessverre ofte komme inn i forretningsmessige begrensninger. På grunn av dette vil vi gjøre litt mer planlegging på forhånd, og prioritere hver av våre ARIA-tillegg.
Ved å gjøre denne prioritering, kan vi sikre at de viktigste aspektene av nettstedet vårt blir forbedret først, slik at brukeropplevelsen blir så god som mulig i tiden tilgjengelig.
La oss slå det av ved å se på enkelte produktsider.
En stiftside for et hvilket som helst eCommerce-nettsted, viser disse sidene vanligvis et produkt, dets tilgjengelige variasjoner, og en måte å legge til varen i en handlekurv. Hvert av disse interaktive elementene bør vurderes separat.
For produktsiden vår, la oss slå den i stykker som dette: Vårt kjerneproduktinformasjon, interaktive elementer som påvirker produktet, vår tilleggsinformasjonsknapp og en utvidet innholdsdel.
Hvis vi trengte å prioritere implementeringen på denne siden, ønsker vi å gruppere den slik:
Hovedfaktoren på spill her er noe vi snakket om i en tidligere artikkel: ARIA bidrar til å definere et elements hensikt. Når det gjelder utvidet innhold, har de fleste av HTML-elementene som brukes, elementer med semantisk mening og hensikt som samsvarer. Dette betyr at mens det er nyttig å sette ytterligere ARIA-informasjon hvis det er mulig, er det sannsynligvis mindre viktig enn å fullføre de tre andre områdene.
La oss starte med å legge til ARIA i vår kjerneproduktinformasjon. Dette er ganske greit grunnet enkelheten av elementene som brukes her. Koden ser slik ut:
En fin pose
Posens størrelse:
100x150mm
For det første legger vi til en rolle for hoved div, og et forhold mellom bildet og produkt titteloverskriften.
En fin pose
...
Det er her produktsidene kan bli litt vanskelig. Produkter på en e-handelsside kan ha ganske mange forskjellige typer variasjoner til stede. Utover bare de tilgjengelige typene, kan antallet av dem som kan benyttes samtidig legge til et annet kompleksitetslag. I vårt eksempel har vi tre elementer som kommer inn i spill: størrelse, farge og mengde.
La oss se på hvordan du kan markere det opp. Her er koden for ARIA-forbedret utvalg og avkrysningselementer:
Vognknappen ligner en standardknapp, men vi skal gå ut av vår måte å merke det tydeligere enn andre knapper:
Endelig behandles det utvidede innholdsområdet akkurat som et typisk innholdsområde. Avhengig av produktsidene dine, kan det imidlertid være lurt å skille hovedinnholdet ditt fra landemerkene dine. Flikene legger til et ekstra lag til koden her også. Slik gjør vi det i vårt eksempel:
- Produktinfo
Mer produktinformasjon ...
Selv om produktsidene kan betraktes som en alternativ form for innholdsside i de fleste henseender, er et nettsteds kategorisider, også kalt produktoppføringssider (PLPs), et helt annet dyr. De fungerer som en stor navigasjonsstruktur, slik at brukerne kan sortere gjennom hundrevis eller tusenvis av produkter.
Dette gjør dem stadig mer komplekse, blir enda mer slik at flere lag av innhold og filtre blir lagt til (vi snakker om fasettert navigasjon og filtre i neste avsnitt). La oss se på de to hovedområdene i vår PLP utenfor filtre: produktblokker og paginering.
Her er vår startkode ramme:
Produktoppføringsside
Farge Sorter
Rød Grønn SvartStørrelse Sorter
Stor liten...En fin pose
1 2 3 ... Siste
Paginering er navnet som er gitt til de små koblingene nederst i våre produktoppføringer her. Vanligvis er de representert av tall eller piler, men de kan komme i forskjellige andre former. På HTML-siden av ting ser paginasjonslenkene ut som vanlige lenker. Vi sier at vår kontrollerer produktoppføringene uten å omdirigere til en annen side.
For å gjøre det kjent at det styrer et innholdsområde på denne måten, må vi deklarere det som en kontroller, definere hva den kontrollerer, og merk deretter innholdsområdet som live. Her er det som ser ut i vårt tilfelle:
...
Når vi lager vårt levende område her, bruker vi "høflig" innstilling som ARIA gjør tilgjengelig. Hvis endringene dine er relevante og må adresseres av brukeren raskt, eller du må prioritere blant flere levende områder, kan du bruke verdien "påståelig" også.
En unik utfordring som kommer opp med produktlandingssider er den intensive navigasjonskompleksiteten i produktoppføringene selv. Fra et visuelt perspektiv kan det være lett nok å gruppere informasjonen ved hjelp av visuelle signaler for å bestemme hvilken informasjon som gjelder for hvilket produkt.
Å gjøre det med ARIA har noen flere lag enn de tidligere programmene vi har dekket. Merking av en "kjøp nå" -knapp En standardknapp kan skape forvirring når det er 20 av disse knappene på en side. For å løse dette må vi opprette klare forbindelser mellom hvert produkt og dets relaterte elementer.
Slik gjør vi det:
...En fin pose
Selv om dette hjelper litt med å klargjøre relasjoner for brukeren, er det fortsatt ikke den beste implementeringen. En bedre måte ville være å dynamisk generere en aria-etikett ved å sammenkoble produkttittelelementet med en ekstra setning som "legg til i handlekurven".
Fasettert navigasjon refererer til filtre og alternativer som vanligvis vises på eCommerce-nettsteder, og lar deg begrense søkeresultatene dine. Disse kommer i mange smaker - fra størrelser til farge og utover. For vårt eksempel skal vi gjøre to forutsetninger:
Vår fasetterte navigasjon oppdaterer produktene live på siden. Dette er ikke alltid tilfelle, fordi noen ganger kan eCommerce-nettsteder generere en ny side når et filter blir brukt, men vi vil fungere som om nettstedet oppdaterer innholdet live.
Vår fasetterte navigasjon gjør det mulig å velge flere filtre. Ikke alle eCommerce-nettsteder gjør dette, og det er definitivt tilfeller der det ikke bør være tillatt. Dette skaper imidlertid et ekstra lag av kompleksitet utenfor omfanget av denne artikkelen.
HTML bak filtene våre ligner paginering, som vises i koden som grunnleggende lenker. For våre bruksområder er imidlertid filosofiens hensikt å endre informasjon som for tiden er på siden. På grunn av dette vil vi merke hele beholderen rundt filtre, noe som gjør det klart at dette er en kontroller for et annet område på siden:
Som paginering skjer disse oppdateringene live på siden. På grunn av dette vil vi merke hovedinnholdet på vår side som "live". Merk at vi gjorde dette tidligere i paginationsdelen, men vi gjentar trinnet her for konsistens.
Koden skal se slik ut:
...En fin pose
Våre implementeringer er nå på plass, så la oss sette dem gjennom noen tester. Mine favorittverktøy for å gjøre dette, er Googles utviklingsverktøy for tilgjengelighet eller IBMs dynamiske assistent-plugin, men avhengig av prosjektets skala må du kanskje lage ditt eget testskript.
Hvis du trenger et verktøy som fungerer utenfor Chrome, eller bare ikke foretrekker de to nevnte ovenfor, har W3C en liste over andre tilgjengelighetsverktøy som er tilgjengelige.
Med disse nye tilleggene til ARIA-verktøysettet, bør du nå kunne markere nesten hvilken som helst e-handelsside. For å sikre den beste brukeropplevelsen med et e-handelsnettsted, husk å holde navigasjonen så enkel som mulig, og uttrykkelig intensjonen tydelig.
Har du flere spørsmål om dette emnet? Mistet jeg noe viktig? Fortell meg i kommentarene nedenfor!
