Eksempler på ARIA-roller: En komplett veiledning

ARIA-rolleeksemplene viser hvordan rolleattributter kartlegger grensesnittelementer til tilgjengelighetstreet, og WAI-ARIA 1.2-spesifikasjonen definerer 6 rollekategorier – widget, dokumentstruktur, landemerke, levende region, vindu og abstrakt – som dekker mer enn 80 konkrete roller. Denne veiledningen presenterer kopieringsklare praktiske eksempler for hver kategori, samt reglene som bestemmer når en rolle hjelper og når den aktivt skader.

Viktige takeaways

• ARIA-roller forteller hjelpemiddelet hva en gjenstand er; de legger aldri til atferd, fokus eller tastaturstøtte på egen hånd.
• Den første regelen for å bruke ARIA er å foretrekke native HTML-elementer, som allerede har implisitte roller, tilstander og tastaturadministrasjon.
• De seks WAI-ARIA 1.2-rollekategoriene er widget, dokumentstruktur, landemerke, levende region, vindu og abstrakt – abstrakte roller skal aldri vises i markeringen din.
• Landemerkeroller er de mest kostnadseffektive og laveste risiko-ARIAene du kan legge til på et eksisterende XHTML/CSS-nettsted.
• Widget-roller krever nesten alltid JavaScript-kartlegging for tastaturinteraksjon og tilstandshåndtering, eller de skaper en dårligere opplevelse enn vanlig HTML.
• Valider hver rolle med en skjermleser og automatisert kontrollør; en gyldig rolle i spesifikasjonen kan fortsatt være feil for innholdet ditt.

Hva ARIA-roller faktisk gjør

ARIA-roller er tokens som du plasserer i «role»-attributtet for å erstatte eller gi den semantiske identiteten til et element i tilgjengelighetstreet. En <div role="button"> forteller en skjermleser å annonsere “knapp”, men nettleseren behandler den fortsatt som en generisk beholder: den kan ikke fokuseres, den reagerer ikke på Enter eller Space, og den har ikke en deaktivert tilstand.

Dette gapet mellom annonsert semantikk og faktisk atferd er den vanligste kilden til ARIA-feil. Dette er vanlige ariarolleksempler på hvordan semantikk kan avvike fra atferd.

WAI-ARIA-spesifikasjonen, vedlikeholdt av W3Cs arbeidsgruppe for tilgjengelige rike internettapplikasjoner, definerer roller så vel som stater og egenskaper. Roller er “hva er det”-laget; tilstander og egenskaper som “aria-expanded, aria-checkedogaria-labeler "hvilken tilstand er den i"-laget. En rolle uten påkrevde tilstander er ufullstendig –role=“checkbox”kreveraria-checked, og role=“combobox”kreveraria-expanded` pluss en kontrollert listeboks.

Innfødte HTML-elementer har implisitte roller. <knapp> tilsvarer knapprollen, <nav> til navigasjon, <h1> gjennom <h6> til overskrift, og <input type="checkbox"> til avkrysningsboks. Fordi nettleseren automatisk gir rollen, tastaturatferden og tilstanden, er den første regelen for bruk av ARIA – dokumentert i W3Cs ARIA Authoring Practices Guide – å bruke innfødt semantikk når et tilsvarende element eksisterer. Se etter eksplisitte roller bare når ingen innebygde elementer er egnet, for eksempel en egendefinert trevisning eller et fanepanel bygget fra <div>er.

De seks WAI-ARIA-rollekategoriene

WAI-ARIA 1.2 organiserer roller i seks kategorier, og å vite hvilken kategori en rolle tilhører, forteller deg hvor mye JavaScript du skylder den. Her er noen vanlige eksempler på ariaroller:

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

Kategori	Formål	Eksempelroller	JavaScript kreves?
Widget	Interaktive kontroller	button, checkbox, tab, slider, combobox	Ja — tastatur + tilstand
Dokumentstruktur	Organisering av innhold	“heading, list, listitem, table, article`	Nei
Landemerke	Sideområder for navigering	“banner, main, navigation, complementary`	Nei
Levende region	Kunngjør dynamiske oppdateringer	alert, status, log, timer	Vanligvis — for å utløse oppdateringer
Vindu	Undervinduer og dialoger	dialog, alertdialog	Ja — fokusstyring
Abstrakt	Superklasseroller, aldri forfattet	widget, input, section, landemerke	N/A — ikke bruk

Abstrakte roller eksisterer bare for å organisere taksonomien. Å skrive role="input" eller role="section" i HTML-en din er en valideringsfeil og produserer uforutsigbare kunngjøringer fordi disse rollene ikke har noen definert virkemåte for hjelpeteknologi.

Eksempler på landemerkeroller

Landemerke-roller er de sikreste og mest virkningsfulle ARIA-rolleksemplene du kan legge til på et eldre XHTML/CSS-nettsted fordi de ikke krever JavaScript og kartlegger direkte til regioner du allerede har. Et typisk sideskjelett:

<header role="banner">
  <nav role="navigation" aria-label="Principal">
    <ul>...</ul>
  </nav>
</header>
<main role="main">
  <article>...</article>
  <aside role="complementary" aria-label="Artículos relacionados">...</aside>
</main>
<footer role="contentinfo">...</footer>

Hver markørrolle tilsvarer et innebygd element – banner til <header> på toppnivå, «main» til «

Verdt en titt: AudioEye — Tilgjengelighet: automatisert kombinasjon med menneskelig revisjon.

», navigation til <nav>, complementary til <aside>, contentinfo til <footer>. Når du bruker det opprinnelige elementet, er rollen underforstått, og du bør ikke gjenta den. Det eksplisitte role-attributtet får sin plass bare når du sitter fast med <div>-markup som du ikke kan endre, noe som er vanlig i eldre maler og CMS-utdata.

To forbehold er på sin plass her. Først må banner, main og contentinfo vises én gang per side; flere “hoved” landemerker forstyrrer navigasjonen. For det andre, når flere landemerker av samme type eksisterer – si tre «