Begrepp

Semantisk HTML

Att använda HTML-element för deras betydelse, inte bara deras standardutseende. En `<button>` annonseras som en knapp; en `<div onclick>` annonseras som ingenting. Den absoluta majoriteten av tillgänglighetsfel går att spåra till övergiven semantik.

Semantisk HTML är HTML där varje element väljs utifrån sin betydelse, inte bara sitt utseende. En <button> är till för handlingar. En <nav> omsluter navigation. En <table> innehåller tabelldata. Att använda en <div> stylad att se ut som en knapp för en handling är ett semantiskt misslyckande — även om det visuella resultatet är identiskt.

Den absoluta majoriteten av tillgänglighetsfel går att spåra till övergiven semantik. Nästan varje hjälpmedels-haveri har samma grundorsak: ett generiskt element som utför det arbete ett semantiskt element var utformat för.

Varför skärmläsare bryr sig

Skärmläsare exponerar HTML för användaren via sitt tillgänglighetsträd — en intern representation byggd från DOM:en som mappar varje element till en roll, ett namn, ett tillstånd och egenskaper. Tillgänglighetsträdet är vad användaren faktiskt hör.

En native <button> hamnar i tillgänglighetsträdet som button "Skicka". En <div> stylad att se ut som en knapp hamnar som generic — vilket innebär att skärmläsaren inte tillkännager något användbart, och användaren har inget sätt att upptäcka att div:en är interaktiv.

Samma logik gäller för:

  • Rubriker (<h1>–<h6>) — skärmläsare låter användare hoppa mellan rubriker för att skumma en sida. <div class="heading"> visas inte i rubrik­listan.
  • Listor (<ul>, <ol>, <li>) — skärmläsare tillkännager “lista, 5 objekt” innan de läser. <div>-element som låtsas vara listobjekt gör inte det.
  • Formulär — <input> med en kopplad <label> läses som “E-post, redigeringsruta.” En anpassad inmatning byggd av div-element och contenteditable läser ingenting.
  • Tabeller — <table> med <th>-rad/kolumn-rubriker låter användare navigera datatabeller cell för cell med rubrikkontext tillkännagiven. CSS-rutnät av div-element gör inte det.

Bytningsmönstret

Lösningen har nästan alltid samma form:

  • <div onclick="..."> → <button> (eller <a href> för navigation).
  • <span class="link"> → <a href>.
  • <div role="heading"> → <h1> till <h6>.
  • Anpassade rullgardinsmenyer → <select> där designen tillåter, eller ett mönstertestat ARIA-kombinationsruta-mönster där den inte gör det.
  • Flikar byggda av stylad <div>-element → fliksmönstret från ARIA Authoring Practices Guide.

När du ska använda ARIA

Den första regeln om ARIA är: använd inte ARIA om ett native element gör jobbet. ARIA-roller, -tillstånd och -egenskaper är en patch för fall där native HTML inte kan beskriva widgeten du bygger (trädvyer, flervals- kombinationsrutor, vissa modalmönster). De är inte ett substitut för att använda <button>.

En pragmatisk granskning

Det snabbaste sättet att identifiera semantisk nedbrytning i en kodbas: sök efter onclick på div- och span-element. Varje träff är ett potentiellt fel. Det näst snabbaste: sök efter role=-attribut. ARIA är fine i begränsade sammanhang, men tung ARIA-användning signalerar ofta att native element förbigicks av stilskäl som faktiskt inte krävde det.