ARIA-rolknop: Volledige versie en praktijk

De aria-rol button is een ARIA-rol die ervoor zorgt dat ondersteunende technologieën een generieke container aankondigen als knop, maar het voegt geen gedrag toe: u moet tabindex="0" toevoegen, Enter en Spatie afhandelen en de status weerspiegelen met aria-pressed of aria-disabled. De WAI-ARIA 1.2-specificatie definieert deze rol binnen de categorie widget, en de eerste regel van ARIA adviseert om altijd een native <button> te gebruiken indien mogelijk.

De aria-rol button behoort tot de rollentaxonomie van WAI-ARIA, de W3C-standaard die toegankelijke semantiek voor webinterfaces beschrijft. Wanneer een element role="button" krijgt, stopt de toegankelijkheidsboom die door schermlezers (NVDA, JAWS, VoiceOver, Narrator) wordt gebouwd met het element te presenteren als een generieke div of span en presenteert het als een actiecontrole. Het verschil is enorm voor wie met een schermlezer navigeert: zonder de rol hoort de gebruiker “groep” of simpelweg tekst; met de rol hoort hij “knop” en weet hij dat hij deze kan activeren.

De gebruikelijke verwarring is de overtuiging dat role="button" een div in een functionele knop verandert. Dat doet het niet. De rol verandert alleen de aangekondigde semantiek; het gedrag — focus ontvangen, reageren op het toetsenbord, de actie triggeren — blijft de verantwoordelijkheid van de ontwikkelaar. Deze scheiding tussen semantica en comportamiento is de grote fout die kan optreden.

WAI-ARIA is gepubliceerd als een W3C-aanbeveling en versie 1.2 is de huidige referentie voor rollen, staten en eigenschappen. De rol button is een van de vele widget-rollen en de instellingen voor de specificering, presenteren ARIA 1.0.

Wanneer u role=“button” wel of niet moet gebruiken

De eerste regel van ARIA, erkend in de autorisatiepraktijken van WAI-ARIA (WAI-ARIA Authoring Practices), is het volgende: er bestaat een HTML-element met de semantische inhoud en het gebruik dat noodzakelijk is. <button> heeft al een impliciete rol, toetsenbordfocus, activering met Enter en Spatie, en een uitgeschakelde status. Dit alles opnieuw implementeren met de aria-rol role="button" is extra werk en een bron van bugs.

Bestaan, zonder embargo, zijn de legitieme scenario’s voor de rol. Het meest voorkomende scenario is wanneer de mark-up wordt bepaald door het framework of CMS en u geen <button> kunt invoegen zonder de lay-out of bestaande JavaScript te breken. Andere gevallen zijn de componenten die met elkaar overeenkomen als een internationale structuur een specifieke concurrent vormt, zoals de terceros-widgets.

Gerelateerd: UserWay — Widget voor toegang met een gratis plan voor uw bedrijf.

Een ander scenario, dat meer bespreekbaar is, is een element dat een eigen karakter heeft en noodzakelijkerwijs als knop moet worden gepresenteerd. Als u zich ervan bewust bent dat dit niet het geval is, is er sprake van een dubbelzinnige betekenis. Als u een knop op een andere pagina gebruikt, is het correct dat u <a> toevoegt, geen knop.

Situatie	Aanbevolen oplossing	Motivatie
Actie in formulier of interface	native <button>	Rol, foco en teclado inclusief
Navigeer naar een andere URL	<a href>	Correcte tekst
Niet wijzigbare container	role="button" + teclado + estados	Enige geval waarin de rol iets bijdraagt
Alternatieve knop (aan/uit)	<button aria-pressed>	Status native blootgesteld
Uitgeschakelde knop	<button disabled>	Status en focus beheerd

Je kunt een knop implementeren met de juiste rol=“button”.

Een knop die op een role``knop' is gebaseerd, moet met de volgende frequenties worden gebruikt: foco, teclado, stand en nombre toegankelijk. Als u de gevolgen van deze gebeurtenissen weglaat, ontstaat er een controle die “een beetje” toegankelijk is als u in de echte wereld terechtkomt.

Het foco is geschikt voor tabindex='0', dat het element in de natuurlijke tabelindeling invoegt. Nunca gebruikt ‘tabindex’ met positieve waarden: verander de volgorde van de tabel op de hele pagina en genereer onvoorspelbare waarden. De waarde ‘0’ is correct voor interactieve persoonlijke elementen.

Een kijkje waard: AudioEye — Toegankelijkheidsbeheer: automatiseringscombinatie met menselijke herziening.

De teclado vereist manejar dos teclas: Enter y Espacio. Een <button> persoon reageerde op de vraag, maar een div met een aria-rol die niet solo kan worden gespeeld. Wanneer u de ‘keydown’ indrukt en de opdracht uitschakelt met de tecla en ‘Enter’ of ‘Space’, kunt u de pagina-uitroep verwijderen die Espacio por defect veroorzaakt. Dit zijn details die vaak voorkomen en de botones die solo functioneren met de ratón.

Er wordt gecommuniceerd met ARIA-attributen. Een alternatieve knop is aria-pressed="true" of "false" om aan te geven dat deze actief is. Een knop die in de VS ‘aria-disabled=‘true” is uitgeschakeld, kan de melding niet inhouden dat de interactie alleen is: wanneer u de code in de code blokkeert. Het verschil tussen ‘aria-gehandicapten’ en de oorsprong van ‘gehandicapten’ is dat het eerste element van het bedienbare element en het volgende deel van de tabelindeling wordt weergegeven.

De toegang is eenvoudig te construeren met de zichtbare tekst, als er geen tekst is, met ‘aria-label’ of ‘aria-labelledby’. Een knop die op een bepaalde manier toegankelijk is, is een knop die de lector van de pantalla aankondigt als “knop” op een bepaald moment, als hij dat doet.

<div
  rol = "knop"
  tabindex = "0"
  aria-geperst = "false"
  id = "btn-modo"
>
  Mode-oscuro
</div>

<script>
  const btn = document.getElementById('btn-modo');
  functie toggle() {
    const activo = btn.getAttribute('aria-geperst') === 'true';
    btn.setAttribute('aria-geperst', String(!activo));
  }
  btn.addEventListener('klik', schakelen);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      schakelen();
    }
  });
</script>

Het is een voorste kubus, teclado, estado en nombre. Het is minimaal haalbaar om de zee-bruikbare connector van de pantalla en de teclado te controleren.

Fouten komen vaak voor en kunnen worden gedetecteerd

Als de fout meer wordt uitgebreid, wordt role="button" op tabindex toegepast, waardoor een knop wordt weergegeven die niet kan worden uitgeschakeld door de teclado. De automatisch herramenten detecteren als “een interactief element dat niet kan worden afgespeeld”, een van de overtredingen rapporteert meer over de toegankelijkheidsauditors.

De tweede fout is geen gevolg van de techniek. Een ‘div’ met een aria-rol van de knop en de ‘tabindex’ kan de tecla-recensie weergeven en niet reageren op Enter in Espacio. Het gebruik van de technologie moet worden uitgevoerd: de knop kan niet worden geactiveerd.

Gerelateerd: IAAP CPACC / WAS Certification — Het professionele certificaat dat u ervaring en toegankelijkheid geeft.

Als u een fout maakt, gebruikt u role="button" door een toevoeging. Dit is de navigatie-semantiek en het combineren van de lesgevers, die een aangekondigde “botón” kunnen gebruiken als het gebruik van een uitgebreide versie wordt gemaakt. Als het element navigeert, kan het een verrijking zijn.

De fout wordt veroorzaakt door een alternatieve botone. Een knop die tussen deze manieren wordt gebruikt, is ‘doorgedrukt’ en het gebruik ervan is een feit dat het altijd zal gebeuren. De toeschrijving is een vorm van communicatie die een programma-formaat is.

Om deze problemen te detecteren, worden automatische herramingen uitgevoerd als Lighthouse of WAVE de rol van de rol en het brandpunt gebruikt, waardoor de technologie en de logica van het land niet kunnen worden gevalideerd. Dit is een deel van de handleiding: navegar con Tab, activar con Enter y Espacio, y escuchar la salida del lector de pantalla. De combinatie van automatische auditie en handmatige bediening is een vorm die betrouwbaar is om een ​​personalisatieknop te valideren.

Als u aan het winkelen bent: accessiBe — Superpositie van IA die de cumplimiento WCAG in 48 uur stimuleert.

Probeer een knop met rol=“button”

Het apparaat werkt door de teclado. Neem de pagina op het tabblad op en zorg dat de knop met de aria-rolknop zichtbaar is. Pulsa Enter en Espacio por separado: ambos disparar la acción. Als u de pagina op een knop activeert, schakelt u preventDefault uit.

De tweede fase is een pantalla-consulent. NVDA in Windows, VoiceOver in macOS en Narrator in Windows zijn meer gebruikte referenties. Al enfocar el botón, de lector debe anunciar el rol (“botón”), de naam toegankelijk en de estado si lo tiene. Als u een “groep” aankondigt, wordt er geen melding gemaakt van de gevolgen ervan.

De tercera moeten in de juiste volgorde worden geplaatst. De knop verschijnt in de volgorde van de tabellogistiek, voordat er geen visuele correspondentie meer is. De positieve ‘tabindex’ is eenvoudig te ordenen en geeft een duidelijke indicatie van de implementatie.

La cuarta prueba is het contrast en foco zichtbaar. De foco-indicatie kan niet worden geëlimineerd met ‘omtrek: geen’ zonder een zichtbaar alternatief. Een knop die u kunt ontvangen, hoeft niet de gebruikelijke technologie te gebruiken die naar deze verwijst.

Alternatieve moderne opties op de rolknop

Het element <button> is de grootste optie in 2024 en een nieuw project. De rol, de focus, de techniek en de vestigingen zijn extra speciaal en de navigatie is consistent in de vorm.

Los aangepaste elementen o Webcomponenten van de laatste tijd. Een onderdeel dat het ‘HTML-element’ uitbreidt, kan de knop insluiten en weergeven met de correcte semantica, waardoor het handmatig beheren van het foco en de teclado vereist is dat het met ‘role’ ‘knop” is. De ventilatie is het hergebruik; de oplossing, de grote verantwoordelijkheid voor de implementatie.

Als ARIA in HTML (waarbij de ARIA-rollen worden gedefinieerd als dit HTML-element is toegestaan) kunnen de rollen worden beschreven. Het toepassen van de aria-rol role="button" is een <button> overbodig; gebruik een <a> met href als contraproducent. De algemene aanbeveling is om de rol van concurrenten te reserveren die semantisch goed zijn.

Belangrijkste afhaalrestaurants

• role="button" cambia solo de aankondiging van de semantica; het foco, de teclado en de staat zijn een man die dit implementeert.
• De eerste regel van ARIA raadt aan om <button> te gebruiken als de marcado toestemming geeft.
• Een knop met de aria-rolknop vereist tabindex="0", druk op Enter en Espacio, de naam is toegankelijk en staat met aria-press of aria-disabled.
• De automatische herramiënt detecteert een fout in het brandpunt, waardoor de technische compatibiliteit en het gebruik van een handmatige pantalla-schakelaar kunnen worden overschreden.
• Nunca gebruikt tabindex positief en role="button" toegevoegd aan de navigatie.

Veelgestelde vragen

Is het verschil tussen de rol=“button” en de elementknop?

Het element <knop> bevat de impliciete rol, de focus op de teclado, de activering met Enter en Espacio en de status wordt gedeshabiliteerd met een aanvullende code. Het attributo role="button" brengt de aangekondigde semantische boodschap solo over; De rest van het comportamiento is geprogrammeerd. Daarom beveelt de eerste regel van ARIA het element aan dat de zee mogelijk is.

¿Necesito tabindex con rol=“button”?

Si. Een div of span met role="button" is niet afspeelbaar omdat tabindex="0" de volgorde van de tabel kan weergeven en niet uitschakelbaar is met teclado. De juiste waarde is 0; Positieve waarden veranderen de volgorde van de tabel op de hele pagina en worden gewist.

Wil je weten of een div met rol=“button” reageert op Enter en Espacio?

Wanneer u de ‘keydown’-toets indrukt en de tekentoets ‘Enter’ of ‘Spatie’ uitschakelt. In een e-mailgeval kunt u voorkomenDefault gebruiken om het pagina-verloop te verwijderen. Als deze manejadores de knop gebruiken, is deze niet geactiveerd met teclado.

Weet u zeker dat een knop actief of uitgeschakeld is?

Om een ​​alternatieve knop in de VS te gebruiken, wordt aria-presse``true' of “false’ op de volgende manier weergegeven. Voor een knop die in de VS 'aria-disabled="true" wordt uitgeschakeld, kan de melding dat de verbinding niet alleen wordt geblokkeerd: hoe wordt de aanval in de code belemmerd. Het kenmerk gehandicapt heeft de voorkeur als u een <knop> gebruikt.

Is het praktisch om rol=“button” in een versie te gebruiken?

Als u een andere URL gebruikt, kunt u deze toevoegen. Schrijf de rol van een <a href> met role="button" op de semantische navigatie en verbind de docenten van de pantalla, die een “bot” aankondigt terwijl u een uitgebreide versie gebruikt. Als u een element van het navigatiesysteem gebruikt, kunt u uw rol behouden.

Wilt u fouten detecteren met rol=“button”?

Herramientas automatisch als bijl, Lighthouse of WAVE speelt viooltjes als de focus op elementen die interactief zijn. Omdat er een embargo is, is het niet valide dat de technologie op de huidige logica wordt toegepast, maar de verificatie kan betrouwbaar worden gecombineerd met een automatische audit met handmatig gebruik van NVDA, VoiceOver of Verteller.