En titt på ARIA Web Standards & HTML Apps Tilgjengelighet
En virkelig åpen og inkluderende web trenger teknologier som tillater deaktiverte brukere å stole på hjelpeteknologi for å nyte dynamisk webinnhold og moderne webapps. W3Cs tilgjengelighet webstandarder har til hensikt å fylle ut nettet med tilgjengelige Rich Internet Applications (ARIA) som brukere med funksjonshemninger effektivt kan bruke.
ARIA er en av de mange tilgjengelighetsstandardene og retningslinjene publisert av Web Accessibility Intitiative (WAI). Det gir en ekstra markering som enkelt kan settes inn i HTML-dokumenter. WAI-ARIA er en cross-platform-løsning på tvers av en enhet som retter seg mot Open Web Platform, så ikke bare tenk på nettsteder, men også om spill, digital underholdning, helsetjenester, mobil og andre typer apper.
I dette innlegget vil vi se på hvordan du kan legge til tilgjengelighet for HTML-dokumenter ved hjelp av WAI-ARIA-standarder.
ARIA-rammen
Syntaksen til HTML tillater ikke alltid at utviklere beskriver elementer på riktig måte, for å identifisere deres roller, og angi forholdene mellom dem. Selv om det sjelden er et problem for besøkende som er i full besittelse av deres sanser, kan det hindre hjelpende teknologibrukere fra å forstå hva som skjer på skjermen og utforske deres alternativer.
Dette er punktet der ARIA kommer til vår hjelp, da det er mulig å definere formålet med forskjellige elementer ved hjelp av landemerke roller, og beskriv deres natur med aria-prefikserte attributter. Aria-prefikserte attributter har to typer: eiendommer som beskriver funksjoner som er mindre sannsynlig å endres gjennom hele livssyklusen, og stater som gir informasjon om ting som ofte kan endres på grunn av brukerinteraksjon.
Landemerke Roller
Landemerke roller er de mest kjente former for ARIAs Roller Model (andre er de abstrakte rollene, Widget Rollene og Dokumentstruktur Rollene). Landemerke roller gjør det mulig for utviklere å identifisere store oppfattelige regioner På nettsiden som hjelpeteknologibrukere vil kanskje raskt få tilgang til.
Det er 8 typer ARIA landemerke roller, og de må legges til som attributter til tilhørende HTML-koder.
role =”banner”
Bannerrollen er ment å brukes hovedsakelig for innhold som er relatert til hele nettstedet, ikke bare til enkelte sider. Det legges vanligvis til som et attributt til hovedoverskriften til nettstedet for logoen og annen viktig nettsideomfattende informasjon. Det er viktig at du bare kan bruke bannerrollen én gang i noen HTML-dokumenter eller -apper.
role =”hoved-”
Hovedrollerollen er relatert til hovedinnholdet i dokumentet. Det kan ikke brukes mer enn en gang på en hvilken som helst HTML-side. Det følger vanligvis Navigasjonsrollen er ment å brukes til å indikere et område som inneholder navigasjonselementer som for eksempel lenker og lister på et nettsted. Den kompletterende landemerkrollen beskriver ytterligere innhold som er relatert til hovedinnholdet på nettstedet. Det må plasseres på samme nivå i DOM-hierarkiet som Rollen contentinfo informerer brukeragenter om tilstedeværelsen av en region der ulike typer metadata, for eksempel opphavsrettsinformasjon, juridiske og personvernerklæringer, kan bli funnet. Den brukes vanligvis til sidene til et nettsted. Skjemaet landemerkerollen indikerer et skjema som venter på brukerinngang. For søk skjemaer du bør bruke Søkerollen er ganske selvforklarende, den er ment å hjelpe assistentteknologier til å identifisere søkefunksjonaliteten til et nettsted. Du kan bruke programmets landemerkerolle for en region som du vil erklære som en webapp, snarere enn et webdokument. Det anbefales ikke å inkludere det på tradisjonelle nettsteder, da det hintes for hjelpeteknologier for å bytte fra vanlig nettlesermodus til søkemotormodus. Du bør bare bruke denne landemerkrollen med stor omhu. Mens roller gir deg mulighet til å definere betydningen av HTML-koder, gir statene og egenskapene brukeren ekstra informasjon om hvordan man kan interagere med dem. Begge stater og egenskaper er merket med aria-prefikserte attributter med syntaksen aria- *. De mest kjente ARIA-egenskapene er trolig den aria-nødvendige egenskapen og den aria-kontrollerte tilstanden. Aria-obligatorisk er a eiendom fordi det er en permanent funksjon av et inngangselement (dvs. brukeren må fylle den inn), mens aria-kontrollert er a stat fordi en avkrysningsboks ofte kan endre verdien på grunn av brukerinteraksjon. Stater og egenskaper tar noen ganger tokenverdier (et begrenset sett med forhåndsdefinerte verdier), for eksempel kan aria-live-egenskapen ha 3 forskjellige verdier: av, høflig, påståelig. Syntaxen i dette eksemplet ser slik ut: I andre tilfeller er verdiene av aria-prefikserte attributter representert av strenger, tall, heltall, ID referanser eller sant / usant verdier. Bruk relasjonsattributter for å indikere forhold mellom ulike elementer på nettstedet ditt, som ikke på annen måte kan bestemmes av dokumentstrukturen. For eksempel Etter at du har angitt en ARIA-landemerkerolle for et oppfattbart område på HTML-siden din, kan det hjelpe hjelpende teknologier mye hvis du endrer ARIA-prefikserte tilstander og egenskaper til barnelementer i samsvar med hendelser som skjer på skjermen. Dette kan være avgjørende der brukerne må samhandle med nettstedet, for eksempel å fylle ut et skjema eller kjøre et søk. Den generelle tommelfingerregelen for tilgjengelighetsdesign er at den nåværende tilstanden til brukergrensesnittet alltid må kunne oppfattes av hjelpende teknologier. For eksempel hvis brukeren velger et alternativ i et skjema, må det også vises valgt for hjelpeteknologi. Dette kan lett oppnås ved å bruke den aria-valgte tilstanden med følgende syntaks: W3Cs WAI-ARIA Authoring Practices retningslinje kan gi deg mange andre gode ideer om hvordan du skal harmonisere de visuelle og tilgjengelige grensesnittene på nettstedet ditt på riktig måte.. Bruk av ARIA-roller og attributter kan noen ganger være overflødig. Når du bruker semantiske koder av HTML5 som For eksempel er det unødvendig å bruke skjema landemerke rolle å definere Så hvis du allerede har lagt til skjult HTML-attributt til et skjemainngang, er det unødvendig å legge til aria skjult stat, da nettleseren inneholder den som standard.. Sistnevnte ble lagt til W3C-spesifikasjonene med det formål å kartlegge hoved- ARIA landemerke rolle til et semantisk HTML element. role =”navigasjon”
role =”utfyllende”
role = "main". Relaterte innlegg, populære artikler, siste kommentarer er typiske eksempler på autonomt komplementært innhold.role =”contentinfo”
role =”skjema”
role = "søk" i stedet.role =”Søke”
role =”applikasjon”
Stater og egenskaper
Syntaks av Aria-prefiksattributter
Slik bruker du ARIA-stater og -egenskaper
1. Bygg forhold mellom elementer med relasjonsattributter
aria-labelledby eiendom identifiserer elementet som merker det nåværende elementet.aria-labelledby - blant mange andre ting - kan binde overskrifter til ARIA landemerkeområder på følgende måte:Dette er et overskrift
Hovedinnhold… 2. Synkroniser stater og egenskaper med elementets livssyklus
3. Match de visuelle og de tilgjengelige grensesnittene
.Ikke bruk ARIA for mye
eller , moderne nettlesere legger til rette ARIA semantikk som standard. I dette tilfellet har det ingen mening å sette ARIA landemerkerollene separat. element. I stedet for syntaks det er perfekt nok til å bruke bare . Det er også overflødig å bruke HTMLs opprinnelige attributter sammen med riktig ARIA-attributt.
