Et kig på ARIA Web Standards & HTML Apps Accessibility
Et virkelig åbent og inklusivt web har brug for teknologier, der gør det muligt for handicappede brugere at benytte sig af hjælpemetoder til at nyde dynamisk webindhold og moderne webapps. W3C's webstandarder for tilgængelighed sigter mod at udfylde internettet med tilgængelige Rich Internet Applications (ARIA), som brugere med handicap effektivt kan bruge.
ARIA er en af de mange tilgængelighedsstandarder og retningslinjer udgivet af Web Accessibility Intitiative (WAI). Det giver en ekstra markering, der nemt kan indsættes i HTML-dokumenter. WAI-ARIA er en cross-platform-løsning på tværs af enheder, der er rettet mod Open Web Platform, så tænk ikke kun på hjemmesider, men også om spil, digital underholdning, sundhedspleje, mobil og andre typer apps.
I dette indlæg vil vi se på, hvordan du kan tilføje tilgængelighed til dine HTML-dokumenter ved hjælp af WAI-ARIA-standarder.
ARIA-rammen
HTML-syntaksen tillader ikke altid udviklere at beskrive elementer korrekt, for at identificere deres roller og angive forholdet mellem dem. Selvom det sjældent er et problem for besøgende, der er i fuld besiddelse af deres sanser, kan det forhindre hjælpende teknologi brugere i at forstå, hvad der sker på skærmen og udforske deres muligheder.
Dette er det punkt, hvor ARIA kommer til vores hjælp, da det gør det muligt at definere formålet med forskellige elementer ved hjælp af landmærke roller, og beskriv deres natur med aria-præfikset attributter. Aria-præfikset attributter har to typer: ejendomme der beskriver funktioner, der er mindre tilbøjelige til at ændre sig i hele livscyklussen, og stater der giver information om ting, der ofte kan ændres på grund af brugerens interaktion.
Landmark Roller
Landmærke roller er de mest kendte former for ARIAs Roller Model (andre er de Abstrakte Roller, Widget Roller og Dokumentstruktur Roller). Landmarkroller giver udviklere mulighed for at identificere store opfattelige regioner På den webside, som hjælpekundens brugere måske vil have adgang til.
Der er 8 typer ARIA-landemærkeroller, og de skal tilføjes som attributter til de relaterede HTML-tags.
role =”banner”
Bannerrollen er beregnet til at blive brugt primært til indhold, der er relateret til hele webstedet, ikke kun til individuelle sider. Det tilføjes normalt som en egenskab til hovedhovedet på webstedet for logoet og andre vigtige webstedstjenester. Det er vigtigt, at du kun kan bruge bannerrollen én gang inden for alle HTML-dokumenter eller -apps.
role =”vigtigste”
Hovedmærkets rolle er relateret til dokumentets hovedindhold. Det kan ikke bruges mere end en gang på en hvilken som helst HTML-side. Det følger normalt Navigationsrollen skal bruges til at angive et område, der indeholder navigationselementer som links og lister på et websted. Den komplementære milepælrolle beskriver yderligere indhold, der er relateret til indholdets hovedindhold. Det skal placeres på samme niveau i DOM-hierarkiet som Rollen contentinfo informerer brugernes agenter om tilstedeværelsen af en region, hvor forskellige metadata, f.eks. Ophavsret information, juridiske og personlige oplysninger findes. Det bruges typisk til sidens side. Formularens landmarksrolle angiver en formular, der venter på brugerindgang. For søgeformer, du skal bruge Søgefeltet er ret selvforklarende, det er meningen, at det hjælper med hjælpefunktioner at identificere søgfunktionaliteten på et websted. Du kan bruge programmets milepælrolle til en region, som du vil erklære som en webapp, snarere end et webdokument. Det anbefales ikke at inkludere det på traditionelle websites, da det tyder på hjælpemetoder, der kan skifte fra normal browsing til applikations browsing mode. Du bør kun bruge denne vigtige rolle med stor omhu. Mens roller giver dig mulighed for at definere betydningen af HTML-tags, giver stater og egenskaber brugeren ekstra information om, hvordan man interagerer med dem. Begge stater og egenskaber er markeret med aria-præfikset attributter med syntaxen aria- *. De mest velkendte ARIA-attributter er sandsynligvis den aria-krævede egenskab og den aria-kontrollerede tilstand. Aria-krævet er a ejendom fordi det er et permanent element i et inputelement (dvs. brugeren skal udfylde den), mens aria-checket er a stat fordi en afkrydsningsfelt ofte kan ændre værdien på grund af brugerens interaktion. Stater og egenskaber tager undertiden tokenværdier (et begrænset sæt foruddefinerede værdier), for eksempel kan aria-live-ejendommen have 3 forskellige værdier: af, høflig, selvhævdende. Syntaxen i dette eksempel ser sådan ud: I andre tilfælde repræsenteres værdierne af aria-præfikset attributter af strygere, numre, heltal, ID referencer eller sandt falsk værdier. Brug relativattributter til at angive forhold mellem forskellige elementer på dit websted, der ikke på anden måde kan bestemmes af dokumentstrukturen. For eksempel Når du har indstillet en ARIA-milepælrolle for et opfatteligt område på din HTML-side, kan det hjælpe hjælpsomme teknologier meget, hvis du ændrer ARIA-præfikset tilstand og egenskaber for barnelementer i overensstemmelse med hændelser, der sker på skærmen. Dette kan være afgørende, hvor brugerne skal interagere med webstedet, f.eks. Udfylde en formular eller køre en forespørgsel. Den generelle tommelfingerregel for tilgængelighedsdesign er, at den nuværende tilstand af brugergrænsefladen altid skal kunne opleves ved hjælp af hjælpeteknologier. For eksempel, hvis brugeren vælger en indstilling i en formular, skal den også vælges for hjælpemetoder. Dette kan let opnås ved at anvende den aria-valgte tilstand med følgende syntaks: W3C's WAI-ARIA Authoring Practices retningslinje kan give dig mange andre gode ideer om, hvordan du korrekt harmoniserer de visuelle og tilgængelige grænseflader på dit websted. Brug af ARIA-roller og attributter kan undertiden være overflødige. Når du bruger semantiske tags af HTML5 som f.eks For eksempel er det unødvendigt at bruge form landmark rolle at definere Så hvis du allerede har tilføjet skjult HTML-attribut til en formindgang, er det unødvendigt at tilføje aria-hidden tilstand, da browseren indeholder det som standard.. Sidstnævnte blev tilføjet til W3C specs med det formål at kortlægge vigtigste ARIA landemærke rolle til et semantisk HTML element. role =”navigation”
role =”komplementær”
role = "main". Relaterede indlæg, populære artikler, seneste kommentarer er typiske eksempler på autonome komplementære indhold.role =”contentinfo”
role =”form”
role = "søg" i stedet.role =”Søg”
role =”Ansøgning”
Stater og Egenskaber
Syntaks af Aria-præfiksede attributter
Sådan gør du brug af ARIA-stater og -egenskaber
1. Opbyg relationer mellem elementer med relativ attributter
aria-labelledby Egenskab identificerer elementet, der markerer det aktuelle element.aria-labelledby - blandt mange andre ting - kan binde overskrifter til ARIA landemærkeområder på følgende måde:Dette er et overskrift
Hovedindhold ... 2. Synkroniser stater og egenskaber med elementets livscyklus
3. Match de visuelle og de tilgængelige grænseflader
.Brug ikke for meget ARIA
eller , moderne browsere tilføjer som standard den relevante ARIA semantik. I dette tilfælde er det ikke fornuftigt at indstille ARIA-landemærkerollen separat. element. I stedet for syntaks det er perfekt nok til at bruge bare . Det er også overflødigt at bruge HTML's native attributter sammen med den relevante ARIA-attribut.
