Navigationsstruktur

Menyn som labyrint kontra karta

En ganska vanlig startpunkt är att bygga sin första meny på en webbsida så här:

<nav>
    <a href="/">Hem</a>
    <a href="/om">Om</a>
    <a href="/kontakt">Kontakt</a>
</nav>

Innehållsmässigt är det rimligt, en navigation och länkar samt att det ser OK ut i webbläsaren. Men för en skärmläsare är det en labyrint, den vet inte var menyn börjar eller slutar.

Jämför med den korrekta strukturen:

<nav>
    <ul>
        <li><a href="/">Hem</a></li>
        <li><a href="/om">Om</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
    </ul>
</nav>

Nu annonserar skärmläsaren: “Navigation, lista, 3 objekt.” Användaren vet exakt vad de har att förvänta sig.

Webbstandarder som den här existerar av en anledning. När de följs fungerar din sida med hjälpmedel, gamla webbläsare och sökmotorer. När de inte följs, inte för att du valde det, utan för att du inte kände till dem, stängs grupper av användare ute tyst, utan felmeddelanden.

CSS: Från vertikal lista till horisontell meny

Webbläsarens standardstil för <ul> är en punktlista med indrag och vertikalt staplade element. För att göra den till en horisontell meny måste vi nollställa standardstilen och lägga vår egen layout ovanpå. Vi gör det i två steg: först nav ul för att styra hur länkarna sitter i relation till varandra, sedan nav a för att styra hur varje enskild länk ser ut och känns.

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

nav a {
    text-decoration: none;
    padding: 0.6rem 0.8rem;
    display: block;
}

Måtten är i rem, precis som containern i förra delen. Det gör att både avstånden och klickytorna växer om användaren har ställt upp sin textstorlek, en padding i fasta pixlar skulle stå still medan texten växer.

Klickyta: stora nog att träffa

Du har säkert upplevt att du trycker på en länk och missar. Du försöker igen, lite mer precist. På en telefon med pekskärm händer det hela tiden när klickytan är för liten.

Hur liten är för liten? Här möter du WCAG (Web Content Accessibility Guidelines) för första gången: webbens internationella riktlinjer för tillgänglighet, förvaltade av W3C. Det är WCAG som Diggs webbriktlinjer från förra delen bygger på, och det är måttstocken vi testar mot genom hela kursen.

För klickytor säger kriteriet 2.5.8 Target Size (Minimum) i WCAG 2.2: minst 24×24 pixlar. Branschen siktar högre, både Apple och Google rekommenderar klart större ytor i sina designriktlinjer. Kursens mål är därför minst 44 pixlar. Texten kan fortfarande vara 12px, lösningen är padding på <a> som expanderar den klickbara ytan utan att förändra textstorleken.