Namn, roll, värde

Vad det kräver

Allt interaktivt på sidan – knappar, länkar, formulärfält, flikar, skjutreglage, anpassade widgetar – måste exponera tre typer av information för hjälpmedelsteknik:

• Namn – vad kallas den här kontrollen? (“Skicka”, “Stäng dialogrutan”, “Volym”)
• Roll – vilken typ av kontroll är det? (knapp, länk, kryssruta, flik, skjutreglage)
• Värde / tillstånd – för komponenter som har ett: är den intryckt, expanderad, vald? Vilket är det aktuella värdet?

Exponeringen måste vara programmässig – satt i DOM:en, inte målad med CSS. Skärmläsare, punktdisplayer, röststyrningsprogram och switchscanners läser alla tillgänglighetsträdet, inte pixlar.

Hur man uppfyller det

• Använd det inbyggda HTML-elementet när ett sådant finns. <button> levereras med rätt roll, fokus, tangentbordshantering och ett tillgängligt namn från sitt textinnehåll – gratis.
• För ikonknappar utan synlig text, lägg till aria-label (eller visuellt dold text). <button aria-label="Stäng">×</button>.
• För formulärinmatningar, koppla ett <label for> till inmatningens id. Eller omslut inmatningen inuti <label>. Platshållartext är inte en etikett.
• När du måste bygga en anpassad widget av <div> och <span>, lägg till role="…", hantera tabindex, hantera Enter och Space, och reflektera tillstånd med aria-pressed, aria-expanded, aria-checked, aria-selected, aria-valuenow.
• Kör den renderade sidan genom webbläsarens tillgänglighetsträdinspektör (Chrome DevTools → Elementet → Tillgänglighet) och läs varje kontroll: alla bör annonsera som namn + roll + tillstånd.

Vanliga fel

• <div onclick="…"> formaterad som en knapp – ingen roll, inget tangentbord, inget namn. Skärmläsare hoppar över den. Röststyrning kan inte säga “klicka Spara.”
• <div role="button"> utan tabindex="0", utan Enter/Space-hanterare – ser tillgänglig ut, är det inte.
• Ikonknappar (<button><svg /></button>) utan aria-label, aria-labelledby eller visuellt dold text. Annonseras som bara “knapp.”
• Anpassade rullgardinsmenyer byggda med <div> och JavaScript, utan role="combobox", aria-expanded, aria-controls och listbox/option-rollerna därinunder.
• Växlingsknappar (stäng av ljud, favorit, följ) som ändrar tillstånd visuellt men aldrig uppdaterar aria-pressed. Seende användare ser förändringen; skärmläsaranvändare hör ingen skillnad.
• Formulärinmatningar med en visuell etikett bredvid sig men utan for/id-länk eller omslutande <label>.
• Anpassade kryssrutor ritade med <svg> och en dold inbyggd inmatning som aldrig reflekterar :checked till det synliga gränssnittet – skärmläsar- och visuella tillstånd glider isär.

Varför det är viktigt

Det här är det mest citerade framgångskriteriet i specifikationen. Nästan varje klagomål om “den här webbplatsen är oanvändbar med skärmläsare” löser sig till ett 4.1.2-fel någonstans – vanligtvis en <div> som uppträder som en knapp, eller en ikonknapp utan namn. Det är också här kostnaden för att bygga anpassade widgetar syns: varje inbyggt HTML-element uppfyller redan 4.1.2; varje handbyggd <div>-widget måste förtjäna det rad för rad. Den snabbaste 4.1.2-granskningen är att tabba igenom sidan med en skärmläsare och lyssna – allt som annonseras som “tomt” eller bara “knapp” är ett fynd.