Forståelse af ARIA, til webtilgængelighed

Uden ARIA er autofuldførelse felter, som dette eksempel fra Amazon, yderst vanskelige for brugerne af skærmlæsere.

Uden ARIA er autofuldførelse felter, som dette eksempel fra Amazon, yderst vanskelige for brugerne af skærmlæsere.

Hvis du undersøger web tilgængelighed, vil du sandsynligvis komme ind i ARIA - Accessible Rich Internet Applications. Nogle vil kalde det løsningen på alle webadgangsproblemer. Andre vil fordømme det for at skabe problemer. Begge disse beskrivelser har et element af sandhed, fordi det ligesom alle webteknologier afhænger af, hvordan du bruger det.

ARIA er en specifikation fra Web Accessibility Initiative fra World Wide Web Consortium. Det giver et sæt HTML-attributter, der hjælper med hjælpekompetence, forstår de komplekse interaktioner, der er fælles for moderne websites.

For synlige brugere udsættes relationer mellem elementer på en webside gennem placering og design. ARIA giver en måde at dele disse relationer med til hjælpekommunikation, såsom skærmlæsere.

ARIA formidler nogle få nøgleegenskaber: roller, stater og egenskaber og relationer.

  • roller Fortæl en bruger, hvordan en side er struktureret. Overskrifter, bannere, søgefelter, sidebjælker, hovedindholdet - alle disse kan overføres ved hjælp af roller.
  • Stater og ejendomme Fortæl en bruger, hvad den nuværende tilstand er for et element. For eksempel, med en knap, der åbner et panel, er dette panel for øjeblikket åbent eller lukket (aria-ekspanderede)? Er en region dynamisk, så indholdet af dette felt måske opdateres uden en sideopdatering (aria-live)?
  • Relationer Fortæl en bruger, om emner er relateret til hinanden. Dette kan omfatte beskrivelser, som f.eks. Instruktioner til udfyldning af input (aria-describedby) eller oplysninger om, hvad det næste element vil være for læseplanen (aria-flowto).

Autosuggest Fields

Overvej et autosuggest-indtastningsfelt, f.eks. På Google eller Amazon. Du begynder at skrive, og et script i baggrunden finder resultater svarende til det, du skriver og foreslår dem som valgmuligheder. Disse forslag trækkes op i et nærliggende HTML-element, som synske brugere kan se og vælge fra.

Et autosuggest-felt er ikke et standard HTML-element. Hvis det var, ville de foreslåede resultater direkte forbinde med forespørgselsfeltet. Et autosuggest-felt er i grunden en meget rigere version af en markeret dropdown, hvor du kun kan indsnævre feltet ved de første bogstaver i indstillingerne. Med et autosuggest-søgefelt er forespørgselsreglerne typisk meget mere komplekse.

Et markeringselement er en standard del af HTML. Indstillingerne er programmatisk forbundet med indtastningsfeltet, og disse oplysninger deles direkte med hjælpeteknologi, som en skærmlæser.

Autosuggest-feltet er imidlertid anderledes: Det er altid tilpasset oprettet. Uden ARIA er der intet eksplicit forhold mellem resultaterne og input, hvilket gør det ekstremt svært for en skærmlæserbruger at vide, at der sker noget. Ved hjælp af ARIA kan vi oprette et forhold mellem inputfeltet og forslagene, og du kan informere hjælpeteknologi om, at den opdaterede region indeholder nye oplysninger, der skal rapporteres til den besøgende.

Med disse enkle attributter, med andre ord, forvandler du et felt, hvor en skærmlæser bruger ikke har nogen idé, til noget, hvor enhver bruger får gavn af de automatiske forslag.

For særligt dynamiske regioner er ARIA ikke kun værdifuldt, men kritisk for tilgængeligheden af ​​et websted. Når JavaScript bruges til at opdatere kun en del af skærmen, har hjælpeteknologi ofte ingen mulighed for at vide, at noget er ændret. Deklarere en region som aria-live underretter hjælpeteknologi hvilke områder af siden der skal overvåges for ændringer.

Når ARIA bruges korrekt, kan ARIA enormt forbedre tilgængeligheden af ​​et websted. Men hvis det ikke er det, kan det skabe helt nye problemer.

ARIA Ikke en erstatning for HTML

Et normalt inputelement er mærket som dette.

<label for = 'your-name'> Dit navn </ label> <input name = 'din-navn' id = 'din-navn' />
Du kunne, men bør ikke gøre det her.
<span id = "dit navn"> Dit navn </ span> <input name = 'din-navn' aria-labeledby = 'din-navn' />

Hvorfor er dette uacceptabelt? Fordi ARIA kun understøttes af hjælpeteknologi. Men det er ikke engang nødvendigvis understøttet af alle hjælpemidler, og det er slet ikke anerkendt af din browser. Så hvis du bare bruger din browser uden hjælpemiddel eller bruger ældre teknologi, der ikke understøtter ARIA, er dette inputfelt slet ikke mærket.

Hvad er en god brug af ARIA? Efter den grundlæggende formularindgang ovenfor er en god brug, når du skal formidle mere omfattende retninger om dit felt, fx følgende.
<label for = "your-birthday"> Din fødselsdag </ label> <input id = "din fødselsdag" name = "din fødselsdag" aria-describedby = 'date-format' type = "text" /> <span id = "date-format"> Indtast dato i YY / MM / DD-format </ span>

Dette er effektivt, fordi etiketten i sig selv ikke formidler alle de oplysninger, der er nødvendige for at udfylde feltet. Men det forbedres af en beskrivelse, som nu udtrykkeligt er forbundet med inputfeltet, og læses til brugeren af ​​sin skærmlæser efter etiketten.

ARIA forbedrer HTML

HTML har en masse indbygget betydning. Formularfelter har etiketter, overskrifter låne struktur, og billeder har alternativ tekst. Når du bygger en tilgængelig hjemmeside, er dit første skridt at forbinde hver prik i din HTML. Når de semantiske betydninger allerede findes i et HTML-element, behøver du ikke at udvide det med ARIA. Når du har HTML-raffineret, skal du tilføje ARIA-attributter, når du ikke kan formidle informationen i HTML.

Må ikke transporteres væk

Det er fristende at udforske ARIA attributter og tilføje dem overalt. Lade være med. ARIA forstærker betydningen af ​​HTML-elementer, men det betyder ikke, at HTML ikke allerede har mening. Hvis du ser på et standard HTML-element som <h1>, det element er i sig selv det samme som skrivning <h1 role = 'overskrift' aria-niveau = '1' />. Du behøver ikke at medtage denne rolle eller aria-niveau attribut - de er overflødige.

Der er heller ingen grund til at bruge <h1 role = 'overskrift' aria-niveau = '2'>. Denne kode siger, at H1-overskriften har betydningen af ​​en H2. Nå, hvis det betyder H2, så brug en H2. Det er meget enklere.

Kilde

Giv en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.