ARIA-roller og -attributter: de beste valgene sammenlignet

Los ARIA-roller og -attributter av WAI-ARIA 1.2-spesifikasjonen av W3C-høytidens hundreårsjubileum, har en mulighet til å gjenopprette mayoría-problemene med widgets XHTML og CSS. Un roll definere qué es un elemento y un atributo su estado o relaciones, men ARIA no modifica el comportamiento del navegador: cada roll añadido exige implementar interacción con JavaScript.

Accessible Rich Internet Applications (ARIA) er en W3C-spesifikasjon som legger til semantikk til HTML-elementer som ikke har dem i en opprinnelig form. En rolle beskriver hva er et element (en button, tab, dialog), mens et attributt beskriver dets tilstand eller relasjoner (aria-expanded, aria-controls, aria-labelledby). Den første regelen for ARIA, publisert av W3C i Using ARIA, er direkte: hvis det er et naturlig HTML-element som allerede gjør jobben, bruk det og ikke legg til ARIA.

Årsaken er at ARIA ikke endrer nettleserens oppførsel. En <div role="button"> mottar ikke fokus med Tab, svarer ikke på Enter-tasten eller mellomrom, og sendes ikke med et skjema. Det endrer bare det hjelpemiddelet varsler. All interaksjon må implementeres med JavaScript og administreres nøye. I XHTML/CSS-prosjekter der HTML er statisk og JS er minimal, betyr dette at hver av aria-rollene og attributtene som legges til er et løfte som koden din må oppfylle.

Den andre regelen i ARIA ber om å ikke endre den opprinnelige semantikken med mindre den er uunngåelig. En <h2 role="tab"> bryter strukturen til overskrifter og forvirrer skjermlesere som navigerer etter regioner. Den tredje regelen krever at alle ARIA-kontroller kan betjenes med et tastatur. Den fjerde ber om å ikke bruke aria-hidden="true" på elementer som får fokus. Den femte, og den mest glemte, minner oss om at ethvert interaktivt element krever et tilgjengelig navn: en rolle uten etikett er en mute-knapp.

Hvordan velge: kriterier før listen

Å velge en rolle eller egenskap er ikke en smakssak. Disse kriteriene, brukt i rekkefølge, unngår de fleste feil angående ariaroller og attributter:

1. Finnes det et naturlig HTML-element? Hvis ja, bruk det. <button>, <detaljer>, <dialog>, <input type="checkbox"> dekker flere tilfeller enn folk tror.
2. Trenger widgeten dynamiske tilstander? Hvis den skifter mellom åpen/lukket, valgt/ikke valgt eller utvidet/skjult, trenger du tilstandsattributter (aria-utvidet, aria-valgt, aria-trykket).
3. Trenger det relasjoner mellom elementer? Relasjonsattributter (aria-kontroller, aria-merket av, aria-describedby, aria-owns) kobler sammen deler som tilgjengelighetstreet ikke kan utlede fra DOM.
4. Trenger det direkte kunngjøringer? Live-regioner (aria-live, role="status", role="alert") løser oppdateringer uten å flytte fokus.
5. Kan jeg vedlikeholde det? Et komplekst ARIA-mønster uten tastatur- eller skjermlesertester er verre enn å ha ingenting.

Vedlikeholdskostnaden er det mest ignorerte kriteriet. En godt laget role="tablist" krever piltaststyring, roterende tabindex, synkronisering av aria-valgte og aria-kontroller, og korrekt skjuling av inaktive paneler. Hvis teamet ikke kan håndtere det, er et sett med lenker med ankere mer tilgjengelig og billigere.

Relatert: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 timer.

Sammenligning av de mest nyttige ARIA-rollene

Tabellen nedenfor oppsummerer rollene som dukker opp gang på gang i reelle revisjoner, med deres native ekvivalent der den finnes og den vanligste fellen.

Rolle	Formål	Native alternativ	Vanlig felle
button	Kontroll som utfører en handling	<button>	Mangler håndtering av Enter/Mellomrom eller tabindex="0"
link	Navigasjon til en annen URL	<a href>	Brukes til handlinger som ikke navigerer
dialog	Modal eller ikke-modal vindu	<dialog>	Fanger ikke fokus eller returnerer det ikke ved lukking
tablist / tab / tabpanel	Fane-grensesnitt	Ingen direkte	Synkroniserer ikke aria-selected med synlig panel
menu / menuitem	Applikasjonsmeny	<select> eller lenkeliste	Brukes til navigasjonsmenyer på nett
alert	Hastemelding	role="status" for ikke-hastemeldinger	Overbruk som overvelder skjermleseren
status	Informativ oppdatering	<output>	Settes ikke inn i DOM før oppdatering
progressbar	Fremdrift for en oppgave	<progress>	Oppdaterer ikke aria-valuenow
tooltip	Flytende beskrivelse	title (begrenset)	Kobles ikke til med aria-describedby
combobox	Felt med forslagsliste	<datalist> (begrenset)	Kunngjør ikke antall resultater

Valget mellom role="alert" og role="status" er et godt eksempel på en avgjørelse med nyanser angående arieroller og attributter. alert avbryter gjeldende skjermleseravlesning; status venter på at brukeren er ferdig. For en skjemavalideringsfeil er alert passende. For “3 resultater funnet” mens brukeren skriver, er status korrekt og alert resulterer i påtrengende.

Atributos ARIA imprescindibles y cómo se combinan

Attributtene er knyttet til fire familier, og hver enkelt løser et særskilt problem.

Verdt en titt: AudioEye — Tilgjengelighet: automatisert kombinasjon med menneskelig revisjon.

Etiquetado. aria-label gir et navn når det ikke er noen synlig tekst. aria-labeledby refererer til iden til et annet element og er å foretrekke når teksten allerede eksisterer på skjermen, fordi den opprettholder en enkelt kilde til sannhet. aria-describedby legger til en lengre beskrivelse, for eksempel hjelpeteksten til et felt. Forskjellen er viktig: navnet er det brukeren hører når han fokuserer; beskrivelsen er tilleggskontekst som kan avbrytes.

Estados. aria-utvidet (true/false) for trekkspill og rullegardinmenyer. ‘aria-valgt’ for faner og alternativer. “aria-kontrollert” for egendefinerte avmerkingsbokser, med verdien “blandet” for tre-statstilstander. aria-trykket for veksleknapper. «aria-deaktivert» når elementet fortsatt er fokuserbart, men ikke operativt, i motsetning til det opprinnelige attributtet «disabled», som fjerner det fra tabulatorrekkefølgen.

Relasjoner. aria-kontroller indikerer hvilket element en knapp kontrollerer. aria-owns omorganiserer tilgjengelighetstreet når DOM ikke reflekterer det visuelle forholdet. aria-activedescendant lar deg opprettholde fokus på en beholder mens den kunngjør det aktive elementet, et vanlig mønster i kombinasjonsbokser.

Live-regioner. aria-live="polite" eller "assertive" definerer haster. aria-atomic="true" fører til at hele blokken blir annonsert i stedet for bare den modifiserte delen. aria-relevante filtre hvilke endringer som annonseres.

En detalj som ofte blir oversett: ARIA-attributter fungerer kun på elementer med en gyldig rolle. aria-utvidet på en <div> uten en rolle vil ikke bli annonsert. Og boolske ARIA-verdier er tekststrenger (“true”, “false”), ikke boolske JavaScript-verdier; å skrive aria-expanded="false" som en boolsk egenskap vil gi inkonsistente resultater.

Feil for å få tilgang til en widget

Denne feilen koster mer og bruker ARIA for å installere en HTML-struktur. Añadir role="navigation" a un <div> cuando ya yabía un <nav> disponible duplica regiones y confunde la navegación por landemerker.

Relatert: IAAP CPACC / WAS Certification — Den profesjonelle sertifiseringen er godkjenning for å oppleve og få tilgang.

Den andre feilen er fokuset. En modal widget som ikke flytter fokus når den åpnes, ikke fanger den mens den er åpen og ikke returnerer den til utløseren ved lukking, lar tastaturbrukeren navigere gjennom usynlig innhold. Det opprinnelige <dialog>-elementet løser deler av dette, men ikke alt: Å returnere fokus er fortsatt utviklerens ansvar.

El tercer error es ocultar con ‘aria-hidden’ elementos que suen siendo enfocables. Un menú cerrado con aria-hidden="true" pero sin display: none o visibility: hidden mantiene sus enlaces en el orden de tabulación, y el usuario enfoca elementos que no puede ver. La combinación correcta es ocultar visualmente y del árbol de accesibilidad a la vez.

Den fjerde feilen er det fraværende tilgjengelige navnet. En «» med et enkelt SVG-ikon krever en «aria-etikett» eller en «» med tekst. En dekorativ SVG krever aria-hidden="true" og focusable="false", så Internet Explorer og noen eldre nettlesere inkluderer det ikke i tabulatorrekkefølgen.

Verdt en titt: UserWay — Tilgjengelighetswidget med gratis plan for empezar Hoy Mismo.

Herramientas for probar roller y atributos ARIA

Det finnes ikke noe verktøy i stedet for testing med en faktisk skjermleser, men kombinasjonen av ulike verktøy oppdager de fleste feil i ariaroller og -attributter.

Statisk validering. W3C ARIA-validatoren (del av Nu HTML Checker) oppdager ikke-eksisterende roller, dårlig skrevne attributter og forbudte kombinasjoner. ax DevTools og Lighthouse påpeker roller uten tilgjengelige navn og manglende obligatoriske attributter.

Inspeksjon av tilgjengelighetstre. Chrome og Firefox DevTools lar deg se tilgjengelighetstreet nøyaktig slik det mottas av hjelpeteknologi. Det er den raskeste måten å sjekke om en rolle faktisk ble brukt og hvilket tilgjengelig navn nettleseren beregnet.

Manuell testing. Naviger i hele widgeten kun med tastaturet (Tab, Shift+Tab, piler, Enter, Space, Escape) og deretter med NVDA på Windows, JAWS hvis tilgjengelig, eller VoiceOver på macOS og iOS. Kombinasjonen av en stasjonær leser og en mobil dekker de fleste reelle tilfeller.

Referansedokumentasjon. W3C ARIA Authoring Practices Guide (APG) inkluderer omfattende mønstre med tastatur- og kodeeksempler. Dette er kilden som bør konsulteres før man finner opp et nytt mønster.

Cómo decidir en un proyecto XHTML/CSS real

På XHTML-sider med lettvekts CSS og JavaScript er den mest kostnadseffektive strategien å starte med native HTML og legge til ARIA bare der native ikke når. Et skjema med riktig <label>, <fieldset> og <legend> krever svært lite ARIA. En datatabell med «» gjør det heller ikke. ARIA-roller kommer inn når mønstre vises som HTML ikke dekker: faner, trekkspill, kombinasjonsbokser med filtrering, modale dialoger og dynamiske varsler.

Det anbefales å dokumentere hver bruk av ARIA-roller og -attributter i selve koden med en kommentar som forklarer hvorfor den er der. Når noen refaktoriserer komponenten seks måneder senere, vil de vite om ‘aria-kontrollene’ fortsatt er nødvendige eller har blitt foreldreløse. Foreldreløse ARIA-attributter – som peker på id-er som ikke lenger eksisterer – er en stille kilde til feil som ingen validator oppdager pålitelig.

Til slutt, behandle tilgjengelighet som en del av komponentens definisjon av “ferdig”, ikke som en etterfølgende revisjon. En widget med ARIA-roller testet med tastaturet og skjermleseren fra første commit koster mye mindre enn en reparert etter revisjonen.

Viktige takeaways

• ARIA-roller og -attributter legger ikke til atferd: en rolle uten tastatur- og fokusstyring er verre enn å ha ingenting.
• Den første regelen i ARIA er å bruke naturlig HTML når den eksisterer; <knapp>, <dialog> og <detaljer> dekker flere tilfeller enn man skulle tro.
• Attributter er gruppert i merking, tilstander, relasjoner og levende regioner; hver familie løser et annet problem.
• role="alert" avbryter og role="status" venter: feilaktig valg metter skjermleserbrukeren.
• ARIA boolske verdier er strenger (“true”/”false”), og attributter fungerer bare på elementer med en gyldig rolle.
• Testing med et tastatur og en ekte skjermleser er obligatorisk; validatorer oppdager bare en del av feilene.

Kilder og videre lesing

• WAI-ARIA — Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) er en teknisk spesifikasjon utgitt av World Wide Web Consortium (W3C) som…

Vanlige spørsmål

¿Cuál es la diferencia entre un roll y un atributo ARIA?

En rolle definerer hva et element er for hjelpeteknologi, for eksempel role="tab" eller role="dialog". Et attributt beskriver tilstanden eller relasjonene dens, for eksempel «aria-utvidet» eller «aria-merket av». Roller brukes på elementet som representerer komponenten; attributter brukes vanligvis på det samme elementet eller de som er relatert til det.

Vil du debo bruke ARIA og laste ned HTML?

Bare når det ikke er noe HTML-element som dekker mønsteret. Den første regelen i W3C ARIA er eksplisitt: hvis det er et naturlig element, bruk det. ARIA-roller er nødvendig for faner, trekkspill, kombinasjonsbokser med filtrering og modale dialoger, blant andre mønstre som HTML ikke kan implementere alene.

¿Qué significa que un elemento tenga un nombre accessible?

Et tilgjengelig navn er teksten som skjermleseren kunngjør når elementet fokuseres. Det beregnes fra innholdet, fra aria-label, fra aria-labeledby eller fra en tilknyttet <label>, i en prioritert rekkefølge definert av spesifikasjonen. En interaktiv rolle uten et tilgjengelig navn er en kontroll som brukeren ikke kan identifisere.

¿Por qué mi role="button" reagerte du ikke?

Fordi ARIA ikke legger til atferd. En <div role="button"> trenger tabindex="0" for å motta fokus og keydown-behandlere for Enter og Space. Den enkleste og mest robuste løsningen er å bruke det innebygde -elementet, som allerede inkluderer fokus, tastaturaktivering og skjemainnsending.

Er det galt å bruke aria-hidden="true"?

Det er riktig å skjule dekorativt eller duplisert innhold fra tilgjengelighetstreet, men det bør aldri brukes på elementer som får fokus. Hvis et fokuserbart element står igjen med aria-hidden="true", kan tastaturbrukeren fokusere noe som skjermleseren ikke kunngjør. Kombiner det alltid med faktisk visuell skjuling.

Hvilke verktøy validerer ARIA-roller og -attributter?

W3C Nu HTML Checker inkluderer validering av ARIA-roller og -attributter og oppdager ikke-eksisterende roller eller forbudte kombinasjoner. axe DevTools og Lighthouse påpeker roller uten et tilgjengelig navn og manglende obligatoriske attributter. For å verifisere det endelige resultatet, viser tilgjengelighetstreinspektøren i nettleserens DevTools nøyaktig hva hjelpeteknologien mottar.