Liste over ARIA-roller: Bedste referencer sammenlignet

Listen over roller ARIA består af 82 værdier defineret i WAI-ARIA 1.2 specifikationen af ​​W3C, organiseret i kategorier af funktioner: roller i dokumentet, vartegn, widget, struktur, vindue og abstrakte. Valget af den rette reference til at konsultere afhænger af, om du har brug for en hurtig tabel, dokumentation med kodeeksempler eller en beslutningsguide til, hvornår hver rolle skal anvendes.

Key Takeaways

• WAI-ARIA 1.2-specifikationen definerer 82 roller, men kun en lille del bruges i den daglige praksis med tilgængelige XHTML/CSS-websteder.
• Den første ARIA-regel gælder stadig: hvis der findes et indbygget HTML-element med den semantik, du har brug for, skal du bruge det i stedet for at tilføje en rolle.
• Abstrakte roller (som role="widget" eller role="input") må aldrig skrives i opmærkningen; de tjener kun som taksonomisk grundlag.
• En nyttig reference til front-end bør inkludere rollen, dens obligatoriske ARIA-attributter, tilladte tilstande og et eksempel på reel opmærkning.
• Landmark- og widget-roller udgør størstedelen af de fejl, der opdages af automatiske revisorer som axe-core eller Lighthouse.

Hvad er en ARIA-rolle, og hvorfor har du brug for en pålidelig liste

En ARIA-rolle er en værdi, der tildeles et element via attributten role for at kommunikere til hjælpeteknologier, hvilken type komponent det repræsenterer. Browseren eksponerer denne rolle via tilgængelighedstræet, og en skærmlæser som NVDA, JAWS eller VoiceOver oversætter den til en konkret meddelelse: “knap”, “fane”, “region”, “dialogboks”.

WAI-ARIA-specifikationen, som vedligeholdes af W3C i ARIA-arbejdsgruppen, definerer hver rolle sammen med dens tilladte tilstands- og egenskabsattributter. Version 1.2 er den nuværende stabile anbefaling, og ARIA 1.3 er under udvikling. For en udvikler, der arbejder med XHTML og CSS, er rollelisten ikke et dekorativt katalog: hver forkert anvendt værdi skaber en konflikt mellem elementets indbyggede semantik og den deklarerede, og skærmlæsere løser denne konflikt forskelligt afhængigt af browseren.

Den officielle dokumentación de roller af ARIA en MDN (Mozilla Developer Network) er en referenceteknologi til mere konsultation på español og engelsk, men ikke på engelsk. Eksisterer hojas de referencia, guías de patrones y herramientas de validación que cubren necesidades distintas. Compararlas ayuda a elegir la que encaja con tu flujo de trabajo.

De seks kategorier af ARIA-roller

Den officielle taksonomi grupperer rollerne efter funktion. Kendskab til kategorierne forhindrer, at man leder i den forkerte liste.

Roles de documento. Beskriver strukturen af en side eller sektion: article, document, feed, heading, img, list, listitem, math, none, note, presentation, row, separator, table, term, toolbar, tooltip. Mange af disse dublerer indbyggede HTML-elementer og skrives derfor sjældent manuelt.

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

Landmark-roller. Definer navigerbare områder på siden: “banner”, “komplementær”, “indholdsoplysninger”, “formular”, “hoved”, “navigation”, “region”, “søgning”. Det er det, der er mest brugt på websteder med ufuldstændig HTML-semantik.

Widget-roller. Repræsenterer interaktive kontrolelementer: knap, afkrydsningsfelt, gittercelle, link, menuitem, menuitemcheckbox, menuitemradio, option, fremskridtslinje, radio, scrollbar, søgeboks, skyder, switte-panel, faneblad,` “tekstboks”, “træelement”. Kræver fokus og tastaturstyring.

Strukturroller. Organisationswidgets inkluderer: “applikation”, “gitter”, “gruppe”, “listeboks”, “menu”, “menulinje”, “radiogruppe”, “tabliste”, “træ”, “treegrid”, “rækkegruppe”, “kolonneoverskrift”, “rækkeoverskrift”.

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

Vindue-roller. Overlejret eller modal indholdsstyring: alertdialog, dialog.

Abstrakte roller. Der skrives ingen elementer i opmærkningen: command, composite, input, landmark, range, rolletype, section, sectionhead, select, structure, widget, window. Sirven for specifikationen til at arve egenskaber mellem roller.

Comparativa: las mejores referencer de roller ARIA

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

Referencer	Tip	Idiomer	Eksempler på kode	Ideel para
MDN Web Docs (roller ARIA)	Officiel dokumentación	Multilingüe (incluye español)	Sí, por rol	Consulta técnica profunda
WAI-ARIA 1.2 (W3C)	Especificación normativa	Engelsk	Nej	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 snydeark	Tabel resume	Engelsk	Mínimos	Repaso rápido en el editor
accessibility.build (referencia ARIA)	Referencia práctica	Engelsk	Sí	Aprender con ejemplos comentados
Auditores (øksekerne, fyrtårn)	Herramienta	Multilingüe	Nej	Detektor roller inválidos

Elección depende del momento. Durante la escritura de marcado, una hoja de referencia compacta gana en velocidad. Al 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

Den korrigerede beslutning er empieza por descartar ARIA. Estos kriterier, ordenados, evitan la mayoría de los errores.

1. ¿Er der et naturligt HTML-element? En <knap> har allerede den implicitte rolle som en knap. Tilføjelse af role="button" er overflødigt og kan forårsage konflikter.
2. ¿Role kræver obligatoriske attributter? role="checkbox" kræver aria-checked. role="slider" kræver aria-valuenow, aria-valuemin og aria-valuemax. Hvis du ikke kan opretholde disse tilstande, skader rollen mere end den hjælper.
3. ¿Rolle involverer tastaturstyring? Widgetroller kræver navigation med pile, Home, End og Esc afhængigt af mønsteret. En role="tablist" uden pilehåndtering er værre end ikke at have det.
4. ¿El rol es abstracto? Hvis det er på listen over abstrakte roller, skal det ikke skrives.
5. ¿Er rollen forældet eller i ubrugt? Nogle værdier blev ændret mellem ARIA 1.0 og 1.2. Se altid den aktuelle version.

Den første regel for brug af ARIA, der er anerkendt i W3C-teknikguiden, er princippet: brug indbygget HTML, når det er muligt. ARIA er en patch til, når HTML ikke er nok, ikke en erstatning.

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

Der er hyppige fejl i forbindelse med konsulenter og anvendelse af rolleliste

Un error habitual consiste en copiar un roll de una hoja de referencia sin comprobar sus atributos requeridos. role="combobox" en ARIA 1.2 cambió respekterer en 1.0 y ahora espera aria-expanded og en relación med en listbox mediante aria-controls. Applicer la version antigua rompe el anuncio en lectores actualizados.

Det er også almindeligt at bruge role="præsentation" eller role="ingen" til at “rydde op” i semantikken uden at forstå, at det fjerner elementet fra tilgængelighedstræet, inklusive dets børn i nogle tilfælde. Dette vises også med role="application"-frekvensen, som overfører al tastaturkontrol til widgetten og deaktiverer skærmlæsergenveje; det er forbeholdt komplekse webapplikationer, ikke til formularer.

Los roller de skelsættende 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-kerne eller 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.

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

Herramientas for validar roller en tu marcado

Kombinationskontrol af roller manual og automatisering. Las DevTools til Chrome og Firefox omfatter et panel, der er tilgængeligt, som kan bruges til at modtage et operativt system, med en rolleberegning af cada nodo. Es la forma más directa de ver si un rol declarado sobrevive o es sobrescrito por la semántica nativa.

øksekerne, integreret en fyrtårn og disponibel som forlængelse, marca roller inválidos, atributos obligatorios ausentes og combinaciones contradictorias. La extensión Accessibility Insights for Web, basada en las reglas de axe, añade comprobaciones guiadas. Til pruebas con usuarios reales, NVDA en Windows og VoiceOver og macOS ofrecen for verificación definitiva: ningún validador detecta og anuncio resulta comprensible in contexto.

La documentación de accesibilidad de MDN y la guía de patrones de WAI-ARIA del W3C søn las dos fuentes que conviene tener abiertas durante el desarrollo. La primera explica cada rol; la segunda muestra cómo se combinan en componentes completos.

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

W3C WAI-ARIA 1.2-specifikationen definerer i alt 82 roller, fordelt på dokument-, vartegn-, widget-, struktur-, vindues- og abstrakte roller. I denne sammenhæng bruges kun en brøkdel i sædvanlig udvikling: abstrakte roller skrives aldrig, og mange dokumentroller dublerer native HTML-elementer.

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

Un roll ARIA beskrive qué es un elemento, mientras que los atributos ARIA beskrevet su estado o propiedades. Som eksempel, role="checkbox" identificerer komponenten og aria-checked="true" kommunikerer, hvis den er markeret. Los roller se asignan con el atributo rolle; los estados y propiedades usan el prefijo aria-.

¿Debo bruger ARIA om du bruger HTML semantisk?

I de fleste tilfælde nej. Semantisk HTML afslører allerede implicitte roller: <nav> svarer til role="navigation" og <main> svarer til role="main". Det er overflødigt at tilføje rollen eksplicit og kan skabe konflikter. ARIA er forbeholdt komponenter, som HTML ikke dækker, såsom faner, træer eller komplekse menuer.

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

Abstrakte roller bør aldrig vises: “kommando”, “sammensat”, “input”, “vartegn”, “område”, “rolletype”, “afsnit”, “sektionshoved”, “vælg”, “struktur”, “widget” og “vindue”. De eksisterer kun for specifikationen for at definere nedarvning af egenskaber mellem roller. At skrive dem producerer en ugyldig rolle, som validatorer markerer.

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

Verifikationen kombinerer tre trin: inspicering af tilgængelighedstræet i browserens DevTools for at bekræfte den beregnede rolle, videregivelse af en validator som axe-core for at opdage manglende obligatoriske attributter og test med en rigtig skærmlæser som NVDA eller VoiceOver. Kun det sidste trin bekræfter, at meddelelsen er forståelig for en person.

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

Sí. ARIA 1.1 er roller som “feed” og “switch”, og ARIA 1.2 modificerede funktioner til “combobox” og konsolidering af andre værdier. ARIA 1.3 está en desarrollo. Consultar siempre la version vigente de la especificación evita aplicar patrones obsoletos que los lectores de pantalla modernos interpretan de forma distinta.