Liste over ARIA-roller: Beste referanser sammenlignet

Rollelisten ARIA består av 82 definerte verdier i WAI-ARIA 1.2-spesifikasjonen for W3C, organisert i seks funksjonelle kategorier: dokumentroller, landemerker, widgets, struktur, vinduer og abstrakte roller. Valg av riktig referanse avhenger av om du trenger en rask tabell, dokumentasjon med kodeeksempler eller en beslutningsguide for når hver rolle skal brukes.

Viktige takeaways

• Spesifikasjonen WAI-ARIA 1.2 definerer 82 roller, men kun et lite utvalg som brukes i den daglige praksisen for et tilgjengelig XHTML/CSS-nettsted.
• Den første ARIA-regelen gjelder fortsatt: hvis det finnes et innebygd HTML-element med semantikken du trenger, bruk det i stedet for å legge til en rolle.
• Los roles abstractos (som role="widget" eller role="input") kan skrives på en el marcado; solo sirven como base taxonómica.
• En nyttig referanse for front-end bør inkludere rollen, dens obligatoriske ARIA-attributter, tillatte tilstander og et eksempel på faktisk koding.
• Landemerke- og widget-roller utgjør flertallet av feilene som oppdages av automatiserte revisjonsverktøy som axe-core eller Lighthouse.

Hva er en ARIA-rolle og hvorfor trenger du en pålitelig liste

En ARIA-rolle er en verdi som tildeles et element via attributtet role for å kommunisere til hjelpemiddelteknologi hvilken type komponent det representerer. Nettleseren eksponerer denne rollen via tilgjengelighetstreet, og en skjermleser som NVDA, JAWS eller VoiceOver oversetter den til en konkret kunngjøring: “knapp”, “fane”, “region”, “dialogboks”.

WAI-ARIA-spesifikasjonen, vedlikeholdt av W3C i ARIA-arbeidsgruppen, definerer hver rolle sammen med tillatte tilstands- og egenskapsattributter. Versjon 1.2 er den nåværende stabile anbefalingen, og ARIA 1.3 er under utvikling. For en utvikler som jobber med XHTML og CSS er ikke rollelisten en dekorativ katalog: hver feilaktig anvendt verdi skaper en konflikt mellom elementets innebygde semantikk og den deklarerte, og skjermlesere løser denne konflikten forskjellig avhengig av nettleser.

Den offisielle dokumentasjonen for ARIA-roller på MDN (Mozilla Developer Network) er den mest brukte tekniske referansen på spansk og engelsk, men den er ikke den eneste. Det finnes referanseark, mønsterguider og valideringsverktøy som dekker ulike behov. Ved å sammenligne dem kan du velge den som passer best til din arbeidsflyt.

De seks kategoriene av ARIA-roller

Den offisielle taksonomien grupperer rollene etter funksjon. Kjennskap til kategoriene forhindrer at man leter i feil liste.

Roles de documento. Beskriver strukturen på en side eller seksjon: article, document, feed, heading, img, list, listitem, math, none, note, presentation, row, separator, table, term, toolbar, tooltip. Mange av disse dupliserer innebygde HTML-elementer og skrives derfor sjelden manuelt.

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

Landemerke-roller. Definer navigerbare områder på siden: “banner”, “komplementær”, “innholdsinformasjon”, “skjema”, “hoved”, “navigasjon”, “region”, “søk”. Dette er det som brukes mest på nettsteder med ufullstendig HTML-semantikk.

Widget-roller. Representerer interaktive kontroller: “knapp”, “avmerkingsboks”, “rutenett”, “link”, “menuitem”, “menuitemcheckbox”, “menuitemradio”, “alternativ”, “fremdriftslinje”, “radio”, “scrollbar”, “søkeboks”, “glidebryter”, “tab, tabpanel”, tekstboks, treelement. Krever fokus og tastaturhåndtering.

Strukturroller. Organisasjonsmoduler inkluderer: “applikasjon”, “rutenett”, “gruppe”, “listeboks”, “meny”, “menylinje”, “radiogruppe”, “tabliste”, “tre”, “tregrid”, “radgruppe”, “kolonneoverskrift”, “radoverskrift”.

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

Vindusroller. Overlagret eller modal innholdsadministrasjon: alertdialog, dialog.

Abstrakte roller. Ingen elementer er skrevet i markeringen: command, composite, input, landmark, range, rolletype, section, sectionhead, select, structure, widget, window. Sirven for spesifikasjonen for å arve egenskaper mellom rollene.

Comparativa: Las mejores referencias de roles ARIA

La følgende tabla sammenligne las referencias más usadas por desarrolladores hispanohablantes según criterios prácticos.

Referanse	Tipo	Idiomer	Eksempler på kode	Ideell para
MDN Web Docs (roller ARIA)	Offisiell dokumentasjon	Multilingüe (incluye español)	Sí, por rol	Consulta técnica profunda
WAI-ARIA 1.2 (W3C)	Especificación normativa	Engelsk	Nei	Verificar comportamiento exacto
WAI-ARIA Authoring Practices Guide	Guía de patrones	Engelsk	Sí, patrones completos	Implementære widgets med teclado
Hoja de referencia tipo jukseark	Tabell CV	Engelsk	Mínimos	Repaso rápido en el editor
accessibility.build (referencia ARIA)	Referencia práctica	Engelsk	Sí	Apprender con ejemplos commentados
Auditores (øksekjerne, fyrtårn)	Herramienta	Flerspråklig	Nei	Detektor roller inválidos

Elección depende del momento. Durante la escritura de marcado, una hoja de referencia compacta gana en velocidad. All depurar un widget que no anuncia bien su estado, la especificación del W3C y la guía de patrones de WAI son las fuentes que resuelven la duda.

Cómo decidir qué rol aplicar: criterios prácticos

La avgjørelsen korrigere casi siempre empieza por descartar ARIA. Estos kriterier, ordenados, evitan la mayoría de los errores.

1. ¿Finnes det et naturlig HTML-element? En <knapp> har allerede den implisitte rollen som en knapp. Å legge til role="button" er overflødig og kan føre til konflikter.
2. ¿Role krever obligatoriske attributter? role="checkbox" krever aria-checked. role="slider" krever aria-valuenow, aria-valuemin og aria-valuemax. Hvis du ikke kan opprettholde disse tilstandene, skader rollen mer enn den hjelper.
3. ¿Rolle involverer tastaturadministrasjon? Widgetroller krever navigering med piler, Home, End og Esc avhengig av mønsteret. En role="tablist" uten pilhåndtering er verre enn å ikke ha den.
4. ¿El rol es abstracto? Hvis det er i listen over abstrakte roller, skal det ikke skrives.
5. ¿Er rollen foreldet eller i ubrukt? Noen verdier ble endret mellom ARIA 1.0 og 1.2. Se alltid gjeldende versjon.

Den første regelen for bruk av ARIA, anerkjent i W3C-teknikkguiden, er prinsippet: bruk innfødt HTML når det er mulig. ARIA er en oppdatering for når HTML ikke er nok, ikke en erstatning.

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

Errores frecuentes al consultar y aplicar la liste de roller

Un error habitual consiste en copiar un roll de una hoja de referencia sin comprobar sus atributos requeridos. role="combobox" en ARIA 1.2 kan sammenlignes med 1,0 år espera aria-expanded og en relación med en listeboks mellom aria-kontroller. Applicar la version antigua rompe el anuncio en lectores actualizados.

Det er også vanlig å bruke role="presentation" eller role="none" for å “rydde opp” i semantikken uten å forstå at det eliminerer elementet fra tilgjengelighetstreet, inkludert dets barn i noen tilfeller. Dette vises også med role="application"-frekvensen, som overfører all tastaturkontroll til widgeten og deaktiverer skjermlesersnarveier; den er reservert for komplekse nettapplikasjoner, ikke for skjemaer.

Los roller de landemerke duplicados generan confusión: dos role="main" en la misma página, o un role="banner" dentro de un <article>, made una navegación por regiones incoherente. La validación con økse-kjerne o con las herramientas de accesibilidad del navegador detecta varios de estos casos, aunque ninguna herramienta automática sustituye la prueba con lector de pantalla real.

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

Herramientas for validar roles in tu marcado

Kombinasjonskontroll av roller manuell og automatisering. Las DevTools de Chrome og Firefox inkluderer et panel som er tilgjengelig for muse- eller årbol som kan brukes som operativ system, med rolleberegning av cada nodo. Es la forma más directa de ver si un rol declarado sobrevive o es sobrescrito por la semántica nativa.

øksekjerne, integrado en Lighthouse og disponible som utvidelse, marca roller inválidos, atributos obligatorios ausentes y combinaciones contradictorias. Utvidelse Tilgjengelighetsinnsikt for nett, basert på økser og komprobaciones guider. For pruebas con usuarios reales, NVDA og Windows og VoiceOver og macOS for å bekrefte endelige verifikasjoner: ningún validador detecta og anuncio resulta comprensible in contexto.

Tilgjengelighetsdokumentasjonen for MDN og beskyttere av WAI-ARIA del W3C er en av de beste aktørene som gir deg god tid. La primera explica cada rol; la segunda muestra cómo se combinan en componentes completos.

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ántos roller ARIA eksisterer?

W3C WAI-ARIA 1.2-spesifikasjonen definerer totalt 82 roller, fordelt på dokument-, landemerke-, widget-, struktur-, vindu- og abstrakte roller. I denne sammenhengen brukes bare en brøkdel i vanlig utvikling: abstrakte roller skrives aldri og mange dokumentroller dupliserer native HTML-elementer.

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

Un roll ARIA describe qué es un elemento, mientras que los atributos ARIA describen su estado o propiedades. For eksempel, role="checkbox" identifiserer komponenten og aria-checked="true" kommuniserer hvis den er merket. Los rolls se asignan con el atributo rolle; los estados y propiedades usan el prefijo aria-.

¿Debo bruker ARIA om du bruker HTML semantisk?

I de fleste tilfeller, nei. Semantisk HTML avslører allerede implisitte roller: <nav> er ekvivalent med role="navigation" og <main> tilsvarer role="main". Å legge til rollen eksplisitt er overflødig og kan skape konflikter. ARIA er reservert for komponenter som HTML ikke dekker, for eksempel faner, trær eller komplekse menyer.

¿Qué roller ARIA nunca debo escribir en el marcado?

Abstrakte roller skal aldri vises: “kommando”, “sammensatt”, “input”, “landemerke”, “område”, “rolletype”, “seksjon”, “seksjonshode”, “velg”, “struktur”, “widget” og “vindu”. De eksisterer bare for spesifikasjonen for å definere arv av egenskaper mellom roller. Å skrive dem produserer en ugyldig rolle som validatorer flagger.

¿Cómo verifico que un roll ARIA funciona correctamente?

Verifikasjonen kombinerer tre trinn: inspeksjon av tilgjengelighetstreet i nettleserens DevTools for å bekrefte den beregnede rollen, passere en validator som øksekjerne for å oppdage manglende obligatoriske attributter, og testing med en ekte skjermleser som NVDA eller VoiceOver. Bare det siste trinnet bekrefter at kunngjøringen er forståelig for en person.

¿Mister roller ARIA cambian entre versiones de la especificación?

Sí. ARIA 1.1 har roller som «feed» og «switch», og ARIA 1.2 modifiserte funksjoner for «combobox» og konsolidering av andre verdier. ARIA 1.3 está en desarrollo. Consultar siempre la versión vigente de la especificación evita aplicar patrones obsoletos que los lectores de pantalla modernos interpretan de forma distinta.