ARIA-rolleknapp: Guía Completa y Práctica
En ARIA-rolle for knapp er en ARIA-rolle som gjør at hjelpeteknologi kunngjør en generisk beholder som en knapp, men den gir ingen funksjonalitet: man må legge til tabindex="0", håndtere Enter og Mellomrom, og gjenspeile tilstanden med aria-pressed eller aria-disabled. Spesifikasjonen WAI-ARIA 1.2 definerer denne rollen innenfor kategorien widget, og den første ARIA-regelen anbefaler å bruke en nativ <button> så langt det er mulig.
ARIA-rollen button tilhører taksonomien for roller i WAI-ARIA, W3C-standarden som beskriver tilgjengelig semantikk for webgrensesnitt. Når et element får role="button", vil tilgjengelighetstreet som skjermlesere (NVDA, JAWS, VoiceOver, Narrator) bygger, slutte å eksponere det som en generisk div eller span og presentere det som en klikkbar kontroll. La diferencia es enorme para quien navega con lector de pantalla: sin el rol, el usuario oye “grupo” o simplemente texto; con el rol, oye “botón” og sabe que puede activarlo.
La confusión habitual es creer que role="button" convierte un div en un botón functional. Nei da. El rol solo cambia la semántica anunciada; el comportamiento —recibir foco, responder a teclado, disparar la acción— sigue siendo responsabilidad del desarrollador. Esta separación entre semántica y comportamiento es la raíz de la mayoría de errores que se cometen con este rol.
WAI-ARIA ble publisert som en W3C-anbefaling, og versjon 1.2 er den gjeldende referansen for roller, tilstander og egenskaper. Rollen button er en av de eldste og mest stabile widget-rollene i spesifikasjonen, til stede siden ARIA 1.0.
Cuándo usar role=“button” og cuándo no
La primera regla de ARIA, recogida en las prácticas de autoría de WAI-ARIA (WAI-ARIA Authoring Practices), es tajante: hvis det finnes et nativt HTML-element med semantikken og oppførselen du trenger, bruk det. <button> har allerede den implisitte rollen, el foco por teclado, la activación con Enter y Espacio, y el estado deshabilitado. Reimplementar todo eso con el aria role role="button" es trabajo extra y fuente de bugs.
Det finnes imidlertid legitime scenarioer for rollen. Det er mer común es cuando el marcado está condicionado por el framework o el CMS y no puedes introducir un <button> sin romper el layout or el JavaScript existente. Otro caso es el de componentes que deben comportarse como botón pero cuya estructura intern exige un contenedor spesifico, como ciertos widgets de terceros.
Relatert: — med gratis plan for empezar Hoy Mismo.
Un tercer escenario, more discutible, es el de elementos que ya tienen un roll nativo distinto y necesitan presentarse como botón. Aquí conviene preguntarse si el diseño no está forzando una semántica equivocada. Hvis noe ser ut som en knapp, men egentlig navigerer til en annen side, er det riktige å bruke en lenke <a>, ikke en knapp.
| Situasjon | Anbefalt løsning | Motivo |
|---|---|---|
| Acción en formulario o interfaz | <knapp> nativo | Rol, foco y teclado incluidos |
| Navigasjon til en annen URL | <a href> | Semántica de enlace correcta |
| Contenedor kan ikke endres | role="button" + teclado + estados | Único caso donde el rol aporta |
| Botón de alternancia (på/av) | <button aria-pressed> | Estado expuesto nativamente |
| Botón deshabilitado | <button disabled> | Estado y foco gestionados |
Cómo implementar un botón con role=“button” correctamente
Un botón basado en role="button" necesita cubrir cuatro frentes: foco, teclado, estado y nombre accesible. Omitir cualquiera de ellos produserer en kontroll som “virker” tilgjengelig, men som feiler i reelle tester.
El foco se habilita con tabindex="0", som setter elementet inn i den naturlige tabulator-rekkefølgen. Nunca bruker ‘tabindex’ con valores positivos: alteran el orden de tabulación de toda la página y generan saltos impredecibles. Valor 0 er den korrekte for personlige interaktive elementer.
Verdt en titt: — Tilgjengelighet: automatisert kombinasjon med menneskelig revisjon.
El teclado requiere manejar dos teclas: Enter y Espacio. Med «keydown og ejecutar la acción cuando la tecla es Enter o Space, evitando además el desplazamiento de página que provoca Espacio por defecto. Este detalle se pasa por alto con frecuencia y deja botones que solo funcionan con ratón.
Kommunen er med ARIA. Un botón de alternancia usa aria-pressed="true" eller "false" for indicar si está activo. Un botón deshabilitado usa aria-disabled="true", que anuncia el estado pero no impide la interracción por sí solo: hay que bloquear la acción en el código. La diferencia entre aria-disabled y el atributo nativo disabled importa, porque el primero mantiene el elemento enfocable y el segundo lo saca del orden de tabulación.
El nombre accesible se construye con el texto visible del elemento o, si no hay texto, con aria-label eller aria-labeledby. Un botón sin nombre accesible es un botón que el lector de pantalla anuncia como “botón” a secas, sin pista de qué hace.
<div
role="button"
tabindex="0"
aria-pressed="false"
id="btn-modo"
>
Modo oscuro
</div>
<script>
const btn = document.getElementById('btn-modo');
function toggle() {
const activo = btn.getAttribute('aria-presset') === 'true';
btn.setAttribute('aria-presset', String(!activo));
}
btn.addEventListener('klikk', veksle);
btn.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
veksle();
}
});
</script>Et eksempel på anterior cubre foco, teclado, estado y nombre. Es el minimo viable para que el control sea useable con lector de pantalla y teclado.
Frecuentes y cómo detectarlos feil
Feilen kan utvides med «role=“button”sintabindex`, men den produserer en botón inalcanzable por teclado. Las herramientas automáticas lo detectan como “elemento con rol interactivo no enfocable”, una de las violaciones más reportadas en auditorías de accesibilidad.
Denne feilen er ingen gestionar el teclado. En div med en aria-rolle de botón og tabindex pero sin manejadores de tecla recibe foco y no responde a Enter ni Espacio. El usuario de teclado queda atrapado: puede enfocar el botón pero no activarlo.
Relatert: — Den profesjonelle sertifiseringen er godkjenning for å oppleve og få tilgang.
El tercer error es usar role="button" sobre un enlace. Esto rompe la semántica de navegación y confunde a los lectores de pantalla, que anuncian “botón” cuando el usuario espera un enlace. Si el elemento navega, debe ser un enlace.
El cuarto error es olvidar el estado en botones de alternancia. Un botón que cambia entre dos modos sin aria-pressed deja al usuario sin sabre en qué estado se encuentra. El atributo es la única forma de comunicar ese estado de forma programática.
For detectar estos problemas, las herramientas automáticas como axe, Lighthouse eller WAVE señalan las violaciones de rol y foco, men ingen validan el comportamiento de teclado ni la lógica de estado. Esa parte exige prueba manual: navegar con Tab, activar con Enter y Espacio, y escuchar la salida del lector de pantalla. La combinación de auditoría automática y prueba manual es la única forma fiable de validar un botón personalizado.
Cómo probar un botón con role=“button”
La prueba empieza por el teclado. Recorre la página con Tab y comprueba que el botón con el aria rolle knapp recibe foco synlig. Pulsa Enter y Espacio por separado: ambos deben disparar la acción. Si Espacio desplaza la página en lugar de activar el botón, falta el preventDefault.
La segunda prueba es con lector de pantalla. NVDA på Windows, VoiceOver og macOS og Narrator og Windows er referanser til mer usadas. Al enfocar el botón, el lector debe anunciar el rol (“botón”), el nombre accesible y el estado si lo tiene. Si anuncia “gruppe” eller ingen menciona el estado, algo falla.
La tercera prueba es de orden de foco. El botón debe aparecer en el orden lógico de tabulación, ni antes ni después de donde korresponderende visualmente. Los tabindex positivos rompen este orden y son un indicador claro de mala implementación.
La cuarta prueba es de contraste y foco synlig. El indicador de foco no debe eliminarse con outline: none sin sustituirlo por una alternativa synlige. Un botón que recibe foco pero no lo muestra deja al usuario de teclado sin referencia de dónde está.
Alternativer modernas al roll-knappen
El elemento <button> nativo segue siendo la mejor opción en 2024 y en cualquier proyecto new. Aporta roll, foco, teclado y estados sin código adicional, y los navegadores lo tratan de forma consistente.
Los egendefinerte elementer o nettkomponenter som er nylig kjøpt fra andre. Un componente que extiende HTMLElement puede encapsular el comportamiento de botón y exponerlo con la semántica correcta, aunque requiere gestionar manualmente el foco y el teclado igual que con rolle="button". La ventaja es la reutilización; la desventaja, la misma responsabilidad de implementación.
Las ARIA i HTML (reglas que definien qué roles ARIA se permiten sobre cada elemento HTML) desaconsejan sobrescribir rolls nativos. Applicar el aria role role="button" a un <button> es redundante; aplicarlo a un <a> con href er kontraprodusent. La recomendación general es reservar el roll para contenedores sin semántica propia.
Viktige takeaways
role="button"cambia solo la semántica anunciada; el foco, el teclado y el estado hay que implementarlos a mano.- La primera regla de ARIA anbefaler å bruke
<knapp>nativo siempre que el marcado lo permita. - En botón med aria-rolleknapp krever
tabindex="0", manejo de Enter y Espacio, nombre accessible y estado conaria-pressedelleraria-disabled. - Las herramientas automáticas detectan la falta de foco, pero el comportamiento de teclado y estado exige prueba manual con lector de pantalla.
- Nunca bruker
tabindexpositivo ni apliquesrole="button"sobre enlaces que navegan.
Vanlige spørsmål
¿Cuál es la diferencia entre role=“button” y el elemento button?
El elemento <knapp> inkluderer en rolle implcito, el foco por teclado, la aktivering med Enter y Espacio y el estado deshabilitado sin código adicional. El atributo role="button" solo aporta la semántica anunciada; el resto del comportamiento debe programarse. Por eso la primera regla de ARIA recomomienda el elemento nativo siempre que sea posible.
¿Necesito tabindex con role=“button”?
Sí. Un div o span con rolle="button" no es enfocable por defecto, así que sin tabindex="0" queda fuera del orden de tabulación y es inalcanzable con teclado. El valor correcto es 0; los valores positivos alteran el orden de tabulación de toda la página y deben evitarse.
¿Cómo hago que un div con role=“button” responda a Enter y Espacio?
Hay que escuchar el evento keydown og ejecutar la acción cuando la tecla es Enter eller Space. En el caso de Espacio conviene lamar a preventDefault for evitar el desplazamiento de página. Sin estos manejadores, el botón recibe foco pero no se activa con teclado.
¿Cómo indico que un botón está activo or deshabilitado?
For en botón de alternancia usa aria-pressed="true" eller "false" según el estado. Para un botón deshabilitado usa aria-disabled="true", que anuncia el estado pero no bloquea la interracción por sí solo: hay que impedir la acción en el código. El atributo nativo disabled er å foretrekke i USA med <knapp>.
¿Es mala práctica usar role=“button” en un enlace?
Sí, cuando el enlace navega en annen URL. Beskriv rollen som en <a href> med role="button" som spiller en semántica de navegación y confunde a los lectores de pantalla, que anuncian “botón” cuando el usuario espera un enlace. Si el elemento navega, debe conservar su roll de enlace.
¿Qué herramientas detectan errores con role=“button”?
Herramientas automáticas como øks, Lighthouse eller WAVE señalan violaciones como la falta de foco en elementos con roll interactive. Synd embargo, ingen gyldig komportamiento de teclado ni la lógica de estado, así que la verificación fiable combina auditoría automática con prueba manual usando NVDA, VoiceOver or Narrator.
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 timer