ARIA-rolleknap: Guía Completa y Práctica

En ARIA-rolle for knapper er en ARIA-rolle, der får hjælpeteknologier til at annoncere en generisk container som en knap, men den tilføjer ikke funktionalitet: man skal tilføje tabindex="0", håndtere Enter og Mellemrum, og afspejle tilstanden med aria-pressed eller aria-disabled. WAI-ARIA 1.2-specifikationen definerer denne rolle inden for widget-kategorien, og den første ARIA-regel anbefaler at bruge en nativ <button>, når det er muligt.

ARIA-rollen button tilhører WAI-ARIA-rolletaksonomien, W3C-standarden, der beskriver tilgængelig semantik for webgrænseflader. Når et element får role="button", holder tilgængelighedstræet, som skærmlæsere (NVDA, JAWS, VoiceOver, Narrator) opbygger, op med at eksponere det som en generisk div eller span og præsenterer det i stedet som en interaktiv kontrol. Forskellen er enorm for en bruger med skærmlæser: uden rollen hører brugeren “gruppe” eller blot tekst; med rollen hører brugeren “knap” og ved, at den kan aktiveres.

Den gængse misforståelse er at tro, at role="button" gør en div til en funktionel knap. Det gør den ikke. Rollen ændrer kun den annoncerede semantik; funktionaliteten —at modtage fokus, reagere på tastatur og udløse handlingen— er stadig udviklerens ansvar. Denne adskillelse mellem semantik og funktionalitet er kilden til de fleste fejl, der begås med denne rolle.

WAI-ARIA blev udgivet som en W3C-anbefaling, og version 1.2 er den gældende reference for roller, tilstande og egenskaber. Rollen button er en af de ældste og mest stabile widget-roller i specifikationen og har været til stede siden ARIA 1.0.

Hvornår man skal bruge role=“button” og hvornår man ikke skal

Den første ARIA-regel, som findes i WAI-ARIA Authoring Practices, er klar: hvis der findes et nativt HTML-element med den semantik og funktionalitet, du har brug for, så brug det. <button> har allerede den implicitte rolle, tastaturfokus, aktivering med Enter og Mellemrum samt en deaktiveret tilstand. At genimplementere alt dette med ARIA-rollen role="button" er ekstra arbejde og en kilde til fejl.

Der findes dog legitime scenarier for rollen. Det mest almindelige er, når opmærkningen er begrænset af frameworket eller CMS’et, og du ikke kan indsætte en <button> uden at ødelægge layoutet eller den eksisterende JavaScript. Et andet tilfælde er komponenter, der skal fungere som en knap, men hvor den interne struktur kræver en specifik container, som visse tredjeparts-widgets.

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

Et tredje, mere diskutabelt scenarie, er elementer, der allerede har en anden nativ rolle, men skal præsenteres som en knap. Her bør man spørge sig selv, om designet tvinger en forkert semantik igennem. Hvis noget ligner en knap, men i virkeligheden navigerer til en anden side, er det korrekte et link <a>, ikke en knap.

Situation	Anbefalet løsning	Årsag
Handling i formular eller grænseflade	Nativ <button>	Rolle, fokus og tastatur inkluderet
Navigation til en anden URL	<a href>	Korrekt link-semantik
Container der ikke kan ændres	role="button" + tastatur + tilstande	Eneste tilfælde hvor rollen bidrager
Toggle-knap (til/fra)	<button aria-pressed>	Tilstand eksponeret nativt
Deaktiveret knap	<button disabled>	Tilstand og fokus administreret

Sådan implementerer du korrekt en knap med role=“button”

En knap baseret på role="button" skal dække fire områder: fokus, tastatur, tilstand og tilgængeligt navn. Hvis man udelader et af disse, får man en kontrol, der “ser” tilgængelig ud, men som fejler i virkelige tests.

Fokus aktiveres med tabindex="0", som indsætter elementet i den naturlige tab-rækkefølge. Brug aldrig tabindex med positive værdier: det ændrer tab-rækkefølgen for hele siden og skaber uforudsigelige spring. Værdien 0 er den korrekte for brugerdefinerede interaktive elementer.

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

Tastaturet kræver håndtering af to taster: Enter og Mellemrum. En nativ <button> reagerer på begge, men en div med en ARIA-rolle som knap gør det ikke af sig selv. Man skal lytte efter keydown og udføre handlingen, når tasten er Enter eller Space, og samtidig forhindre den side-scrolling, som Mellemrum normalt forårsager. Denne detalje overses ofte, hvilket resulterer i knapper, der kun virker med musen.

Tilstanden kommunikeres med ARIA-attributter. En toggle-knap bruger aria-pressed="true" eller "false" for at angive, om den er aktiv. En deaktiveret knap bruger aria-disabled="true", som annoncerer tilstanden, men ikke i sig selv forhindrer interaktion: handlingen skal blokeres i koden. Forskellen mellem aria-disabled og den native disabled-attribut er vigtig, da den første holder elementet fokuserbart, mens den anden fjerner det fra tab-rækkefølgen.

Det tilgængelige navn opbygges af elementets synlige tekst eller, hvis der ikke er tekst, med aria-label eller aria-labelledby. En knap uden et tilgængeligt navn er en knap, som skærmlæseren blot annoncerer som “knap”, uden at give et hint om, hvad den gør.

<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-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!activo));
  }
  btn.addEventListener('click', toggle);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggle();
    }
  });
</script>

Et eksempel på anterior cubre foco, teclado, estado y nombre. Es el minimo levedygtig para que el kontrol hav brugbar con lector de pantalla y teclado.

Frecuentes y cómo detectarlos fejl

Fejlen kan udvides med rolle="button" i tabindex, og den producerer 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.

Den segundo fejl er ingen gestionar el teclado. En div med en aria-rolle de botón og tabindex, men 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.

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

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 es estado de forma programática.

Para 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. Manualen til combinación de auditoría automática y prueba es la única forma fiable de validar un botón personalizado.

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

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 knap 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 referencer til mere 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 positive rompen este orden og søn 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á.

Alternativas modernas al rol knap

El elemento <knap> nativo sigue 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 brugerdefinerede elementer o Webkomponenter, der er genstand for 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 definen qué rolls ARIA se permiten sobre cada elemento HTML) desaconsejan sobrescribir rolls nativos. Anvendelse af aria-rollen role="button" og <button> er redundant; aplicarlo a un <a> con href es contraproducente. La recomendación general es reserver el rol para contenedores sin semántica propia.

Key Takeaways

• rolle="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 med <knap> nativo siempre que el marcado lo permita.
• En knap med en rolle-knap kræver tabindex="0", manejo de Enter y Espacio, nombre accessible y estado con aria-pressed eller aria-deaktiveret.
• Las herramientas automáticas detectan la falta de foco, pero el comportamiento de teclado y estado exige prueba manual con lector de pantalla.
• Nunca bruger tabindex positivo ni apliques role="button" sobre enlaces que navegan.

Ofte stillede spørgsmål

¿Cuál es la diferencia entre role=“button” y el elemento button?

El elemento <knap> indbefatter en rolle implícito, 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. For det første er ARIA anbefalede el elemento nativo siempre que sea posible.

¿Necesito tabindex con role=“button”?

Sí. En div o span med role="button" er ikke enfocable por defecto, da 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 llamar 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?

Para un botón de alternancia usa aria-pressed="true" o "false" sigú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. Den oprindelige “deaktiveret” er at foretrække som usa til <knap>.

¿Skal du bruge en rolle=“button” og en enlace?

Sí, cuando el enlace navega en anden URL. Beskriv rollen som en <a href> med rolle="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 økse, Lighthouse eller WAVE señalan violaciones como la falta de foco en elementos con roll interactive. 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 usando NVDA, VoiceOver eller Fortæller.