Luettelo ARIA-rooleista: Parhaat referenssit verrattuna
Täydellinen ARIA-rooliluettelo koostuu 82 arvosta, jotka on määritelty W3C:n WAI-ARIA 1.2 -spesifikaatiossa ja järjestetty kuuteen toiminnalliseen kategoriaan: asiakirja-, maamerkki-, widget-, rakenne-, ikkuna- ja abstraktit tilat. Elegir la referencia adecuada para consultarlos depende de si necesitas una tabla rápida, documentación con ejemplos de código o una guía de decisión sobre cuándo aplicar cada rol.
Keskeiset kohdat
- WAI-ARIA 1.2 -spesifikaatio määrittelee 82 roolia, mutta vain pientä osaa niistä käytetään päivittäisessä esteettömän XHTML/CSS-sivuston kehityksessä.
- ARIAN ensimmäinen sääntö on edelleen voimassa: jos on olemassa natiivi HTML-elementti, jolla on tarvitsemasi semantiikka, käytä sitä roolin lisäämisen sijaan.
- Abstrakteja rooleja (kuten
role="widget"tairole="input") ei tule koskaan kirjoittaa merkintöihin; ne toimivat vain taksonomisena perustana. - Hyödyllisen front-end-viitteen tulee sisältää rooli, sen pakolliset ARIA-attribuutit, sallitut tilat ja todellinen merkintäesimerkki.
- Maamerkki- ja widget-rooleihin keskittyy suurin osa automaattisten tarkistustyökalujen, kuten axe-coren tai Lighthousen, havaitsemista virheistä.
Mikä on ARIA-rooli ja miksi tarvitset luotettavan luettelon
ARIA-rooli on arvo, joka määritetään elementille “role”-attribuutilla, jotta avustavalle teknologialle voidaan viestiä, minkä tyyppistä komponenttia se edustaa. Selain välittää tämän roolin esteettömyyspuun kautta, ja näytönlukuohjelma, kuten NVDA, JAWS tai VoiceOver, kääntää sen konkreettiseksi ilmoitukseksi: “painike”, “välilehti”, “alue”, “vuoropuheluikkuna”.
W3C:n ARIA-työryhmän ylläpitämä WAI-ARIA-spesifikaatio määrittelee jokaisen roolin sekä sen sallitut tila- ja ominaisuusattribuutit. Versio 1.2 on nykyinen vakaa suositus, ja ARIA 1.3 on kehitysvaiheessa. XHTML- ja CSS-kehittäjälle rooliluettelo ei ole koristeellinen luettelo: jokainen väärin sovellettu arvo aiheuttaa ristiriidan elementin natiivin ja deklaroidun semantiikan välille, ja näytönlukuohjelmat ratkaisevat tämän ristiriidan eri tavoin selaimesta riippuen.
MDN:n (Mozilla Developer Network) virallinen ARIA-roolidokumentaatio on käytetyin tekninen viite espanjaksi ja englanniksi, mutta ei ainoa. On olemassa viitesivuja, mallioppaita ja validointityökaluja, jotka vastaavat eri tarpeisiin. Niiden vertailu auttaa valitsemaan työnkulkuun sopivimman.
Kuusi ARIA-roolikategoriaa
Virallinen taksonomia ryhmittelee roolit niiden funktion mukaan. Kategorioiden tunteminen auttaa välttämään etsimistä väärästä luettelosta.
Roles de documento. Kuvaavat sivun tai osion rakenteen: article, document, feed, heading, img, list, listitem, math, none, note, presentation, row, separator, table, term, toolbar, tooltip. Monet näistä vastaavat natiiveja HTML-elementtejä, joten niitä kirjoitetaan käsin harvoin.
Aiheeseen liittyvä: — Widget de accesibilidad con plan gratuito para empezar hoy mismo.
Maamerkkiroolit. Määritä sivun navigoitavat alueet: “banneri”, “täydentävä”, “sisältötiedot”, “lomake”, “pää”, “navigointi”, “alue”, “haku”. Tätä käytetään eniten sivustoilla, joilla on epätäydellinen HTML-semantiikka.
Widgetin roolit. Edustaa interaktiivisia ohjaimia: “button”, “checkbox”, “gridcell”, “link”, “menuite”, “menuitemcheckbox”, “menuitemradio”, “optio”, “progressbar”, “radio”, “scrollbar”, “searchbar”, “searchbar”, “kytkin”, “välilehti”, “välilehtipaneeli”, “tekstilaatikko”, “puukohde”. Edellyttää keskittymistä ja näppäimistön hallintaa.
Rakenteen roolit. Organisaation widgetejä ovat: “sovellus”, “ruudukko”, “ryhmä”, “luettelolaatikko”, “valikko”, “valikkopalkki”, “radioryhmä”, “taulukkolista”, “puu”, “puuverkko”, “riviryhmä”, “sarakeotsikko”.
Katsomisen arvoinen: — Accesibilidad gestionada: automatización combinada con revisión humana.
Ikkunan roolit. Päällekkäinen tai modaalinen sisällönhallinta: “alertdialog”, “dialog”.
Abstraktit roolit. Merkinnöissä ei kirjoiteta elementtejä: “command”, “composite”, “input”, “landmark”, “range”, “roletype”, “section”, “sectionhead”, “select”, “structure”, “widget”, “window”. Sirven ominaisuuksien perimiseksi roolien välillä.
Vertailu: parhaat ARIA-roolivitteet
Seuraava taulukko vertailee espanjankielisten kehittäjien käyttämiä yleisimpiä viitteitä käytännön kriteerien perusteella.
| Referencia | Tipo | Idiomas | Ejemplos de código | Ihanteellinen para |
|---|---|---|---|---|
| MDN Web Docs (ARIA-roolit) | Documentación oficial | Multilingüe (mukaan lukien español) | Sí, por rol | Consulta técnica profunda |
| WAI-ARIA 1.2 (W3C) | Especificación normativa | Inglés | Ei | Verificar Comportamiento exacto |
| WAI-ARIA Authoring Practices Guide | Guía de patrones | Inglés | Kyllä, patrones completos | Toteutettavat widgetit tecladossa |
| Hoja de referenssi tipo huijausarkki | Tabla ansioluettelo | Inglés | Minimos | Repaso rápido en el editor |
| accessibility.build (viite ARIA) | Referencia práctica | Inglés | Sí | Näytä kommentit |
| Auditorit (kirvesydin, majakka) | Herramienta | Multilingüe | Ei | Detectar roolit inválidos |
La lecció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
La decisión correcta casi siempre empieza por descartar ARIA. Estos kriteerit, ordenados, evitan la mayoría de los errores.
- ¿Onko olemassa natiivi HTML-elementtiä? "
- ¿Role vaatii pakollisia määritteitä?
role="checkbox"vaatiiaria-checked.role="slider"vaatii “aria-valuenow”, “aria-valuemin” ja “aria-valuemax”. Jos et pysty ylläpitämään näitä tiloja, rooli vahingoittaa enemmän kuin auttaa. - ¿Rooli sisältää näppäimistön hallinnan? Widget-roolit edellyttävät navigointia nuolilla, Home, End ja Esc kuviosta riippuen.
role="tablist"ilman nuolien käsittelyä on pahempaa kuin sen puuttuminen. - ¿El rol es abstracto? Jos se on abstraktien roolien luettelossa, sitä ei tule kirjoittaa.
- ¿Onko rooli vanhentunut tai pois käytöstä? Joitakin arvoja muutettiin ARIA 1.0:n ja 1.2:n välillä. Tarkista aina nykyinen versio.
Ensimmäinen ARIA:n käytön sääntö, joka tunnistetaan W3C-tekniikkaoppaassa, on periaate: käytä alkuperäistä HTML:ää aina kun mahdollista. ARIA on korjaustiedosto, kun HTML ei riitä, ei korvaa.
Aiheeseen liittyvä: — La Certificación profesional que acredita tu experiencia en accesibilidad.
Errores freecuentes al consultar y aplicar la list de roles
Un error habitual compose en copiar un rol de una hoja de referencia sin comprobar sus atributos requeridos. role="combobox" fi ARIA 1.2 cambió respecto a 1.0 y ahora espera aria-expanded y una relación con un listbox mediaante aria-controls. Aplicar la versio antigua rompe el anuncio en lectores aktualizados.
On myös yleistä käyttää role="presentation" tai role="none" semantiikan “siivoamiseen” ymmärtämättä, että se poistaa elementin esteettömyyspuusta, mukaan lukien joissain tapauksissa sen alat. Tämä näkyy myös role="application"-taajuudella, joka siirtää kaiken näppäimistön ohjauksen widgetille ja poistaa näytönlukuohjelman pikanäppäimet käytöstä. se on varattu monimutkaisille verkkosovelluksille, ei lomakkeille.
Los roles de landmark duplicados generan confusión: dos role="main" en la misma página, o un role="banner" dentro de un <article>, tuotettu una navegación por regiones incoherente. La validición con axe-core 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.
Herramientas para validar roles en tu marcado
La comprobación de roles combina inspección manual y automatización. Las DevTools de Chrome ja Firefox sisältävät käyttöpaneelin, jossa on muestra el árbol tal como lo recibe el system operativo, con el rol calculado de cada nodo. Es la forma más directa de ver si un rol declarado sobrevive o es sobrescrito por la semántica nativa.
axe-core, integrado en Lighthouse y disponible como extensión, marca roles inválidos, atributos obligatorios ausentes y combinaciones contradictorias. Laajenna Accessibility Insights for Web, basada en las reglas de axe, añade comprobaciones guiadas. Para pruebas con usuarios reales, NVDA en Windows y VoiceOver en macOS ofrecen la verificación definitiva: ningún validor detecta si el anuncio tulosa comprensible en kontekstissa.
La documentación de accesibilidad de MDN y la guía de patrones de WAI-ARIA del W3C son 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.
Lähteet ja lisälukemista
- WAI-ARIA – Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) on World Wide Web Consortiumin (W3C) julkaisema tekninen eritelmä, joka…
Usein kysyttyjä kysymyksiä
¿Cuántosin roolit ARIA olemassa?
W3C WAI-ARIA 1.2 -spesifikaatio määrittelee yhteensä 82 roolia, jotka on jaettu asiakirja-, maamerkki-, widget-, rakenne-, ikkuna- ja abstraktirooliin. Tässä yhteydessä tavallisessa kehityksessä käytetään vain murto-osaa: abstrakteja rooleja ei koskaan kirjoiteta ja monet dokumentin roolit kopioivat alkuperäisiä HTML-elementtejä.
¿Cuál es la differentia entre un ro ARIA y un atributo ARIA?
Un rol ARIA description qué es un elemento, mientras que los atributos ARIA descriptionn su estado o propiedades. Esimerkiksi role="checkbox" tunnistaa komponentin ja aria-checked="true" viestii, jos se on valittuna. Los roles se asignan con el atributo role; los estados y propiedades usan el prefijo aria-.
¿Debo usar ARIA, käytätkö HTML-semanticoa?
Useimmissa tapauksissa ei. Semanttinen HTML paljastaa jo epäsuorat roolit: <nav> vastaa role="navigation" ja <main> vastaa role="main". Roolin lisääminen eksplisiittisesti on tarpeetonta ja voi aiheuttaa ristiriitoja. ARIA on varattu komponenteille, joita HTML ei kata, kuten välilehdille, puille tai monimutkaisille valikoille.
¿Qué rooleja ARIA nunca debo escribir en el marcado?
Abstrakteja rooleja ei saa koskaan esiintyä: “komento”, “komposiitti”, “syöttö”, “maamerkki”, “alue”, “roolityyppi”, “osio”, “osion otsikko”, “valitse”, “rakenne”, “widget” ja “ikkuna”. Ne ovat olemassa vain määrittelyä varten, joka määrittää roolien välisen ominaisuuksien periytymisen. Niiden kirjoittaminen tuottaa virheellisen roolin, jonka tarkistajat ilmoittavat.
¿Onko ARIA-toiminto tarkistettu?
Vahvistuksessa yhdistyvät kolme vaihetta: esteettömyyspuun tarkastaminen selaimen DevToolsissa lasketun roolin vahvistamiseksi, validaattorin, kuten axe-core, ohittaminen puuttuvien pakollisten attribuuttien havaitsemiseksi ja testaus todellisella näytönlukuohjelmalla, kuten NVDA tai VoiceOver. Vain viimeinen vaihe vahvistaa, että ilmoitus on henkilön ymmärrettävissä.
¿Los roolit ARIA cambian entre versiones de la specificación?
Si. ARIA 1.1 sisältää rooleja syötteen ja kytkimen sekä ARIA 1.2:n yhdistelmän ja yhdistelmälaatikon yhdistämisen yhteydessä. 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.
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 horas