ARIA-roller, -tillstånd och -egenskaper

En direktsänd region som förmedlar ett brådskande, tidskänsligt meddelande. Skärmläsare meddelar det omedelbart och avbryter pågående tal. Använd sparsamt — reservera för verkliga fel och varningar; missbruk orsakar trötthet hos hjälpmedelsanvändare.

En dialogruta som förmedlar ett brådskande meddelande och kräver användarens svar. Kombinerar dialogrutesemantik med aviseringsmeddelande. Använd bara för destruktiva bekräftelser, fel som blockerar fortsatt arbete eller andra avbrott som inte kan vänta.

Markerar en fristående komposition som kan stå på egen hand — ett blogginlägg, en nyhetsartikel, ett forumssvar eller ett produktkort. Använd det inbyggda <article>-elementet i första hand; använd role="article" bara när HTML-elementet inte kan användas.

Inbyggd HTML: <article>

Webbplatsens rubriklandmärke — innehåller vanligen logotyp, primär navigering och sök. Det översta <header>-elementet bär denna roll automatiskt. Bara ett banner per sida.

Inbyggd HTML: <header> (top-level)

Markerar ett element som en knapp — en kontroll som utlöser en åtgärd vid aktivering. Använd det inbyggda HTML-elementet <button> i första hand; nå bara för role="button" på en <div> eller <span> när det inbyggda elementet är omöjligt att använda.

Inbyggd HTML: <button>

Markerar ett element som en kryssruta med två eller tre tillstånd. Använd <input type="checkbox"> i första hand; nå bara för role="checkbox" när du inte kan använda det inbyggda elementet — till exempel när du bygger en tri-state-kontroll som måste visa ett blandat värde.

Inbyggd HTML: <input type="checkbox">

Markerar en textinmatning ihopkopplad med en popuplista med värden — används för autokomplettering, type-ahead-sökning och anpassade select-menyer. Det inbyggda <select>-elementet hanterar enkelt enval; nå bara för role="combobox" när du behöver filtrering, anpassad rendering eller fjärrförslag.

Inbyggd HTML: <select>

Ett landmärke för innehåll som stödjer huvudinnehållet men är meningsfullt på egen hand — sidopaneler, relaterade-artiklar-boxar, kompletterande lyftramar. Elementet <aside> bär denna roll när det befinner sig på toppnivå.

Inbyggd HTML: <aside>

Webbplatsens sidfots-landmärke — upphovsrätt, kontakt, juridiska länkar. Det översta <footer>-elementet bär denna roll automatiskt. Endast ett contentinfo per sida.

Inbyggd HTML: <footer> (top-level)

Markerar ett element som definitionen av en term. Para med role="term" (eller native <dfn>) för att koppla termen till sin definition. Använd native <dl>/<dt>/<dd> eller <dfn> i första hand — de ger semantiken gratis.

Inbyggd HTML: <dfn>

Markerar en behållare som en modal eller icke-modal dialog. Använd det native <dialog>-elementet med showModal() — det hanterar fokusinlåsning, top-layer, bakgrunden och Escape-för-stängning gratis. Använd role="dialog" bara när det native elementet är omöjligt.

Inbyggd HTML: <dialog>

Markerar ett fristående illustrativt block — bild, diagram, kodlistning — vanligen parat med en bildtext. Använd det native <figure>-elementet i första hand; använd role="figure" bara när värdelementet inte kan vara en <figure>.

Inbyggd HTML: <figure>

Ett landmärke för ett formulär — en samling inmatningskontroller som skickar data. Ett <form>-element exponeras som ett formulärlandmärke BARA när det har ett tillgängligt namn. Utan namn är det bara ett formulär, inte ett landmärke.

Inbyggd HTML: <form aria-label>

Markerar en generisk gruppering av relaterade element. Semantiskt lättare än ett landmärke — skärmläsare annonserar inte grupper i landmärkmenyn. Använd <fieldset> + <legend> för grupperade formulärkontroller; använd role="group" för icke-formulär-grupperingar.

Inbyggd HTML: <fieldset>

Markerar ett element som en rubrik. Använd <h1>–<h6> i första hand — de bär rätt semantik och korrekt nivå direkt. Välj role="heading" endast när du måste uppgradera ett element som inte kan vara ett <h*>.

Inbyggd HTML: <h1> – <h6>

Markerar ett element som en hyperlänk — en kontroll som navigerar till en ny resurs när den aktiveras. Använd det inbyggda HTML-elementet <a href> i första hand; välj role="link" på ett <span> eller <div> bara när det inbyggda elementet inte kan användas.

Inbyggd HTML: <a href>

Markerar ett element som en lista med poster. Använd <ul>, <ol> eller <dl> i första hand — det inbyggda elementet hanterar rollen, antalet poster och den visuella markeringen. Använd role="list" bara när CSS list-style: none utlöser Safaris borttagning av listrollen.

Inbyggd HTML: <ul> / <ol>

Markerar ett element som en lista med valbara alternativ. Använd <select> för enkelt enval — det ger mobilvänlig väljare och fullt tangentbordsstöd. Använd role="listbox" när du behöver anpassad styling, flerval med anpassad rendering eller ihopparning med en combobox.

Inbyggd HTML: <select> (single-select)

Markerar ett element som en post i en lista. Använd <li> inuti <ul> eller <ol> — det inbyggda elementet bär rollen och positionen i uppsättningen. Använd role="listitem" bara när det paras med ett explicit role="list" på ett icke-listparent.

Inbyggd HTML: <li>

Landmärket för huvudinnehåll — sidans primära innehåll, exklusive återkommande sidhuvuden, navigering och sidfötter. Elementet <main> bär denna roll automatiskt. Exakt ett main per sida.

Inbyggd HTML: <main>

Markerar en behållare som en appmeny — popup-elementet för File/Redigera-menyer eller kontextmenyer. Det finns ingen HTML-motsvarighet. En webbplats navigeringslista är INTE en meny; använd <nav> med <ul> av länkar i stället.

Markerar en behållare som en beständig menyradslist — den alltid synliga horisontella remsan med Fil/Redigera/Visa-menyer som ses i skrivbordsappar. Skiljer sig från menu, som är ett popup-element. Nästan aldrig rätt mönster på webben.

Markerar ett element som ett åtgärdsobjekt inuti en meny eller menyrad. Det finns ingen HTML-motsvarighet — menyer är ett ARIA-exklusivt konstrukt. Använd den här rollen bara när du bygger en riktig meny (i applikationsstil); en vanlig navigeringslista ska INTE använda menu/menuitem.

Ett landmärke som grupperar en uppsättning navigeringslänkar — primär nav, brödsmulor, innehållsförteckning. Elementet <nav> bär rollen automatiskt. Flera nav-element per sida är vanligt och tillåtet, men var och en måste ha ett unikt tillgängligt namn.

Inbyggd HTML: <nav>

Markerar ett element som ett valbart objekt inuti en listbox. Ett alternativ MÅSTE vara en ättling till en listbox (direkt eller via aria-owns). Använd det inbyggda <option> inuti <select>; nå för role="option" enbart när du bygger en anpassad listbox eller en combobox-popup.

Inbyggd HTML: <option>

Markerar ett element som en förloppsmätare. Använd <progress> först — det levererar semantiken, den bestämda visualiseringen och värdeattributen inbyggt. Nå för role="progressbar" när du måste formatera bortom vad det inbyggda elementet tillåter.

Inbyggd HTML: <progress>

Markerar ett element som ett enda alternativ i en ömsesidigt uteslutande grupp. En radioknapp måste finnas inuti en radiogroup (eller ett inbyggt fieldset). Använd <input type="radio"> först; nå för role="radio" enbart när det inbyggda elementet är omöjligt.

Inbyggd HTML: <input type="radio">

Ett generiskt landmärke för innehåll som inte passar banner, main, navigation, complementary eller contentinfo — men ändå är tillräckligt viktigt att navigera till. Ett <section>-element blir ett region-landmärke enbart när det har ett tillgängligt namn.

Inbyggd HTML: <section aria-label>

Ett landmärke som grupperar ett sökformulär. Låter skärmläsaranvändare hoppa direkt till webbplatsens sökning. Det nativa <search>-elementet (HTML 2024) bär denna roll automatiskt; använd role="search" på ett <form> för bredare webbläsarstöd idag.

Inbyggd HTML: <search>

Markerar ett element som ett textfält avgränsat till en sökuppgift. Använd <input type="search"> först — det ger rensa-knapp-funktion i de flesta webbläsare och söksemantiken kostnadsfritt. Använd role="searchbox" enbart på ett anpassat contenteditable-sökfält.

Inbyggd HTML: <input type="search">

Markerar ett element som en avdelare mellan innehållssektioner eller objekt i en sammansatt widget. Använd <hr> först för tematiska avbrott i prosa; använd role="separator" när du separerar objekt inuti en meny, verktygsfält eller annan widget.

Inbyggd HTML: <hr>

Markerar ett element som ett inmatningsfält för att välja ett värde inom ett intervall. Använd <input type="range"> i första hand; välj role="slider" bara när du behöver ett anpassat spår — t.ex. en tvågreppig intervallväljare, som det inbyggda elementet inte stöder.

Inbyggd HTML: <input type="range">

En live-region som förmedlar icke-brådskande rådgivande information. Skärmläsare presenterar ändringar artigt — vid nästa paus i talet, utan att avbryta. Använd för rutinbekräftelser, antal och förloppsupdateringar. Det inbyggda <output>-elementet bär denna roll.

Inbyggd HTML: <output>

Markerar ett element som en på/av-växel. Funktionellt nära en kryssruta, men presenteras som "switch, on" eller "switch, off" i stället för "checked" — passar bättre för en inställningsväxel. Det finns inget inbyggt HTML-element för detta ännu.

Markerar ett element som en flik i ett flikgränssnitt. En flik MÅSTE ligga inuti en tablist och BÖR referera till sitt kopplade tabpanel via aria-controls. Det finns inget inbyggt HTML-flikelement — flikar är ett ARIA-exklusivt mönster.

Markerar en behållare som flikremsans list i ett flikgränssnitt. Innehåller role="tab"-barn. Flikar och tabpaneler är ett ARIA-exklusivt mönster — det finns inget inbyggt HTML-fliklist-element.

Markerar innehållspanelen som är kopplad till en flik. Varje tabpanel namnges av sin flik via aria-labelledby; fliken refererar till panelen via aria-controls. Visa en panel åt gången; dölj de övriga med hidden-attributet.

Markerar ett element som ett en- eller flerlinjigt textinmatningsfält. Använd <input type="text"> eller <textarea> i första hand — de hanterar allt textbox-beteende direkt. Välj role="textbox" bara när du bygger en rik textredigerare på ett contenteditable-element.

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

Markerar en behållare som ett verktygsfält — en grupperad uppsättning relaterade kontroller (ett formateringsfält, en rad med ikonknappar). Minskar tabb-kostnaderna: ett verktygsfält med 10 knappar ger ett enda tabbtegångspunkt; piltangenterna navigerar mellan knapparna.

Markerar ett element som en hierarkisk behållare med treeitems — en filutforskare, nästlade kategorier eller ett organisationsschema. Enstaka tabbtegångspunkt, piltangentsnavigering, expandera/komprimera. Det finns ingen native HTML-motsvarighet.

Markerar ett element som ett objekt inuti ett träd. Ett treeitem kan vara expanderbart (förälder till fler treeitems) eller terminalt (ett löv). Använd bara när du bygger en hierarkisk navigator — filutforskare, organisationsschema, nästlade kategorier — som behöver piltangentsnavigering med ett enda tabbtegångspunkt.

Styr om hjälpmedelsteknik meddelar hela innehållet i en direktsänd region vid uppdatering eller bara den del som ändrades. Standard är "false" (bara förändringen). Sätt "true" när sammanhanget bara är meningsfullt som en hel mening.

Markerar en region som mitt i en uppdatering så att hjälpmedelsteknik undertrycker interimistiska meddelanden. Sätt till "true" under laddning eller när stora DOM-ändringar pågår; växla tillbaka till "false" när regionen är stabil.

Anger det aktuella kryssade tillståndet för en kryssruta, radioknapp eller menyobjekt med kryssmarkering. Tar värdena "true", "false" eller "mixed". Det inbyggda HTML-kryssrutan hanterar detta automatiskt — sätt det bara manuellt på anpassade widgetar.

Markerar det element som representerar det aktuella objektet i en uppsättning — den aktiva sidan i en nav, det aktuella steget i en guide, dagens datum i en datumväljare. Mer specifikt än aria-selected; använd det på länkar och på objekt där markering inte är rätt metafor.

Indikerar att en kontroll är synlig och fokuserbar men inte svarar på användarinmatning. Föredra det native HTML-attributet disabled när det finns; använd aria-disabled när elementet måste förbli fokuserbart eller ta emot ett verktygstips.

Indikerar om ett expanderbart element — disclosure-knapp, combobox, meny, treeitem — för tillfället är öppet. Tar "true" eller "false". Paras vanligen med aria-controls som pekar på den region kontrollen öppnar.

Tar bort ett element och alla dess ättlingar från tillgänglighetsträdet. Seende användare ser fortfarande elementet; hjälpmedelsteknik når det aldrig. Reservera för dekorativt innehåll; applicera aldrig på en fokusbar kontroll.

Indikerar att en formulärkontroll inte har klarat validering. Kombinera med aria-describedby som pekar på det läsbara felmeddelandet så att skärmläsaren meddelar både det ogiltiga tillståndet och orsaken.

Markerar en region vars uppdateringar ska meddelas av hjälpmedelsteknik utan att flytta fokus. Välj "polite" i de flesta fall, "assertive" för genuint brådskande uppdateringar. Regionen måste finnas i DOM vid initial rendering.

Talar om för hjälpmedel att behandla resten av sidan som inaktiv medan en dialog är öppen. Sätt till "true" på role="dialog" eller role="alertdialog". Gör inte bakgrunden faktiskt inaktiv — kombinera med attributet inert eller en fokusfälla.

Anger om en växlingsknapp är intryckt. Sätt till "true" när växlingen är på, "false" när den är av; hjälpmedlet meddelar tillståndet tillsammans med etiketten.

Anger att ett formulärkontrolls värde inte kan redigeras men att kontrollen fortfarande är operativ — fokuserbar, kopieringsbar och skickas med formuläret. Skiljer sig från aria-disabled, som gör kontrollen inoperativ.

Anger att ett objekt inuti en en- eller flervalsbehållare är markerat. Används på tab, option, gridcell, treeitem och liknande roller. Skiljer sig från aria-checked (kryssruta/radio) och aria-pressed (växelknapp).

På en sammansatt widget pekar detta attribut på ID:t för det underordnade element som är aktivt. DOM-fokus stannar på behållaren medan ett virtuellt fokus rör sig bland barnelementen. Alternativ till roving tabindex för listboxar, comboboxar och tabellgitter.

På en textruta eller combobox deklarerar detta vilken typ av automatisk komplettering kontrollen erbjuder — inline-förslag, en lista med alternativ, båda eller ingen. Skiljer sig från HTML-attributet autocomplete, som handlar om formulärfältssemantik för webbläsaren.

Namnger det element eller de element vars närvaro eller innehåll denna kontroll styr. Vanliga kombinationer: en flik styr sin tabpanel, en disclosure-knapp styr en avslöjad region. Stödet bland hjälpmedelsteknik är ojämnt — använd sparsamt.

Refererar till ett eller flera element-ID vars text blir den utökade beskrivningen av detta element. Annonseras efter det tillgängliga namnet. Använd för hjälptext, formatanvisningar och inline-felmeddelanden.

Informerar hjälpmedelsteknik om att aktivering av kontrollen öppnar ett popup-element, och vilken typ. Accepterar "menu", "listbox", "tree", "grid", "dialog" eller "true" / "false". Kombinera med aria-expanded så AT också kan meddela om popupen är öppen.

Tillhandahåller ett tillgängligt namn som en textsträng när ingen synlig text finns. Använd bara när det saknas en synlig etikett på skärmen — om synlig text finns, föredra aria-labelledby så att det upplästa namnet stämmer med det användaren ser.

Refererar till ett eller flera element-ID:n vars synliga text blir det tillgängliga namnet på detta element. Att föredra framför aria-label när text på skärmen redan beskriver kontrollen.

Anger den hierarkiska nivån för ett element inom en struktur. Krävs på role="heading"-element; används också på role="treeitem" och role="listitem" i nästlade listor. Heltalsvärde, börjar vid 1.

Deklarerar en förälder-barn-relation i tillgänglighetsträdet när DOM-strukturen inte uttrycker den. Omföräldar de refererade elementen som barn till detta element för hjälpmedelsteknikens räkning. Ett kraftfullt verktyg — lätt att missbruka.

Position för ett objekt inom en uppsättning när DOM:en inte kan uttrycka det — vanligtvis för att objekt är virtualiserade, paginerade eller filtrerade. Kombinera alltid med aria-setsize så att skärmläsare kan meddela "3 av 47".

Anger att användarinmatning krävs på en kontroll innan ett formulär kan skickas. Använd HTML-attributet required på nativa formulärfält; använd aria-required enbart när ingen HTML-motsvarighet finns — t.ex. en combobox byggd på ett div-element.

Totalt antal objekt i en uppsättning när DOM:en inte innehåller dem alla. Paras med aria-posinset så att en skärmläsare kan annonsera "objekt 14 av 5 000" även om bara fem är renderade. Använd -1 om totalen är okänd.

På ett kolumn- eller radhuvud i ett sorterbart rutnät eller en tabell presenterar attributet aktuell sorteringsriktning. Värden: "ascending", "descending", "other" eller "none". Endast ett huvud i tabellen bör ha ett sorterat värde åt gången.

Aktuellt numeriskt värde för en intervallwidget — slider, progressbar, spinbutton, scrollbar. Kombinera med aria-valuemin och aria-valuemax så att hjälpmedel kan annonsera en meningsfull position. Använd aria-valuetext för icke-numeriska etiketter.