HTML5 — semantiske elementer, ARIA-roller

It A · STX · A-niveau · Frontend og UX

💻 HTML5 — semantiske elementer, ARIA-roller

HTML5 (2014, WHATWG) introducerede semantiske elementer der giver mening til dokumentets struktur: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>, <mark>, <details>/<summary>.

Fordele: søgemaskine-optimering (SEO), tilgængelighed, kodeklarhed.

ARIA (Accessible Rich Internet Applications): tilgængeligheds-attributter til dynamisk indhold og ikke-semantiske elementer. role="navigation", aria-label="Søgefelt", aria-expanded="true", aria-live="polite" (opdateringer annonceres til skærmlæser).

Tilgængelighed (WCAG 2.1): AA-niveau kræver: tekstalternativ til billeder (alt-attribut), tilstrækkelig farvekontrast (4,5:1 for normal tekst), tastaturnavigation, ingen indhold der flasher >3/sek (epilepsi).

HTML5 APIs: Canvas (2D-tegning), WebGL (3D-grafik), Geolocation, Web Storage (localStorage, sessionStorage), Service Workers (offline-apps), WebSockets.

Læringsmål

• Anvende semantiske HTML5-elementer korrekt i en hjemmeside
• Anvende ARIA-roller til at forbedre tilgængelighed
• Strukturere et HTML-dokument efter god praksis

Sådan kan du arbejde med emnet

• Byg en simpel HTML5-side med header, nav, main, article, aside og footer-elementer
• Forklar, hvad ARIA-roller er, og tilføj relevante ARIA-attributter til en navigation
• Diskutér, hvad der er forskellen på at bruge div overalt og at bruge semantiske HTML5-elementer

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.