Lijst met ARIA-rollen: beste referenties vergeleken

De lijst met rollen van ARIA is compleet met 82 waarden gedefinieerd in de specifieke WAI-ARIA 1.2 van W3C, georganiseerd in zes functionele categorieën: documentrollen, oriëntatiepunten, widgets, structuur, vensters en abstracte rollen. Zorg ervoor dat de referenties die u raadpleegt afhankelijk zijn van een snelle tabel, documentatie met het indienen van een code of een besluit over de toepassing van een cada-rol.

Belangrijkste punten

• De specifieke WAI-ARIA 1.2 definieert 82 rollen, maar een kleine subset wordt in de dagelijkse praktijk van een toegankelijke XHTML/CSS-site gebruikt.
• De eerste regel van ARIA is belangrijk: als er een HTML-element bestaat met de semantische betekenis die nodig is, gebruik dat in plaats van het toevoegen van een rol.
• De abstracte rollen (als role="widget" of role="input") mogen nooit in de markup worden geschreven; ze dienen alleen als taxonomische basis.
• Een verwijzing naar de front-end omvat de rol, de verplichte ARIA-attributen, de toegestane statussen en een echt markup-voorbeeld.
• De rollen van oriëntatiepunten en de widget concentreren de meeste fouten die worden gedetecteerd door automatische auditors als axe-core of Lighthouse.

Wat is een ARIA-rol en waarom heb je een betrouwbare lijst nodig

Een rol van ARIA is een waarde die een element toebedeelt aan de rol die wordt toegeschreven aan de communicatie met de hulptechnologie die een tip van de representatieve componenten bevat. De navigator legt deze rol uit door de toegankelijkheidsboom te verkennen, en een schermlezer als NVDA, JAWS of VoiceOver vertolkt een concrete aankondiging: “knop”, “tabblad”, “regio”, “dialoogvenster”.

De specifieke WAI-ARIA, die door de W3C wordt beheerd met de ARIA-groep, definieert de rol van elke vestigingseigenschap en de juiste vergunning. Versie 1.2 is de aanbevolen werkelijke versie en ARIA 1.3 wordt vervolgens uitgevoerd. Voor het downloaden van XHTML en CSS is de lijst met rollen geen decoratieve catalogus: de waarde van de toepassing is dat er een conflict ontstaat tussen de semantische kenmerken van het element en de verklaring, en de schermlezers kunnen dit conflict in de verschillende formaten van de navigatie oplossen.

De officiële roldocumentatie van ARIA in MDN (Mozilla Developer Network) is meer raadpleegbare technologie in het Spaans en Engels, maar het is niet de enige. Er zijn referenties, patrones en valideringsherramingen die verschillende vereisten vereisen. Vergelijk het maar eens met uw trabajo-flujo.

De zes categorieën ARIA-rollen

De officiële taxonomie van de rollen verschilt per functie. Kennis van de categorieën voorkomt dat je in de verkeerde lijst zoekt.

Dokumentrollen. Beschrijft de structuur van een pagina of sectie: article, document, feed, heading, img, list, listitem, math, none, note, presentatie, row, separator, table, term, toolbar, tooltip. Er zijn veel dubbele HTML-elementen, omdat ze zo vaak worden beschreven.

Gerelateerd: accessiBe — Superpositie van IA die de cumplimiento WCAG in 48 uur stimuleert.

Oriëntatiepuntenrollen. Definieer navigeerbare gebieden van de pagina: banner, complementair, contentinfo, form, main, navigatie, regio, search. Dit wordt het meest gebruikt op sites met onvolledige HTML-semantiek.

Widgetrollen. Vertegenwoordigt interactieve besturingselementen: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, slider, spinbutton, switch, tab, tabpanel, textbox, treeitem. Vereist focus en toetsenbordbeheer.

Structuurrollen. Organisatie-widgets omvatten: applicatie, grid, group, listbox, menu, menubar, radiogroup, tablist, tree, treegrid, rowgroup, columnheader, rowheader.

Een kijkje waard: UserWay — Widget voor toegang met een gratis plan voor uw bedrijf.

Vensterrollen. Gesuperponeerd of modaal inhoudsbeheer: alertdialog, dialog.

Abstracte rollen. Er zijn geen elementen geschreven in de opmaak: command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window. Ze dienen ervoor dat de specificatie om eigenschappen tussen rollen over te nemen.

Vergelijking: de meeste referenties van de rollen ARIA

De volgende tabel vergelijkt de referenties met meer gebruik door de Spaanstaligen op basis van praktische criteria.

Referentie	Type	Talen	Codevoorbeelden	Ideaal voor
MDN-webdocumenten (rollen ARIA)	Officiële documentatie	Meertalig (inclusief español)	Ja, per rol	Raadpleeg de diepgaande techniek
WAI-ARIA 1.2 (W3C)	Normspecificatie	Engels	Nee	Exact gedrag verifiëren
WAI-ARIA Handleiding voor schrijfpraktijken	Patroongids	Engels	Ja, volledige patronen	Widgets implementeren met toetsenbord
Referentieblad (cheat sheet)	Samenvattende tabel	Engels	Minimaal	Snel overzicht in de editor
toegankelijkheid.build (referencia ARIA)	Praktische referentie	Engels	Si	Leren met becommentarieerde voorbeelden
Auditors (axe-core, Lighthouse)	Herramienta	Meertalig	Nee	Ongeldige rollen detecteren

De keuze is afhankelijk van het moment. Tijdens de markup schrijven zal een compacte referentie snel gaan. Als u een widget opvraagt ​​die niet in uw vestiging is aangekondigd, is de specificering van W3C en de beschermheer van WAI de bronnen die de twijfel wegnemen.

Hoe u beslist welke rol u toepast: praktische criteria

De juiste beslissing is genomen door ARIA te verwijderen. Deze criteria, op volgorde, voorkomen de meeste fouten.

1. ¿Is er een native HTML-element? Een <knop> heeft al de impliciete rol van een knop. Het toevoegen van role="button" is overbodig en kan conflicten veroorzaken.
2. ¿Voor de rol zijn verplichte attributen vereist? Voor role="checkbox" is aria-checked vereist. role="slider" vereist aria-valuenow, aria-valuemin en aria-valuemax. Als je deze toestanden niet kunt behouden, schaadt de rol meer dan dat het helpt.
3. ¿De rol omvat toetsenbordbeheer? Widgetrollen vereisen navigatie met pijlen, Home, End en Esc, afhankelijk van het patroon. Een role="tablist" zonder pijlbediening is erger dan er geen hebben.
4. ¿Is de rol abstract? Als het in de lijst met abstracte rollen staat, mag het niet worden geschreven.
5. ¿Is de rol verouderd of niet meer gebruikt? Sommige waarden zijn gewijzigd tussen ARIA 1.0 en 1.2. Raadpleeg altijd de actuele versie.

De eerste regel voor het gebruik van ARIA, erkend in de W3C-techniekengids, is het principe: gebruik waar mogelijk native HTML. ARIA is een patch voor als HTML niet genoeg is, en geen vervanging.

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

Fouten komen vaak voor bij het raadplegen en toepassen van de rollenlijst

Een gebruikelijke fout bestaat uit het kopiëren van een rol van een verwijzing naar de vereiste attributen. role="combobox" in ARIA 1.2 werkt met respect voor 1.0 en is aria-expanded en een relatie met een listbox tussen aria-controls. Pas de anti-versieversie toe op de aankondiging tijdens actuele lectoraten.

Het is ook gebruikelijk om role="presentation" of role="none" te gebruiken om de semantiek “op te schonen”, zonder te begrijpen dat dit het element uit de toegankelijkheidsboom elimineert, inclusief de onderliggende elementen in sommige gevallen. Dit verschijnt ook met de frequentie role="application", die alle toetsenbordbediening naar de widget overbrengt en snelkoppelingen voor schermlezers uitschakelt; het is gereserveerd voor complexe webapplicaties, niet voor formulieren.

De rollen van mijlpaalduplicaties veroorzaken verwarring: op de ‘role=“main”op de andere pagina, of eenrole=“banner”met een`, ontstaat een navigatie in onsamenhangende regio’s. De validatie met axe-core of met de toegangspoort tot de navigatie detecteert verschillende van deze gevallen, een unieke automatische tool kan de werking van de echte pantalla controleren.

Een kijkje waard: Deque axe DevTools Pro — Het industriële tijdperk zal de toegankelijkheid tijdens het gebruik vergroten.

Tools voor geldige rollen in uw marcado

De combinatie van rollen combineert handmatige inspectie en automatisering. De DevTools van Chrome en Firefox bevatten een toegangspaneel dat de moeite waard is om het operationele systeem te ontvangen, met de rolberekening van elke andere plek. Het formulier is directer dan een rol die kort of bondig wordt verklaard voor de natuurlijke semantiek.

axe-core, geïntegreerd in Lighthouse en beschikbare uitbreiding, ongeldige rollen, verplichte attributen en tegenstrijdige combinaties. De uitbreiding van Accessibility Insights for Web, gebaseerd op de regels van de bijl, biedt ook vergelijkingen met bedrijven. Voor echte gebruikers, NVDA en Windows en VoiceOver op macOS is de definitieve verificatie definitief: het detecteert het aangekondigde resultaat begrijpelijk in de context.

De toegankelijkheidsdocumentatie van MDN en de beschermheer van WAI-ARIA van W3C zijn de bronnen die gedurende de looptijd van het programma kunnen worden gebruikt. De eerste uitleg over deze rol; de tweede fase kan een combinatie van complete componenten zijn.

Bronnen en verder lezen

• WAI-ARIA — Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) is een technische specificatie gepubliceerd door het World Wide Web Consortium (W3C) die…

Veelgestelde vragen

Hoeveel ARIA-rollen zijn er?

De W3C WAI-ARIA 1.2-specificatie definieert in totaal 82 rollen, verdeeld over document-, oriëntatiepunt-, widget-, structuur-, venster- en abstracte rollen. In deze context wordt bij de gebruikelijke ontwikkeling slechts een fractie gebruikt: abstracte rollen worden nooit geschreven en veel documentrollen dupliceren oorspronkelijke HTML-elementen.

Wat is het verschil tussen een ARIA-rol en een ARIA-attribuut?

Een rol die ARIA beschrijft, is een element, waarbij de attributen van ARIA hun land of propedeuse beschrijven. Bijvoorbeeld, role="checkbox" identificeert de component en aria-checked="true" communiceert als deze is aangevinkt. De rollen worden toegeschreven aan de naam ‘rol’; de statussen en eigenschappen gebruiken de prefix aria-.

Moet ik ARIA gebruiken als ik al semantische HTML gebruik?

In de meeste gevallen niet. Semantische HTML onthult al impliciete rollen: <nav> is equivalent aan role="navigation" en <main> is equivalent aan role="main". Het expliciet toevoegen van de rol is overbodig en kan tot conflicten leiden. ARIA is gereserveerd voor componenten die HTML niet dekt, zoals tabbladen, bomen of complexe menu’s.

Welke ARIA-rollen mag ik nooit in de markup schrijven?

Er mogen nooit abstracte rollen verschijnen: command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget en window. Ze bestaan ​​alleen voor de specificatie om de overerving van eigenschappen tussen rollen te definiëren. Het schrijven ervan levert een ongeldige rol op die validators markeren.

Hoe controleer ik of een ARIA-rol correct werkt?

De verificatie combineert drie stappen: het inspecteren van de toegankelijkheidsboom in de DevTools van de browser om de berekende rol te bevestigen, het doorgeven van een validator zoals axe-core om ontbrekende verplichte attributen te detecteren, en testen met een echte schermlezer zoals NVDA of VoiceOver. Alleen de laatste stap bevestigt dat de aankondiging begrijpelijk is voor een persoon.

Welke rollen ARIA veranderen tussen versies van de specificatie?

Si. ARIA 1.1 biedt rollen als feed en switch, en ARIA 1.2 wijzigt de gedrag van combobox en consolideert andere waarden. ARIA 1.3 is verkrijgbaar. Raadpleeg de nieuwe versie van de specifieke versie die niet meer van toepassing is op de verouderde moderne schermlezers van verschillende vormen.