ARIA-roller, -tilstande og -egenskaber

En live-region, der formidler en presserende, tidsfølsom besked. Skærmlæsere annoncerer den øjeblikkeligt og afbryder den aktuelle tale. Brug sparsomt — reserver til reelle fejl og advarsler; misbrug skaber træthed hos hjælpeteknologi-brugere.

En dialog, der formidler en presserende besked og kræver brugerens svar. Kombinerer dialog-semantik med alert-annoncering. Brug kun til destruktive bekræftelser, fejl der blokerer videre arbejde, eller afbrydelser, der ikke kan vente.

Markerer en selvstændig komposition, der kan stå alene — et blogindlæg, en nyhedsartikel, et forumindlæg eller et produktkort. Brug det native <article>-element først; brug kun role="article", når du ikke kan bruge HTML-elementet.

Indbygget HTML: <article>

Webstedets header-landmark — indeholder typisk logo, primær navigation og søgning. Det øverste <header>-element bærer automatisk denne rolle. Kun ét banner pr. side.

Indbygget HTML: <header> (top-level)

Markerer et element som en knap — en kontrol, der udløser en handling ved aktivering. Brug det native HTML-element <button> først; brug kun role="button" på et <div> eller <span>, når det native element ikke er muligt.

Indbygget HTML: <button>

Markerer et element som et afkrydsningsfelt med to eller tre tilstande. Brug <input type="checkbox"> først; brug kun role="checkbox", når du ikke kan bruge det native input — f.eks. ved en tri-state-kontrol, der skal vise en blandet værdi.

Indbygget HTML: <input type="checkbox">

Markerer et tekstfelt parret med en popup-liste — bruges til autofuldførelse, type-ahead-søgning og brugerdefinerede valglister. Det native <select> håndterer enkeltvalg; brug kun role="combobox", når du har brug for filtrering, brugerdefineret rendering eller fjernforslag.

Indbygget HTML: <select>

Et vartegn for indhold, der understøtter hovedindholdet men er meningsfuldt i sig selv — sidepaneler, relaterede-artikler-bokse, supplerende fremhævninger. Elementet <aside> bærer denne rolle, når det er på topniveau.

Indbygget HTML: <aside>

Sidens overordnede sidefodsvartegn — copyright, kontakt, juridiske links. Det topniveau-element <footer> bærer denne rolle automatisk. Kun ét contentinfo pr. side.

Indbygget HTML: <footer> (top-level)

Markerer et element som definitionen på et begreb. Parres med role="term" (eller native <dfn>) for at knytte begrebet til dets definition. Brug native <dl>/<dt>/<dd> eller <dfn> først — de medfører semantikken gratis.

Indbygget HTML: <dfn>

Markerer en container som en modal eller ikke-modal dialog. Brug det native <dialog>-element med showModal() — det håndterer fokusindespærring, top-layer, baggrundslag og Escape-luk gratis. Brug kun role="dialog", når det native element er umuligt.

Indbygget HTML: <dialog>

Markerer en selvstændig illustrativ blok — billede, diagram, kodelisting — typisk parret med en billedtekst. Brug det native <figure>-element først; brug kun role="figure", når værtselementet ikke kan være et <figure>.

Indbygget HTML: <figure>

Et landmark for en formular — en samling inputkontroller, der indsender data. Et <form>-element eksponeres KUN som et form-landmark, når det har et tilgængeligt navn. Uden et navn er det blot en formular, ikke et landmark.

Indbygget HTML: <form aria-label>

Markerer en generisk gruppering af relaterede elementer. Semantisk lettere end et landmark — skærmlæsere annoncerer ikke grupper i landmark-menuen. Brug <fieldset> + <legend> til grupperede formkontroller; brug role="group" til ikke-formgrupperinger.

Indbygget HTML: <fieldset>

Markerer et element som en overskrift. Brug <h1>–<h6> først — de giver de rette semantikker og det korrekte niveau uden videre. Brug kun role="heading", når du er nødt til at opgradere et element, der ikke kan være et <h*>.

Indbygget HTML: <h1> – <h6>

Markerer et element som et hyperlink — en kontrol, der navigerer til en ny ressource ved aktivering. Brug det native HTML-element <a href> først; brug kun role="link" på en <span> eller <div>, når det ikke er muligt at bruge det native element.

Indbygget HTML: <a href>

Markerer et element som en liste. Brug <ul>, <ol> eller <dl> — de native elementer håndterer rolle, antal og markering. Brug kun role="list" når CSS list-style: none udløser Safaris sletning af listerollen.

Indbygget HTML: <ul> / <ol>

Markerer et element som en liste af valgbare muligheder. Brug <select> til simpelt enkeltvalg — det giver mobilvenlig betjening og fuldt tastaturunderstøttelse. Brug role="listbox" ved tilpasset styling, flervalg eller kombination med combobox.

Indbygget HTML: <select> (single-select)

Markerer et element som ét element i en liste. Brug <li> inde i <ul> eller <ol> — det native element bærer rollen og positionen. Brug kun role="listitem" når det parres med en eksplicit role="list" på et ikke-liste-forældrerelement.

Indbygget HTML: <li>

Landmærket for sidens primære indhold — alt unikt for den aktuelle side, eksklusive gentagne headere, navigationer og footere. Elementet <main> bærer automatisk denne rolle. Nøjagtigt ét main pr. side.

Indbygget HTML: <main>

Markerer en container som en appmenu — popup til File/Edit-lignende menuer eller kontekstmenuer. Der er ingen HTML-ækvivalent. En sides navigationsliste er IKKE en menu; brug <nav> med <ul> af links i stedet.

Markerer en container som en vedvarende menubjælke — den altid synlige vandrette stribe med Filer/Rediger/Vis-lignende menuer fra skrivebordsapplikationer. Adskilt fra menu, der er en popup. Næsten aldrig det rigtige mønster på nettet.

Markerer et element som et handlingspunkt inde i en menu eller menubar. Der er ingen HTML-ækvivalent — menuer er en ARIA-eksklusiv konstruktion. Brug kun denne rolle, når man bygger en egentlig applikationsmenu; en simpel navigationsliste bør IKKE bruge menu/menuitem.

Et landmark, der grupperer et sæt navigationslinks — primær nav, brødkrumme, indholdsfortegnelse. Elementet <nav> bærer denne rolle automatisk. Flere nav-elementer per side er almindeligt og fint, men hvert skal have et unikt tilgængeligt navn.

Indbygget HTML: <nav>

Markerer et element som et valgbart punkt i en listbox. Et option SKAL være et efterkomme-element af en listbox (direkte eller via aria-owns). Brug native <option> inden i <select>; grib efter role="option" kun ved opbygning af en brugerdefineret listbox eller combobox-popup.

Indbygget HTML: <option>

Markerer et element som en fremgangsviser. Brug <progress> først — det leverer semantikken, den determinate visualisering og value-attributterne native. Grib efter role="progressbar", når man skal styles ud over, hvad det native element tillader.

Indbygget HTML: <progress>

Markerer et element som en enkelt valgmulighed i en gensidigt eksklusiv gruppe. Et radio SKAL leve inden i en radiogroup (eller en native fieldset). Brug <input type="radio"> først; grib efter role="radio" kun, når det native input er umuligt.

Indbygget HTML: <input type="radio">

Et generisk vartegn for indhold, der ikke passer til banner, main, navigation, complementary eller contentinfo — men stadig er vigtigt nok at navigere til. Et <section>-element bliver et region-vartegn kun når det har et tilgængeligt navn.

Indbygget HTML: <section aria-label>

Et vartegn der grupperer en søgeformular. Giver skærmlæserbrugere mulighed for at hoppe direkte til søgefunktionen. Det native <search>-element (HTML 2024) bærer automatisk denne rolle; brug role="search" på et <form>-element for bredere browsersupport i dag.

Indbygget HTML: <search>

Markerer et element som et tekstinput afgrænset til en søgeopgave. Brug <input type="search"> først — det giver ryd-knap-affordances i de fleste browsere og søgesemantikken gratis. Brug role="searchbox" kun på et brugerdefineret contenteditable-søgefelt.

Indbygget HTML: <input type="search">

Markerer et element som en skillelinje mellem indholdsafsnit eller elementer i en sammensat widget. Brug <hr> først til tematiske skift i løbende tekst; brug role="separator" til adskillelse af elementer inde i en menu, værktøjslinje eller anden widget.

Indbygget HTML: <hr>

Markerer et element som en inputkomponent, der vælger en værdi inden for et interval. Brug <input type="range"> i første omgang; grib kun efter role="slider" til brugerdefinerede knapper — f.eks. en to-tommers intervalvælger, som den native komponent ikke understøtter.

Indbygget HTML: <input type="range">

Et live-område, der formidler ikke-hastende rådgivende oplysninger. Skærmlæsere annoncerer ændringer høfligt — ved næste pause i talen, uden at afbryde. Brug til rutinebekræftelser, tæller og statusopdateringer. Det native <output>-element bærer denne rolle.

Indbygget HTML: <output>

Markerer et element som en til/fra-kontakt. Funktionelt tæt på et afkrydsningsfelt, men annonceres som "switch, on" eller "switch, off" frem for "checked" — passer bedre til en indstillingstoggle. Der er endnu intet native HTML-ækvivalent.

Markerer et element som én fane i en fanebladsgrænseflade. En fane SKAL være indlejret i en tablist og BØR referere til det tilknyttede tabpanel via aria-controls. Der er intet native HTML-faneelement — faner er et ARIA-eksklusivt mønster.

Markerer en beholder som fanebladrækken i en fanebladsgrænseflade. Indeholder role="tab"-børn. Faner og tabpanels er et ARIA-eksklusivt mønster — der er intet native HTML-tablist.

Markerer det indholdspanel, der er parret med en fane. Hvert tabpanel mærkes af sin fane via aria-labelledby; fanen refererer til panelet via aria-controls. Vis ét panel ad gangen; skjul de øvrige med hidden-attributten.

Markerer et element som en enkelt- eller flerlinjet tekstinput. Brug <input type="text"> eller <textarea> i første omgang — de håndterer al textbox-adfærd gratis. Grib kun efter role="textbox", når du bygger en rich text-editor på et contenteditable-element.

Indbygget HTML: <input type="text"> / <textarea>

Markerer en beholder som en værktøjslinje — en gruppe relaterede kontrolelementer (en formateringsbjælke, en række ikonknapper). Reducerer tab-stop-antallet: 10 knapper bliver ét tab-stop med piletaster til at navigere imellem dem.

Markerer et element som en hierarkisk beholder af treeitems — en filstifinder, indlejrede kategorier eller et organisationsdiagram. Ét tab-stop, piletastersnavigation, udvid/sammenfold. Der er ingen tilsvarende HTML-komponent.

Markerer et element som ét punkt i et træ. Et treeitem kan udvides (overordnet for flere treeitems) eller være et bladpunkt. Brug kun ved opbygning af en hierarkisk navigator — filstifinder, organisationsdiagram, indlejrede kategorier — der kræver piletastersnavigation med ét tab-stop.

Styrer, om hjælpeteknologi annoncerer en live-regions fulde indhold ved opdatering eller kun den del, der ændrede sig. Standard er "false" (kun diff'en). Sæt "true", når konteksten kun giver mening som en hel sætning.

Markerer en region som midt i en opdatering, så hjælpeteknologi undertrykker midlertidige annonceringer. Sæt til "true" under indlæsning eller ved store DOM-ændringer; skift tilbage til "false", når regionen er stabil.

Angiver den aktuelle markerede tilstand for et afkrydsningsfelt, en radioknap eller et afkrydsningsmenupunkt. Accepterer "true", "false" eller "mixed". Det native HTML-afkrydsningsfelt håndterer dette automatisk — sæt det kun manuelt på brugerdefinerede widgets.

Markerer det element, der repræsenterer det aktuelle element i et sæt — den aktive side i en navigation, det aktuelle trin i en guide, dags dato i en datovælger. Mere specifik end aria-selected; brug det på links og elementer, hvor udvælgelse ikke er den rette metafor.

Angiver, at et kontrolelement er synligt og fokuserbart, men ikke reagerer på brugerinput. Foretræk det native HTML-attribut disabled, når det er tilgængeligt; brug aria-disabled, når elementet skal forblive fokuserbart eller modtage et tooltip.

Angiver, om et sammenklappelig element — disclosure-knap, combobox, menu, treeitem — aktuelt er åbent. Tager "true" eller "false". Parres typisk med aria-controls, der peger på den region, kontrolelementet åbner.

Fjerner et element og alle dets efterkommere fra tilgængelighedstræet. Seende brugere ser stadig elementet; hjælpeteknologi når aldrig frem til det. Forbeholdt dekorativt indhold — anvend det aldrig på et fokuserbart element.

Angiver, at et formularfelt ikke har bestået validering. Par med aria-describedby, der peger på den menneskeläsbare fejlmeddelelse, så skærmlæseren annoncerer både den ugyldige tilstand og årsagen.

Markerer en region, hvis opdateringer skal annonceres af hjælpeteknologi uden at flytte fokus. Vælg "polite" i de fleste tilfælde, "assertive" kun til genuint presserende opdateringer. Regionen skal være i DOM ved initial rendering.

Fortæller hjælpeteknologi, at resten af siden er inert, mens en dialog er åben. Sæt til "true" på role="dialog" eller role="alertdialog". Gør ikke baggrunden faktisk inert — kombinér med inert-attributten eller en fokus-fælde.

Angiver, om en skifteknap aktuelt er trykket. Sæt til "true", når skiftet er tændt, "false", når det er slukket; hjælpeteknologien annoncerer tilstanden sammen med labelen.

Angiver at en formularkontrols værdi ikke kan redigeres, men at kontrollen stadig er operabel — fokuserbar, kopierbar og indsendt med formularen. Adskiller sig fra aria-disabled, som gør kontrollen inoperabel.

Angiver at et element inde i en enkelt- eller flervalgs-beholder er aktuelt valgt. Bruges på tab, option, gridcell, treeitem og lignende roller. Adskiller sig fra aria-checked (afkrydsningsfelt/radio) og aria-pressed (skifteknap).

På et sammensat widget peger den på ID'et for det underordnede element, der er aktivt i øjeblikket. DOM-fokus forbliver på beholderen, mens et virtuelt fokus bevæger sig på tværs af børn. Alternativ til roving tabindex for listbokse, combobokse og gitre.

På en tekstboks eller komboboks erklærer den, hvilken type autofuldførelse kontrollen tilbyder — inline-forslag, en liste med valgmuligheder, begge dele eller ingen. Adskilt fra HTML-attributten autocomplete, som handler om formularfelt-semantik for browseren.

Navngiver det eller de elementer, hvis tilstedeværelse eller indhold denne kontrol styrer. Typiske par: en fane styrer sit tabpanel, en udvidelses-knap styrer et afsløret område. Understøttelsen på tværs af hjælpeteknologi er ujævn — brug sparsomt.

Refererer til et eller flere element-id'er, hvis tekst bliver den udvidede beskrivelse af dette element. Annonceres efter det tilgængelige navn. Bruges til hjælpetekst, formathints og inline-fejlmeddelelser.

Fortæller hjælpeteknologi, at aktivering af dette element åbner en popup, og hvilken type. Accepterer "menu", "listbox", "tree", "grid", "dialog" eller "true" / "false". Brug aria-expanded samtidig, så hjælpeteknologi også kan annoncere, om popuppen er åben.

Giver et tilgængeligt navn som en streng, når der ikke er nogen synlig tekst. Brug kun, når der ikke er nogen synlig etiket — hvis der er synlig tekst, foretræk aria-labelledby, så det talte navn svarer til det, brugeren ser.

Refererer til et eller flere element-id'er, hvis synlige tekst bliver det tilgængelige navn for dette element. Foretrækkes frem for aria-label, når tekst på skærmen allerede beskriver elementet.

Angiver det hierarkiske niveau for et element i en struktur. Påkrævet på role="heading"-elementer; bruges også på role="treeitem" og role="listitem" i indlejrede lister. Heltalsværdi, der starter ved 1.

Erklærer et forælder-barn-forhold i tilgængelighedstræet, når DOM-strukturen ikke udtrykker det. Genforeldrer de refererede elementer som børn af dette element i AT's øjne. Et kraftfuldt redskab — let at misbruge.

Position for et punkt i et sæt, når DOM ikke kan udtrykke det — typisk fordi punkter er virtualiserede, paginerede eller filtrerede. Parres altid med aria-setsize, så skærmlæsere kan annoncere "3 af 47".

Angiver at brugerinput er påkrævet i en kontrol, før en formular kan indsendes. Brug HTML-attributten required på native formularfelter; brug aria-required kun når ingen HTML-ækvivalent findes — f.eks. en combobox bygget på et div-element.

Det samlede antal elementer i et sæt, når DOM'en ikke indeholder dem alle. Parres med aria-posinset, så en skærmlæser kan annoncere "element 14 af 5.000" selv om kun fem er renderet. Brug -1 hvis totalen er ukendt.

Annoncerer den aktuelle sorteringsretning på en kolonne- eller rækkeoverskrift i et sortérbart gitter eller en tabel. Værdier: "ascending", "descending", "other" eller "none". Kun én overskrift i tabellen bør have en sorteret værdi ad gangen.

Den aktuelle numeriske værdi for en range-widget — slider, progressbar, spinbutton, scrollbar. Par med aria-valuemin og aria-valuemax, så hjælpeteknologi kan annoncere en meningsfuld position. Brug aria-valuetext til ikke-numeriske labels.