Begreber

Semantisk HTML

Brug af HTML-elementer for deres betydning, ikke bare deres standardudseende. En `<button>` annonceres som en knap; en `<div onclick>` annonceres som ingenting. Langt de fleste tilgængelighedsfejl kan spores tilbage til forladte semantik.

Semantisk HTML er HTML, hvor hvert element vælges for sin betydning, ikke kun sit udseende. En <button> er til handlinger. En <nav> omslutter navigation. En <table> indeholder tabeldata. At bruge en <div> stilet til at ligne en knap til en handling er en semantisk fejl — selv om det visuelle resultat er identisk.

Langt de fleste tilgængeligheds-fejl kan spores tilbage til forladte semantik. Næsten alle hjælpeteknologi-fejl har den samme grundårsag: et generisk element udfører det job, et semantisk var designet til.

Hvorfor skærmlæsere bekymrer sig om det

Skærmlæsere eksponerer HTML for brugeren via deres tilgængelighedstræ — en intern repræsentation bygget fra DOM’et, der kortlægger hvert element til en rolle, et navn, en tilstand og egenskaber. Tilgængelighedstræet er det, brugeren faktisk hører.

En native <button> indgår i tilgængelighedstræet som button "Indsend". En <div> stilet til at ligne en knap indgår som generic — det vil sige, skærmlæseren annoncerer ingenting nyttigt, og brugeren har ingen måde at opdage, at div’en er interaktiv.

Den samme logik gælder for:

  • Overskrifter (<h1>–<h6>) — skærmlæsere lader brugere hoppe mellem overskrifter for at skimme en side. <div class="heading"> vises ikke i overskriftslisten.
  • Lister (<ul>, <ol>, <li>) — skærmlæsere annoncerer „liste, 5 elementer“ inden oplæsning. <div>’er, der udgiver sig for at være listeelementer, gør det ikke.
  • Formularer — <input> med tilknyttet <label> læser „E-mail, redigeringstekst“. Et tilpasset input lavet af divs og contenteditable læser ingenting.
  • Tabeller — <table> med <th> række-/kolonneoverskrifter lader brugere navigere datatabeller celle for celle med overskriftskontekst annonceret. CSS-grids af divs gør ikke.

Erstatningsmønsteret

Rettelsen har næsten altid den samme form:

  • <div onclick="..."> → <button> (eller <a href> til navigation).
  • <span class="link"> → <a href>.
  • <div role="heading"> → <h1> til <h6>.
  • Tilpassede dropdowns → <select>, hvor designet tillader det, eller et mønstertestet ARIA-combobox, hvor det ikke gør.
  • Faner konstrueret som stilede <div>’er → fane-mønster fra ARIA Authoring Practices Guide.

Hvornår man skal bruge ARIA

Den første regel for ARIA er: brug ikke ARIA, hvis et native element løser opgaven. ARIA-roller, tilstande og egenskaber er en lappeløsning til tilfælde, hvor native HTML ikke kan beskrive den widget, man bygger (trævisininger, multi-select comboboxes, visse modalmønstre). De er ikke en erstatning for at bruge <button>.

En pragmatisk audit

Den hurtigste måde at opdage semantisk forfald i en kodebase: søg efter onclick på div og span. Hvert match er en potentiel fejl. Den næsthurtigste: søg efter role=-attributter. ARIA er fint i begrænsede kontekster, men tungt ARIA-brug signalerer ofte, at native elementer blev sprunget over af stylinggrunde, der faktisk ikke krævede det.