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:

Viktiga regler:

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

Det finns ett sätt att skriva in roller och tillstånd i trädet för hand, med attribut som börjar med aria-. ARIA (Accessible Rich Internet Applications) är standarden för dem, och den behövs när något ändras medan sidan används, till exempel att en meny är utfälld just nu. Det bygger du i Tema 4. Regeln du ska ta med dig redan här är den omvända: använd inte ARIA när ett vanligt element redan gör jobbet. Ett <nav> säger att det är navigation utan att du skriver ett enda attribut, och en <div role="navigation"> är alltid ett sämre val än ett <nav>.

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:

• Div
• Div
• Div
• Div

Verifiera med validator.nu

Koden fungerar i webbläsaren, men det är inget bevis på att den är korrekt. Webbläsaren gissar och rättar i tysthet, och en sida byggd på gissningar bär ingen tillförlitlig semantik. Validator.nu analyserar koden och listar felen i stället för att laga dem åt dig. Det är rättstavningskontrollen för HTML, och den ska vara grön innan du kollar tillgänglighet: syntaxfel bryter semantiken, och då mäter du fel sak.

Öppna filen eller klistra in koden som text och läs listan. Ser du många fel, rätta det översta och kör om. Felen är nästan alltid kaskader, en glömd sluttagg högt upp kan skapa tio följdfel längre ned.

Kvalitetssäkring: WAVE

Validatorn kontrollerar att din HTML är korrekt skriven. Men korrekt kod kan ändå sakna struktur, och det ser validatorn inte. För det behövs ett annat verktyg, WAVE (Web Accessibility Evaluation Tool). Det simulerar hur en maskin uppfattar din sida: landmärken, rubriker och strukturen bakom det visuella.

WAVE finns som webbläsartillägg för Chrome, Edge och Firefox. Installera det från wave.webaim.org/extension. Du behöver tillägget för att kunna testa lokala sidor, webbversionen på wave.webaim.org når bara publicerade sajter.

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.