ARIA-rollknapp: Guía Completa y Práctica
ARIA-rollen button är en ARIA-roll som gör att hjälpmedel uttalas som en knapp, men den tillför inget beteende: man måste lägga till tabindex="0", hantera Enter och Mellanslag, samt återspegla tillståndet med aria-pressed eller aria-disabled. WAI-ARIA 1.2-specifikationen definierar denna roll inom kategorin widget, och ARIA:s första regel rekommenderar att använda en nativ <button> när det är möjligt.
ARIA-rollen “button” tillhör WAI-ARIA:s rolltaxonomi, W3C-standarden som beskriver tillgänglig semantik för webbgränssnitt. Cuando un elemento recibe role="button", el árbol de accesibilidad que construyen los lectores de pantalla (NVDA, JAWS, VoiceOver, Narrator) deja de exponerlo como un div o un span generico y lo presenta como un control accionable. 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” y sabe que puede activarlo.
La confusión habitual es creer que role="button" convierte un div en un botón functional. Nej då. 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 är offentlig som rekommendation av W3C och version 1.2 som refererar till vigente för roller, estados och propiedades. Den roll “knappen” är en av rollerna i widgeten mer antiguos y estables de la especificación, presenteras av ARIA 1.0.
När man ska använda role=“button” och när man inte ska göra det
La primera regla de ARIA, recogida en las prácticas de autoría de WAI-ARIA (WAI-ARIA Authoring Practices), es tajante: om det finns ett nativt HTML-element med den semantik och det beteende du behöver, använd det. <button> har redan den implicita rollen, el foco por teclado, la activación con Enter y Espacio, y el estado deshabilitado. Reimplementar todo eso con el aria roll role="button" es trabajo extra y fuente de bugs.
Det finns dock legitima scenarier för rollen. El más común es cuando el marcado está condicionado por el framework o el CMS y no puedes introducir un <button> sin romper el layout o el JavaScript existente. Otro caso es el de componentes que deben comportarse como botón pero cuya estructura interna struktur kräver un contenedor específico, como ciertos widgets de terceros.
Relaterat: — Widget för accessibilidad med plan gratis för empezar Hoy Mismo.
Un tercer escenario, más discutible, es el de elementos que ya tienen en nativ roll distinto y necesitan presentarse como botón. Aquí conviene preguntarse si el diseño no está forzando una semántica equivocada. Si algo parece un botón pero en realidad navega a otra página, lo correcto es un enlace <a>, no un botón.
| Situation | Rekommenderad lösning | Motivo |
|---|---|---|
| Acción en formulario o interfaz | <knapp> nativo | Rol, foco y teclado incluidos |
| Navigering till en annan URL | <a href> | Semántica de enlace correcta |
| Behållare som inte kan ändras | 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 skapar en kontroll som “verkar” tillgänglig men som misslyckas i verkliga tester.
El foco se habilita con tabindex="0", que inserta el elemento en el orden de tabulación natural. Använd aldrig tabindex con valores positivos: alteran el orden de tabulación de toda la página y generan saltos impredecibles. El valor 0 es el correcto para elementos interactivos personalizados.
Värt att titta på: — Accesibilidad gestionada: automatización combinada con revisión humana.
El teclado kräver hantering av två tangenter: Enter y Espacio. En nativ <button> svarar på båda, men en div med ARIA-rollen button gör det inte på egen hand. Hay que escuchar keydown och 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.
El estado se comunica con atributos ARIA. Un botón de alternancia usa aria-pressed="true" o "false" para indicar si está activo. Un botón deshabilitado usa aria-disabled="true", que anuncia el estado pero no impide la interacció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 accessible se construye con el texto visible del elemento o, si no hay texto, con aria-label o aria-labelledby. 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-pressad') === 'true';
btn.setAttribute('aria-pressad', String(!activo));
}
btn.addEventListener('klicka', växla);
btn.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle();
}
});
</script>Ett exempel på anterior cubre foco, teclado, estado y nombre. Es el minimo viable para que el control sea usable con lector de pantalla y teclado.
Frecuentes Errores y cómo detectarlos
Felet más extendido es aplicar role="button" sin tabindex, lo que producera 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.
Felet är inget gestionellt fel. Un div con un aria roll de botón y 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.
Relaterat: — La certificación profesional que acredita tu experiencia and accesibilidad.
Det här felet är att använda role="button" och utökas. 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.
Para detectar estos problemas, las herramientas automáticas como axe, Lighthouse o 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 roll 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 och macOS och Narrator och Windows har referenser till 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 “grupo” o 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 corresponde 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 synlig. Un botón que recibe foco pero no lo muestra deja al usuario de teclado sin referencia de dónde está.
Alternativas modernas al roll-knapp
El elemento <button> nativo segue siendo la mejor opción en 2024 y en cualquier proyecto nuevo. Aporta roll, foco, teclado y estados sin código adicional, y los navegadores lo tratan de forma consistente.
Los anpassade element o Webbkomponenter som nyligen hämtats från andra sidan. 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 role="button". La ventaja es la reutilización; la desventaja, la misma responsabilidad de implementación.
Las ARIA i HTML (reglas que definen qué rolls ARIA se permiten sobre cada elemento HTML) desaconsejan sobrescribir rolls nativos. Applicar el aria roll role="button" a un <button> es redundante; aplicarlo a un <a> con href es contraproducente. La recomendación general es reservar el roll para contenedores sin semántica propia.
Nyckelalternativ
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 recomomienda usar
<button>nativo siempre que el marcado lo permita. - En knapp för ariarollen kräver
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 använder
tabindexpositivo ni apliquesrole="button"sobre enlaces que navegan.
Vanliga frågor
¿Cuál es la diferencia entre role=“button” y el elemento button?
El elemento <button> nativo incluye el roll implícito, el foco por teclado, la activación con 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”?
Si. Un div o span con role="button" no es enfoocable 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 och ejecutar la acción cuando la tecla es Enter o Space. En el caso de Espacio conviene llamar a preventDefault para 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?
Para un botón de alternancia usa aria-pressed="true" o "false" según el estado. Para un botón deshabilitado usa aria-disabled="true", que anuncia el estado pero no bloquea la interacción por sí solo: hay que impedir la acción en el código. El atributo nativo disabled är att föredra i usa med <knapp>.
Är det en praktiskt att använda role=“button” en enlace?
Sí, cuando el enlace navega en annan URL. Beskriv rollen de un <a href> con role="button" 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 conservar su roll de enlace.
¿Qué herramientas detectan errores con role=“button”?
Herramientas automáticas como yxa, Lighthouse eller WAVE señalan violaciones como la falta de foco en elementos con roll interactivo. Sin embargo, ingen validan el comportamiento 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 o Narrator.
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 horas