ARIA & HTML-mönster – testlabb för skärmläsare

En samlingssida för att höra och se hur olika HTML- och ARIA-baserade komponenter beter sig, både med skärmläsare och visuellt. Allt innehåll är fiktiv testdata från "Djurparken", ingen verklig tjänst. Testa gärna varje variant både med mus och med enbart tangentbord (Tab, Skift+Tab, Escape, Enter) och jämför vad som läses upp.

Dialoger

Alert dialog

En modal dialog för kritiska bekräftelser, till exempel innan något raderas. Det finns ingen semantisk HTML-motsvarighet till alertdialog, så här blir det bara en ARIA-variant, plus webbläsarens inbyggda confirm() som en extra referenspunkt.

ARIA role="alertdialog"

Fokus hamnar på knappen Avbryt när dialogen öppnas, enligt rekommenderat mönster, så att Enter av misstag inte bekräftar en oåterkallelig åtgärd. Bakomliggande innehåll görs otillgängligt med inert, precis som i den egenbyggda modala dialogen ovan.

Referens Webbläsarens inbyggda confirm()

Varken HTML eller ARIA, utan webbläsarens egen inbyggda dialogruta. Går inte att styla, men är med som ljudmässig jämförelsepunkt.

Menyer

Ingen av de tre menytyperna nedan har någon semantisk HTML-motsvarighet, så hela gruppen är ARIA-baserad. Piltangenter navigerar, Escape stänger och Enter/mellanslag väljer, i linje med det vedertagna mönstret.

Menubar (applikationsmeny)

En horisontell meny med undermenyer, ungefär som Arkiv/Redigera i ett skrivbordsprogram.

ARIA role="menubar" med undermenyer

Vänster/höger pil flyttar mellan huvudalternativen, ner-pil öppnar undermenyn, upp/ner navigerar i den, Escape stänger ett steg i taget.

Kontextmeny

En meny som visas vid högerklick eller med tangentbordets Meny-tangent (Skift+F10).

ARIA Egenbyggd kontextmeny (role="menu")

Högerklicka på rutan nedan, eller tabba dit och tryck Skift+F10 eller Meny-tangenten.

Igelkott (högerklicka eller Skift+F10 här)

Referens Webbläsarens inbyggda kontextmeny

Högerklicka var som helst på sidan utanför testrutan ovan för att se webbläsarens egen, ostyrbara kontextmeny, som ljudmässig jämförelse.

Webbplatsnavigering och trädstrukturer. En vanlig navigeringsmeny på en webbplats ska inte byggas med role="menu" som i gruppen Menyer ovan. role="menu" är till för programliknande menyer med åtgärder, och gör att skärmläsare byter läge och förväntar sig piltangenter. Webbplatsnavigering är vanliga länkar som nås med Tab.

Undermenyerna öppnas med vanliga knappar som visar och döljer en lista med länkar. Sidan man befinner sig på markeras med aria-current="page", som läses upp som "aktuell sida". Länkarna leder inte till riktiga sidor, de flyttar bara markeringen.

HTML <details> med attributet name

Ingen JavaScript behövs för att öppna och stänga. Attributet name gör att bara en undermeny kan vara öppen åt gången. Kända begränsningar: Escape och klick utanför stänger inte undermenyn.

ARIA Knappar med aria-expanded och aria-controls

Tab går mellan knappar och länkar. Escape stänger en öppen undermeny och flyttar fokus till dess knapp. Undermenyn stängs också när fokus lämnar navigeringen eller när du klickar utanför.

Trädvy (tree)

En hierarkisk lista där grenar kan fällas ut och ihop, som mappar i en filhanterare. Det finns ingen HTML-motsvarighet. Närmast kommer nästlade listor eller nästlade <details>, men de ger inte trädets tangentbordsnavigering eller upplästa nivåer.

ARIA role="tree" med role="treeitem" och role="group"

Hela trädet är ett tabbstopp. Upp och ner pil flyttar mellan synliga rader. Höger pil fäller ut en gren, eller går till dess första rad om den redan är utfälld. Vänster pil fäller ihop en gren, eller går till överordnad gren. Home och End går till första och sista synliga raden. Enter eller mellanslag väljer en rad. Skriv en bokstav för att hoppa till nästa rad som börjar på den.

Skogsområdet
- Räv
- Lodjur
Fågelhuset
- Uggla
- Hök
Smådjurshörnan
- Igelkott
- Gnagare
  - Ekorre
  - Hamster

Listor & val

Listor där ett eller flera alternativ väljs, comboboxar som kombinerar textfält och lista, samt tabeller och rutnät.

Listbox – enkelval

En lista där ett alternativ väljs i taget. Jämför webbläsarens inbyggda <select size> mot en egenbyggd lista med role="listbox".

HTML Inbyggd <select size="5">

Med attributet size större än 1 blir en <select> en riktig listbox i stället för en nedfällbar meny.

Favoritfärg

ARIA Egenbyggd med role="listbox"

Val följer fokus: piltangenterna flyttar markören och väljer samtidigt, via aria-activedescendant.

Favoritfärg

Listbox – flerval

Flera alternativ kan väljas samtidigt. Piltangenterna flyttar bara markören, mellanslag växlar val av det markerade alternativet.

HTML Inbyggd <select multiple size="5">

Till skillnad från den egenbyggda varianten nedan räcker inte mellanslag ensamt för att välja flera. Webbläsarens inbyggda flervalslista kräver en modifieringstangent.

Favoritfärger

Välj flera separata: håll ned Ctrl (Cmd på Mac) och klicka. Med tangentbord: Ctrl+pil flyttar utan att ändra valet, Ctrl+mellanslag växlar val. Välj ett sammanhängande intervall: Skift+klick eller Skift+pil. I NVDA och JAWS behöver fokusläget/formulärläget vara aktivt.

ARIA Egenbyggd med role="listbox" och aria-multiselectable

Mellanslag växlar val, Skift+pil förlänger ett sammanhängande urval, Ctrl+A väljer allt.

Favoritfärger

Combobox – endast val

En nedfällbar meny där man väljer ett fördefinierat alternativ, utan att kunna skriva fritext.

HTML Vanlig <select>

Dagens rätt

ARIA Egenbyggd med role="combobox" (select-only)

Fokus stannar på fältet hela tiden, det uppdaterade valet visas via aria-activedescendant medan listan är öppen.

Dagens rätt

Combobox – redigerbar med autokomplettering

Ett textfält som filtrerar förslag medan man skriver.

HTML Inbyggd <input list> med <datalist>

Webbläsaren sköter filtrering och listning helt själv, ingen JavaScript krävs.

Sök efter en rätt

ARIA Egenbyggd med role="combobox" och aria-autocomplete="list"

Listan byggs om vid varje tangenttryckning utifrån vad som matchar det du skrivit.

Sök efter en rätt

Combobox – redigerbar utan filtrering

Ett textfält där man kan skriva fritt, men där förslagslistan alltid visar samma fasta alternativ oavsett vad som skrivs, till exempel senast använda val. Ingen tillförlitlig HTML-motsvarighet finns, eftersom webbläsare normalt filtrerar <datalist> automatiskt, så det blir bara en ARIA-variant.

ARIA role="combobox" med aria-autocomplete="none"

Listan öppnas när fältet får fokus eller vid ner-pil, och ändras inte av vad du skriver.

Skriv ett djur (senaste valen visas alltid)

Grid & tabell

Två olika saker som ofta blandas ihop. En vanlig läsbar datatabell ska alltid vara en riktig <table>, aldrig role="grid". role="grid" är till för interaktiva rutnät där cellerna innehåller kontroller, till exempel ett kalkylblad. Här jämförs en statisk tabell mot ett redigerbart rutnät, inte samma sak byggt på två sätt.

HTML Statisk datatabell med <table>

JAWS har egna tabellkommandon (till exempel Ctrl+Alt+piltangenter) för den här typen av innehåll.

Djurparkens djur
Djur	Färg	Hemvist
Räv	Orange	Skogsbrynet
Uggla	Brun	Trädkojan
Igelkott	Grå	Buskarna
Lodjur	Beige	Klippavdelningen

ARIA Interaktivt rutnät med role="grid"

Piltangenterna flyttar mellan celler i två dimensioner, Home/End går till radens första/sista cell, Ctrl+Home/End går till hela rutnätets första/sista cell. Enter/mellanslag växlar knappen i den markerade cellen.

Djur Synlig Favorit

Räv

Uggla

Igelkott

Lodjur

Sorterbar tabell (aria-sort)

En vanlig datatabell där kolumnrubrikerna är knappar som sorterar tabellen. aria-sort anges bara på den kolumn som tabellen just nu är sorterad efter, och läses upp som till exempel "sorterad stigande" när du hamnar på rubriken. Eftersom ändringen inte alltid läses upp direkt när du klickar, bekräftas sorteringen också med ett statusmeddelande.

ARIA <table> med aria-sort och knappar i rubrikerna

Första klicket på en kolumn sorterar stigande, nästa klick fallande.

Djurparkens djur. Kolumnrubrikerna är knappar som sorterar tabellen.

Ekorre	1	Ekdungen
Igelkott	2	Buskarna
Lodjur	5	Klippavdelningen
Räv	3	Skogsbrynet
Uggla	7	Trädkojan

Flikar & innehåll

Tabs

Ingen HTML-motsvarighet finns, hela mönstret är ARIA-baserat. Vänster/höger pil flyttar och aktiverar fliken direkt (automatisk aktivering).

ARIA role="tablist" med role="tab" och role="tabpanel"

Räven är allätare och särskilt aktiv i skymningen.

Accordion (disclosure)

Flera sektioner som kan visas eller döljas var för sig, oberoende av varandra. Jämför inbyggd <details>/<summary> mot en handbyggd variant.

HTML Inbyggd <details>/<summary>

Innehåller rätterna gluten?

Det varierar per rätt, se innehållsförteckningen under varje maträtt.

Finns vegetariska alternativ?

Ja, flera rätter går att beställa i en vegetarisk variant.

Hur beställer jag?

Välj rätt i menyn ovan och bekräfta i kassan.

ARIA Egenbyggd med aria-expanded och aria-controls

Innehåller rätterna gluten?

Finns vegetariska alternativ?

Hur beställer jag?

Knappar & växlar

Knappar som har ett läge (på/av, nedtryckt/inte nedtryckt) och knappar som inte går att använda just nu. Toggle-knapp och switch blandas ofta ihop, men läses upp olika av skärmläsare.

Toggle-knapp (aria-pressed)

En knapp som växlar mellan nedtryckt och inte nedtryckt. Knappens text ska vara densamma i båda lägena, det är läget som ändras. Om texten byts ut, till exempel från "Lägg till" till "Ta bort", ska aria-pressed inte användas.

HTML Inbyggd kryssruta som jämförelse

HTML saknar en toggle-knapp. Den närmaste inbyggda motsvarigheten är en kryssruta, som läses upp som "kryssad" eller "inte kryssad".

Favoritmarkera Räven

ARIA <button aria-pressed>

Läses upp som "växlingsknapp", "nedtryckt" eller liknande beroende på skärmläsare. Enter och mellanslag växlar läget.

Switch (av/på)

En inställning som slås av eller på och gäller direkt, utan att något formulär skickas. Läget visas både med reglagets position och med texten Av/På, inte bara med färg.

HTML <input type="checkbox" switch>

Attributet switch stöds än så länge bara i Safari 17.4 och senare, där rutan ritas som ett reglage och läses upp som en switch. I andra webbläsare blir det en vanlig kryssruta.

Aviseringar om nya djur

ARIA role="switch" med aria-checked

En knapp med role="switch". Läses upp som "switch, av" eller "switch, på". Enter och mellanslag växlar läget.

Aviseringar om nya djur

Verktygsfält (toolbar)

En grupp knappar som hör ihop. Med role="toolbar" blir hela gruppen ett enda tabbstopp, och piltangenterna flyttar mellan knapparna. Jämför med samma knappar utan toolbar-roll, där varje knapp är ett eget tabbstopp.

HTML Vanliga knappar utan toolbar-roll

Varje knapp nås med Tab. Formateringen gäller exempeltexten under knapparna.

ARIA role="toolbar" med roving tabindex

Tab går in i verktygsfältet en gång. Vänster/höger pil flyttar mellan knapparna, Home och End går till första och sista. Tab igen lämnar verktygsfältet.

Inaktiverad knapp: disabled jämfört med aria-disabled

Båda knapparna nedan är inaktiverade tills kryssrutan är ikryssad. Med disabled hoppar Tab över knappen helt, så en tangentbordsanvändare kanske aldrig märker att den finns. Med aria-disabled går knappen att nå och läses upp som inaktiverad, och den kan dessutom förklara varför.

Jag har valt minst en rätt

HTML Attributet disabled

Går inte att nå med Tab. I skärmläsarens läsläge hittas knappen fortfarande, men den går inte att fokusera.

ARIA aria-disabled="true"

Går att nå med Tab och läses upp som inaktiverad tillsammans med en förklaring via aria-describedby. JavaScript ser till att ett klick inte gör något utom att upprepa förklaringen.

Välj minst en rätt innan du skickar beställningen.

Val & värden

Kontroller för att välja bland alternativ eller ange ett värde inom ett intervall. Här har HTML oftast bra inbyggda element, och de egenbyggda varianterna visar hur mycket som behöver återskapas för hand.

Radioknappar

Ett val bland flera. Tab går in i gruppen en gång och hamnar på det valda alternativet, eller det första om inget är valt. Piltangenterna flyttar och väljer samtidigt. Det skiljer sig från kryssrutor, där varje ruta är ett eget tabbstopp.

HTML <fieldset> med <input type="radio">

Portionsstorlek

Liten

Mellan

Stor

ARIA role="radiogroup" med role="radio"

Upp/vänster pil och ner/höger pil flyttar och väljer, med omstart i andra änden. Mellanslag väljer det alternativ som har fokus.

Portionsstorlek

Liten

Mellan

Stor

Kryssruta med tre lägen

En "Välj alla"-ruta som styr flera underordnade rutor. När bara några av dem är ikryssade är huvudrutan i ett tredje läge, delvis ikryssad, som läses upp som "delvis markerad", "halvkryssad" eller liknande.

HTML Kryssruta med egenskapen indeterminate

Det tredje läget finns inte som HTML-attribut, utan sätts med JavaScript via egenskapen indeterminate.

Tillbehör till korven

Välj alla tillbehör

Ketchup
Senap
Rostad lök

ARIA role="checkbox" med aria-checked="mixed"

Varje ruta är ett eget tabbstopp. Mellanslag växlar. Huvudrutan kryssar i alla om den är tom eller delvis ikryssad, och kryssar ur alla om den är helt ikryssad.

Tillbehör till korven

Välj alla tillbehör

Ketchup

Senap

Rostad lök

Slider

Ett värde inom ett intervall. Jämför särskilt hur värdet läses upp: det inbyggda reglaget läser bara siffran, medan den egenbyggda använder aria-valuetext för att läsa upp siffran med enhet.

HTML <input type="range">

Temperatur i terrariet

ARIA role="slider" med aria-valuetext

Höger/upp pil ökar och vänster/ner pil minskar med en grad. Page Up och Page Down ändrar med tre grader, Home och End går till lägsta och högsta. Går även att klicka eller dra på skenan.

Temperatur i terrariet

Spinbutton (nummerfält med stegning)

Ett nummerfält där värdet kan skrivas in eller stegas upp och ner. Tillåtna värden är 1 till 10.

HTML <input type="number">

Upp och ner pil stegar värdet. Stegningsknapparna som vissa webbläsare visar är ofta små och svåra att träffa, och går inte att nå med Tab.

Antal biljetter

ARIA role="spinbutton" med egna knappar

Upp och ner pil stegar med 1, Page Up och Page Down med 5, Home och End går till 1 och 10. Du kan också skriva ett värde och trycka Enter eller lämna fältet. Minus- och plusknapparna är till för mus och pekskärm och nås inte med Tab, enligt det vedertagna mönstret.

Antal biljetter

Förlopp och mätare

Ett förlopp (progress) visar hur långt en pågående uppgift har kommit. En mätare (meter) visar ett mått inom ett känt intervall, till exempel batterinivå, och ändras inte av sig själv. Skärmläsare meddelar sällan förloppsändringar automatiskt, därför får båda varianterna ett statusmeddelande när nedladdningen är klar.

HTML <progress> och <meter>

Nedladdning av djurbilder

Batterinivå i djurkameran

ARIA role="progressbar" och role="meter"

role="meter" är relativt ny (ARIA 1.2), så vissa skärmläsare läser upp den som ett förlopp eller bara som en siffra.

Nedladdning av djurbilder

Batterinivå i djurkameran

Formulär: etiketter & beskrivningar

aria-labelledby ger ett element dess tillgängliga namn, precis som <label> gör. aria-describedby ger en extra beskrivning som alltid läses efter namnet, aldrig i stället för det. De blandas ofta ihop, så här jämförs de sida vid sida.

Namn: label jämfört med aria-labelledby

Samma resultat, två olika tekniker.

HTML Inbyggd <label for>

Namn

ARIA aria-labelledby

Namn

Namn av flera delar

Ingen enkel HTML-motsvarighet, eftersom <label> bara kan peka på ett fält i taget. Med aria-labelledby kan flera texter slås ihop till ett enda tillgängligt namn, till exempel en gruppruvrik plus fältets eget namn.

ARIA aria-labelledby med två id:n

Leveransadress

Postnummer

Gatuadress

Beskrivning: aria-describedby för hjälptext

Ingen tillförlitlig HTML-motsvarighet, bara en ARIA-variant.

ARIA aria-describedby

Lösenord

Minst 8 tecken, inklusive minst en siffra.

Namn och beskrivning tillsammans

Det vanligaste verkliga fallet: ett fält har både ett namn (aria-labelledby) och en beskrivning (aria-describedby) samtidigt. Beskrivningen läggs alltid till efter namnet.

ARIA aria-labelledby och aria-describedby tillsammans

E-postadress

Används bara för orderbekräftelsen.

Felmeddelande med aria-describedby och aria-invalid

Klicka Validera med ett värde som inte bara är siffror för att se felmeddelandet, kopplat via aria-describedby och läst upp direkt via role="alert". Här används role="alert" för både fel och lyckad validering för enkelhetens skull, i en riktig sida är role="status" ofta ett bättre val för det lyckade fallet.

ARIA aria-describedby som felmeddelande

Telefonnummer

Meddelanden & live-regioner

Live-regioner gör att skärmläsaren läser upp ändringar på sidan utan att fokus flyttas. Regionen måste finnas på sidan, gärna tom, innan innehållet ändras. En region som skapas samtidigt som texten läses ofta inte upp alls.

aria-live: polite jämfört med assertive

polite väntar tills skärmläsaren har läst klart det den håller på med. assertive avbryter direkt. Knappen "Skicka båda" skickar ett artigt meddelande och sedan ett brådskande direkt efter, så att du kan höra om det brådskande avbryter.

ARIA aria-live="polite" och aria-live="assertive"

Region med aria-live="polite":

Region med aria-live="assertive":

Status, alert och log

Tre roller som redan fungerar som live-regioner, utan att aria-live behöver anges. status är artig och till för lägesbesked. alert är brådskande och till för fel och varningar. log är artig och läser bara upp nya rader som läggs till, inte hela innehållet.

HTML Elementet <output>

<output> har inbyggd roll status och ska därför läsas upp när innehållet ändras. Stödet varierar dock mellan webbläsare och skärmläsare, så jämför med role="status" nedan.

ARIA role="status"

ARIA role="alert"

ARIA role="log"

Varje klick lägger till en ny rad sist i loggen. Bara den nya raden ska läsas upp.

Toast-notis

En kort notis som visas i hörnet av skärmen och försvinner av sig själv efter 8 sekunder. Fokus flyttas inte dit. Tänk på att text som försvinner automatiskt kan vara svår att hinna läsa (WCAG 2.2.1), så viktig information ska inte bara finnas i en toast.

HTML popover="manual" utan live-region

Visas visuellt precis som en toast, men är ingen live-region. Den läses därför normalt inte upp alls, vilket är ett vanligt misstag.

ARIA Toast i en role="status"-region

Regionen finns hela tiden på sidan, tom. När texten läggs in läses den upp artigt.