ARIA roller og attributter: bedste valg sammenlignet

Los ARIA-roller og -attributter af WAI-ARIA 1.2-specifikationen af ​​W3C overstiger hundrede, selvom en håndfuld løser de fleste tilgængelighedsproblemer i XHTML- og CSS-widgets. En rolle definerer hvad et element er, og en attribut dets tilstand eller relationer, men ARIA ændrer ikke browserens adfærd: hver tilføjet rolle kræver implementering af interaktion med JavaScript.

Accessible Rich Internet Applications (ARIA) er en W3C-specifikation, der tilføjer semantik til HTML-elementer, der ikke har dem i en indbygget form. En rolle beskriver, hvad er et element (en ‘knap’, en ‘faneblad’, en ‘dialog’), mens en attribut beskriver dets tilstand eller dets relationer (‘aria-udvidet’, ‘aria-kontroller’, ‘aria-mærket af’). Den første regel i ARIA, udgivet af W3C i Using ARIA, er kontant: hvis der er et indbygget HTML-element, der allerede gør jobbet, skal du bruge det og ikke tilføje ARIA.

Årsagen er, at ARIA ikke ændrer browseradfærd. En <div role="button"> modtager ikke fokus med Tab, reagerer ikke på Enter-tasten eller mellemrum og sendes ikke med en formular. Det ændrer kun, hvad hjælpemidlerne melder ud. Al interaktion skal implementeres med JavaScript og administreres omhyggeligt. I XHTML/CSS-projekter, hvor HTML er statisk og JS er minimal, betyder det, at hver af de aria-roller og attributter, der tilføjes, er et løfte, som din kode skal opfylde.

Den anden regel i ARIA beder om ikke at ændre den oprindelige semantik, medmindre den er uundgåelig. Et <h2 role="tab"> bryder strukturen af ​​overskrifter og forvirrer skærmlæsere, der navigerer efter regioner. Den tredje regel kræver, at alle ARIA-kontroller kan betjenes med et tastatur. Den fjerde beder om ikke at bruge aria-hidden="true" på elementer, der får fokus. Den femte, og den mest glemte, minder os om, at ethvert interaktivt element kræver et tilgængeligt navn: en rolle uden en etiket er en mute-knap.

Sådan vælger du: kriterier før listen

At vælge en rolle eller egenskab er ikke en smagssag. Disse kriterier, anvendt i rækkefølge, undgår de fleste fejl vedrørende arieroller og attributter:

1. Er der et indbygget HTML-element? Hvis ja, brug det. <button>, <details>, <dialog>, <input type="checkbox"> dækker flere sager, end folk tror.
2. Har widgetten brug for dynamiske tilstande? Hvis den skifter mellem åben/lukket, valgt/ikke valgt eller udvidet/kollapset, skal du bruge tilstandsattributter (aria-udvidet, aria-valgt, aria-pressed).
3. Har det brug for relationer mellem elementer? Relationsattributter (aria-kontroller, aria-mærket af, aria-describedby, aria-owns) forbinder stykker, som tilgængelighedstræet ikke kan udlede fra DOM.
4. Har det brug for live-meddelelser? Live-regioner (aria-live, role="status", role="alert") løser opdateringer uden at flytte fokus.
5. Kan jeg vedligeholde det? Et komplekst ARIA-mønster uden tastatur- eller skærmlæsertest er værre end at have ingenting.

Vedligeholdelsesomkostningerne er det mest ignorerede kriterium. En vellavet role="tablist" kræver piletaststyring, roterende tabindex, synkronisering af aria-selected og aria-kontroller og korrekt skjulning af inaktive paneler. Hvis teamet ikke kan håndtere det, er et sæt links med ankre mere tilgængelige og billigere.

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

Sammenligning af de mest nyttige ARIA-roller

Følgende tabel opsummerer de roller, der optræder igen og igen i reelle audits, med deres native ækvivalent, når den findes, og den mest almindelige fælde.

Rol	Para qué sirve	Alternativa nativa	Trampa frecuente
knap	Kontrol que ejecuta una acción	<knap>	Ingen añadir manejo de Enter/Espacio ni tabindex="0"
link	Naviger til en anden URL	<a href>	Usarlo para acciones que no navegan
dialog	Ventana modal eller ingen modal	<dialog>	Ingen atrapar el foco ni devolverlo al cerrar
tablist / faneblad / fanepanel	Interfaz de pestañas	Ninguna directa	Ingen syncronizar aria-valgt med panelet synligt
menu / menuem	Menu de aplicación	<vælg> af liste over enlaces	Bruger til menuen til navegación web
advarsel	Mensaje urgente e inmediato	rolle="status" for ikke hastende	Abusar de él y saturar al lector de pantalla
status	Actualización informativa	<output>	Ingen indsættelse i DOM ante de aktualisering
fremskridtslinje	Progreso de una tarea	<fremskridt>	Ingen actualizar aria-valuenow
værktøjstip	Descripción emergente	titel (begrænset)	No asociarlo con aria-describedby
combobox	Campo con lista de sugerencias	<dataliste> (begrænset)	Ingen meddelelse om resultatnummer

Valget mellem role="alert" og role="status" er et godt eksempel på en beslutning med nuancer vedrørende arieroller og attributter. alert afbryder den aktuelle skærmlæserlæsning; status venter på, at brugeren er færdig. For en formularvalideringsfejl er “alert” passende. For “3 resultater fundet”, mens brugeren skriver, er status korrekt og alert resulterer i at være påtrængende.

Uundværlige ARIA-attributter og hvordan de kombineres

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

Værd at se: AudioEye — Accesibilidad gestionada: automatisering combinada con revision humana.

Etiquetado. aria-label giver et navn, når der ikke er nogen synlig tekst. aria-labeledby refererer til iden for et andet element og er at foretrække, når teksten allerede findes på skærmen, fordi den opretholder en enkelt kilde til sandhed. aria-describedby tilføjer en længere beskrivelse, såsom hjælpeteksten til et felt. Forskellen betyder noget: navnet er det, brugeren hører, når han fokuserer; beskrivelsen er yderligere kontekst, der kan afbrydes.

Estados. “aria-udvidet” (sandt/falsk) til harmonikaer og rullemenuer. ‘aria-valgt’ for faner og muligheder. “aria-checked” for tilpassede afkrydsningsfelter, med værdien “mixed” for tri-state states. ‘aria-trykket’ for skifteknapper. “aria-deaktiveret”, når elementet stadig kan fokuseres, men ikke betjenes, i modsætning til den oprindelige attribut “deaktiveret”, som fjerner det fra tabulatorrækkefølgen.

Relationer. aria-kontroller angiver, hvilket element en knap styrer. ‘aria-owns’ omorganiserer tilgængelighedstræet, når DOM’et ikke afspejler det visuelle forhold. aria-activedescendant giver dig mulighed for at bevare fokus på en beholder, mens den annoncerer det aktive element, et almindeligt mønster i kombinationsbokse.

Live-regioner. aria-live="polite" eller "assertive" definerer haster. aria-atomic="true" får hele blokken til at blive annonceret i stedet for kun den modificerede del. aria-relevante filtre, hvilke ændringer annonceres.

En detalje, der ofte overses: ARIA-attributter virker kun på elementer med en gyldig rolle. aria-udvidet på en <div> uden en rolle vil ikke blive annonceret. Og ARIA booleske værdier er tekststrenge (“true”, “false”), ikke JavaScript booleske værdier; at skrive aria-expanded="false" som en boolesk egenskab vil give inkonsistente resultater.

Fejl i forbindelse med adgang til en widget

Fejlen er mere kostbar og bruger ARIA til at oprette en HTML-mal estructurado. Añadir role="navigation" a un <div> cuando ya había un <nav> disponible duplica regiones y confunde la navegación por landmarks.

Relateret: IAAP CPACC / WAS Certification — Den professionelle certificering que acredita tu experiencia and accessibilidad.

Den anden fejl er fokus. En modal widget, der ikke flytter fokus, når den åbnes, ikke fanger den, mens den er åben og ikke returnerer den til udløseren ved lukning, efterlader tastaturbrugeren at navigere gennem usynligt indhold. Det indbyggede <dialog>-element løser en del af dette, men ikke alt: At returnere fokus er stadig udviklerens ansvar.

El tercer error es ocultar con ‘aria-hidden’ elementos que suen siendo enfocables. Un menu 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 fejl er det fraværende tilgængelige navn. En <knap> med et enkelt SVG-ikon kræver en aria-label eller en <span class="visually-hidden"> med tekst. En dekorativ SVG kræver aria-hidden="true" og focusable="false", så Internet Explorer og nogle ældre browsere inkluderer det ikke i tabulatorrækkefølgen.

Værd at se: UserWay — Accessibilidad widget med en gratis plan for empezar hoy mismo.

Herramientas for mulige roller og attributter ARIA

Der er intet værktøj i stedet for at teste med en egentlig skærmlæser, men kombinationen af forskellige værktøjer registrerer de fleste fejl i arieroller og attributter.

Statisk validering. W3C ARIA-validatoren (en del af Nu HTML Checker) registrerer ikke-eksisterende roller, dårligt skrevne attributter og forbudte kombinationer. axe DevTools og Lighthouse påpeger roller uden tilgængelige navne og manglende obligatoriske attributter.

Inspektion af tilgængelighedstræ. Chrome og Firefox DevTools giver dig mulighed for at se tilgængelighedstræet nøjagtigt, som det modtages af hjælpeteknologi. Det er den hurtigste måde at kontrollere, om en rolle faktisk blev anvendt, og hvilket tilgængeligt navn browseren beregnede.

Manuel test. Naviger kun i hele widgetten med tastaturet (Tab, Shift+Tab, pile, Enter, Mellemrum, Escape) og derefter med NVDA på Windows, JAWS, hvis det er tilgængeligt, eller VoiceOver på macOS og iOS. Kombinationen af ​​en desktop-læser og en mobil dækker de fleste reelle tilfælde.

Referencedokumentation. W3C ARIA Authoring Practices Guide (APG) inkluderer omfattende mønstre med tastatur- og kodeeksempler. Dette er kilden, der bør konsulteres, før man opfinder et nyt mønster.

Cómo decidir en un proyecto XHTML/CSS real

På XHTML-websteder med letvægts-CSS og JavaScript er den mest omkostningseffektive strategi at starte med native HTML og kun tilføje ARIA, hvor native ikke når. En formular med korrekt <label>, <fieldset> og <legend> kræver meget lidt ARIA. En datatabel med <th scope> gør det heller ikke. ARIA-roller kommer ind, når der vises mønstre, som HTML ikke dækker: faner, harmonikaer, kombinationsbokse med filtrering, modale dialoger og dynamiske meddelelser.

Det er tilrådeligt at dokumentere hver brug af ARIA-roller og -attributter i selve koden med en kommentar, der forklarer, hvorfor den er der. Når nogen refaktoriserer komponenten seks måneder senere, vil de vide, om ‘aria-kontrollerne’ stadig er nødvendige eller er blevet forældreløse. Forældreløse ARIA-attributter – som peger på ider, der ikke længere eksisterer – er en tavs kilde til fejl, som ingen validator opdager pålideligt.

Behandl endelig tilgængelighed som en del af komponentens definition af “udført”, ikke som en efterfølgende revision. En widget med ARIA-roller testet med tastaturet og skærmlæseren fra den første commit koster meget mindre end én, der repareres efter revisionen.

Key Takeaways

• ARIA-roller og -attributter tilføjer ikke adfærd: en rolle uden tastatur- og fokusstyring er værre end at have ingenting.
• Den første regel i ARIA er at bruge native HTML, når det findes; <knap>, <dialog> og <detaljer> dækker flere tilfælde, end man skulle tro.
• Attributter er grupperet i mærkning, tilstande, relationer og levende regioner; hver familie løser et andet problem.
• role="alert" afbryder og role="status" venter: forkert valg mætter skærmlæserbrugeren.
• ARIA booleske værdier er strenge (“true”/”false”), og attributter virker kun på elementer med en gyldig rolle.
• Test med et tastatur og en rigtig skærmlæser er obligatorisk; validatorer opdager kun en del af fejlene.

Kilder og yderligere læsning

• WAI-ARIA — Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) er en teknisk specifikation udgivet af World Wide Web Consortium (W3C), der…

Ofte stillede spørgsmål

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

En rolle definerer, hvad et element er for hjælpeteknologi, såsom role="tab" eller role="dialog". En attribut beskriver dens tilstand eller dens relationer, såsom “aria-udvidet” eller “aria-mærket af”. Roller anvendes på det element, der repræsenterer komponenten; attributter anvendes normalt på det samme element eller dem, der er relateret til det.

Vil du debo bruge ARIA og lugar de HTML-nativo?

Kun når der ikke er noget HTML-element, der dækker mønsteret. Den første regel i W3C ARIA er eksplicit: hvis der er et indbygget element, så brug det. ARIA-roller er nødvendige for faner, harmonikaer, kombinationsbokse med filtrering og modale dialoger, blandt andre mønstre, som HTML ikke kan implementere alene.

¿Hvordan betyder det, om et element er tilgængeligt?

Et tilgængeligt navn er den tekst, som skærmlæseren annoncerer, når elementet fokuseres. Det beregnes ud fra indholdet, fra aria-label, fra aria-labeledby eller fra et tilknyttet <label>, i en prioriteret rækkefølge defineret af specifikationen. En interaktiv rolle uden et tilgængeligt navn er en kontrol, som brugeren ikke kan identificere.

¿Har du ikke svaret på min role="button"?

Fordi ARIA ikke tilføjer adfærd. En <div role="button"> har brug for tabindex="0" for at modtage fokus og keydown-handlere for Enter og Space. Den enkleste og mest robuste løsning er at bruge det indbyggede <button>-element, som allerede inkluderer fokus, tastaturaktivering og formularindsendelse.

Er det dårligt at bruge aria-hidden="true"?

Det er korrekt at skjule dekorativt eller duplikeret indhold fra tilgængelighedstræet, men det bør aldrig anvendes på elementer, der får fokus. Hvis et fokuserbart element efterlades med aria-hidden="true", kan tastaturbrugeren fokusere på noget, som skærmlæseren ikke meddeler. Kombiner det altid med egentlig visuel skjuling.

Hvilke værktøjer validerer ARIA-roller og -attributter?

W3C Nu HTML Checker inkluderer validering af ARIA-roller og attributter og registrerer ikke-eksisterende roller eller forbudte kombinationer. axe DevTools og Lighthouse påpeger roller uden et tilgængeligt navn og manglende obligatoriske attributter. For at verificere det endelige resultat viser tilgængelighedstræinspektøren i browseren DevTools præcis, hvad hjælpeteknologien modtager.