Semantiska landmärken

Maskinens ögon

Innan HTML5 introducerades 2014 använde webbutvecklare <div> för i princip allt. En div är en tom behållare utan någon inbyggd betydelse, den berättar ingenting om innehållet. Webbläsare och skärmläsare är blinda. De kan inte se dina färger, din layout eller din design, det enda de läser är dina taggar.

En <div> är en tom låda: den talar inte om vad som finns i den. <nav> är en märkt låda: “Här finns navigation.” <main> säger: “Här är sidans unika huvudinnehåll.” Den informationen låter sökmotorer och hjälpmedel bygga en karta över sidan, utan att se en enda pixel av din CSS.

HTML5 introducerade Landmärken, taggar med inbyggd roll. Utan dem är din sida en labyrint för allt som inte kan se din design.

Verktygslådan: dina landmärken

Vi ersätter element utan semantisk betydelse med element som faktiskt berättar något. Mycket av webbens begrepp kommer från det tryckta mediet, så vi har taggar som speglar en tidningsstruktur. Här är de viktigaste:

Element	Syfte	Analogin
`<header>`	Sidans introduktion, ofta logotyp och titel.	Tidningens framsida.
`<nav>`	En samling navigeringslänkar.	Innehållsförteckningen.
`<main>`	Det unika innehållet för just denna sida.	Själva artikeln.
`<section>`	En tematisk gruppering av innehåll.	Ett kapitel.
`<article>`	Självständigt innehåll som kan stå för sig själv.	En lösryckt kolumn.
`<footer>`	Kontaktinfo, copyright och sidkarta.	Sidfoten längst ner.

Viktiga regler:

Main-fällan: Lägg aldrig <nav> eller <footer> inuti <main>. Det som upprepas på varje undersida är inte “unikt huvudinnehåll”.
Section utan rubrik: Om du inte har en rubrik för din sektion ska du förmodligen använda en <div>.

Endast en <main>: Det får bara finnas ett synligt main-element per sida.

Maskinläsbarhet: Accessibility Tree

Bakom din visuella sida bygger webbläsaren ett Accessibility Tree, en förenklad version av DOM Document Object Model, webbläsarens representation av HTML-dokumentet som ett träd av noder. JavaScript kan läsa och ändra DOM:en för att uppdatera sidan dynamiskt. Se: Semantiska landmärken som skickas vidare till hjälpmedel. Varje semantiskt element bidrar med en roll till trädet:

<header> med roll: banner
<nav> med roll: navigation
<main> med roll: main
<footer> med roll: contentinfo

En <div> bidrar med ingenting. Trädet blir platt, utan navigeringspunkter.

Skärmläsare har en “Landmarks-lista”. Om du byggt korrekt ser listan ut så här:

Header
Navigation
Main
Footer

Om du byggt allt med divar ser listan ut så här:

Kvalitetssäkring: WAVE

WAVE installerade du i förra delen, då lät du tillägget läsa din rubriktrappa i Structure-fliken. Nu möter du dess egentliga syfte: att simulera hur en maskin uppfattar sidan. Det viktigaste att förstå är att WAVE inte visar att sidan är trasig utan att strukturen saknas. En sida byggd med bara <div> kan se perfekt ut i webbläsaren, men WAVE visar ingenting. Det finns ingenting för maskinen att gå på.

Testa det själv: kör WAVE på en sida byggd med enbart <div> (till exempel din allra första HTML-fil) och jämför med en sida som använder semantiska landmärken. Du skapar mening, du fixar inte fel.

Uppgift: Strukturera webbsidan

Nu ger vi din övningssida en riktig landmärkesstruktur. Om du vill kan du utgå från skisserna du gjorde tidigare, eller så baserar du det på tryckt media och landmärkena vi gått igenom. Det viktiga är att du använder de semantiska elementen på rätt sätt.

Öppna din övningssida (index.html).
Bygg om den till en struktur som ser ut så här (i ordning):
- En <header> som innehåller en <h1> (sidans titel).
- En <main> för sidans innehåll.
- I main skapar du en <article> för texten.
- I artikeln skapar du en <h2> (underrubrik) och några stycken text.
- En <footer> med texten “Det här är ett skolprojekt”.
Testet: Kör WAVE-tillägget på sidan (ikonen i webbläsarens verktygsfält).
- Ser du de blåa och orangea ikonerna för landmärken?
- Har du några röda ikoner? (Laga dem direkt).

Vad händer om…

Byt ut alla semantiska element mot <div> och kör WAVE igen. Försvinner de blåa landmärkes-ikonerna? En skärmläsare som låter användaren “hoppa till navigation” hittar ingenting när allt är anonyma divar.

Motivera & reflektera

I din readme.md, förklara med egna ord varför en <div> inte bidrar med något till Accessibility Tree, medan en <nav> gör det. Vad är det maskinen “ser”?

Nästa nivå

Vem som helst kan få en sida att se ok ut. Det som gör dig anställningsbar är att den funkar för alla. Testa det på riktigt:

Slå på en riktig skärmläsare (VoiceOver på Mac med Cmd+F5, eller NVDA på Windows) och navigera din sida med landmärkena. Stämmer listan du hör med den du byggde?
Sikta på 0 Errors och 0 Alerts i WAVE, inte bara noll fel. Vad varnar WAVE för, och håller du med?