Lister

Lister er noe vi bruker hele tiden på nettsider – menypunkter, steg i en prosess, funksjoner i et produkt, definisjoner av begreper. Når listene er kodet riktig i HTML, kan alle brukere forstå strukturen. Men når lister lages med <div>-elementer, linjeskift eller bare strek-tegn, mister hjelpeteknologi som skjermlesere all informasjon om at innholdet faktisk er en liste.

Hvorfor er semantiske lister viktige?

Når en skjermleser møter en ekte HTML-liste (for eksempel <ul> med <li>-elementer), forteller den brukeren to nyttige ting: at det er en liste, og hvor mange punkter den inneholder. Brukeren kan da navigere effektivt mellom punktene og holde oversikten.

Uten riktig listemarkering hører brukeren bare en sammenhengende tekstblokk. Det er som å lese en oppskrift der alle ingrediensene er skrevet i én lang setning uten komma. Det fungerer kanskje, men det er mye vanskeligere å følge med.

God listestruktur hjelper også søkemotorer å forstå innholdet ditt bedre, noe som kan gi deg bedre synlighet i søkeresultatene.

De tre typene lister i HTML

Unummerert liste (<ul>)

Bruk <ul> (unordered list) når rekkefølgen på punktene ikke er viktig. Dette er den vanligste listetypen og passer godt for funksjoner, egenskaper, navigasjonsmenyer og lignende.

<h2>Fordeler med universell utforming</h2>
<ul>
  <li>Bedre brukeropplevelse for alle</li>
  <li>Høyere søkemotorrangering</li>
  <li>Oppfyller lovkrav</li>
  <li>Større potensielt kundebase</li>
</ul>

En skjermleser vil annonsere dette som «liste med 4 punkter», og brukeren kan navigere mellom punktene med piltastene.

Nummerert liste (<ol>)

Bruk <ol> (ordered list) når rekkefølgen betyr noe, for eksempel i steg-for-steg-instruksjoner, rangeringer eller prosedyrer.

<h2>Slik sjekker du nettsiden din</h2>
<ol>
  <li>Opprett en gratis konto på UU-Kontroll</li>
  <li>Legg inn nettadressen din</li>
  <li>Vent mens skanneren analyserer siden</li>
  <li>Les rapporten og start med de mest alvorlige feilene</li>
</ol>

Her er rekkefølgen viktig – du kan ikke lese rapporten før du har kjørt skanningen. Skjermleseren vil annonsere hvert punkt med nummer, slik at brukeren vet hvor i prosessen de er.

Definisjonsliste (<dl>)

Bruk <dl> (description list) for begreper og forklaringer, ofte kalt nøkkel-verdi-par. Hvert begrep markeres med <dt> (description term) og forklaringen med <dd> (description details).

<h2>Viktige WCAG-begreper</h2>
<dl>
  <dt>Suksesskriterium</dt>
  <dd>Et testbart krav i WCAG som nettsiden enten oppfyller eller ikke oppfyller.</dd>

  <dt>Samsvarsnivå</dt>
  <dd>Graden av tilgjengelighet – A (minimum), AA (lovkrav) eller AAA (høyeste).</dd>

  <dt>Hjelpeteknologi</dt>
  <dd>Programvare eller maskinvare som hjelper personer med funksjonsnedsettelser å bruke datamaskiner, for eksempel skjermlesere.</dd>
</dl>

Definisjonslister er dessverre underbrukt på nettet, men de er perfekte for ordlister, FAQ-seksjoner, produktspesifikasjoner og metadata.

Vanlige feil med lister

Visuelle lister uten semantikk

Den vanligste feilen er å lage noe som ser ut som en liste visuelt, men som ikke er kodet som en liste. Her er et typisk eksempel:

<!-- Feil: Ser ut som en liste, men er det ikke -->
<div class="features">
  <div>✓ Automatisk skanning</div>
  <div>✓ Detaljerte rapporter</div>
  <div>✓ Ukentlige sjekker</div>
</div>

Riktig måte å gjøre dette på:

<!-- Riktig: Semantisk liste med visuell styling -->
<ul class="features">
  <li>Automatisk skanning</li>
  <li>Detaljerte rapporter</li>
  <li>Ukentlige sjekker</li>
</ul>

Du kan bruke CSS til å fjerne kulene og legge til hake-ikoner om du ønsker – det viktige er at HTML-strukturen er korrekt.

Navigasjonsmenyer uten listemarkering

Menyer er lister av lenker. Mange utviklere lager menyer med bare <a>-elementer inni en <nav>, men for skjermlesere er det mye bedre å pakke dem i en liste:

<nav aria-label="Hovedmeny">
  <ul>
    <li><a href="/">Hjem</a></li>
    <li><a href="/tjenester">Tjenester</a></li>
    <li><a href="/#priser">Priser</a></li>
    <li><a href="mailto:kontakt@uukontroll.no">Kontakt</a></li>
  </ul>
</nav>

Nøstede lister med feil struktur

Når du nøster lister (en liste inne i en liste), må den indre listen plasseres inne i et <li>-element, ikke direkte inne i den ytre <ul> eller <ol>:

<!-- Riktig nøsting -->
<ul>
  <li>Frukt
    <ul>
      <li>Epler</li>
      <li>Pærer</li>
    </ul>
  </li>
  <li>Grønnsaker</li>
</ul>

Praktiske tips

1. Spør deg selv: Er dette en samling av relaterte elementer? Hvis ja, bruk en liste.
2. Er rekkefølgen viktig? Bruk <ol>. Hvis ikke, bruk <ul>.
3. Er det begreper med forklaringer? Bruk <dl>.
4. Fjern standardstiler med CSS om du ikke vil ha kuler eller tall – det endrer ikke semantikken.
5. Bruk listemarkering for navigasjon. Det er en etablert beste praksis som gjør menyer mer tilgjengelige.

Riktig bruk av lister er en av de enkleste og mest effektive tiltakene du kan gjøre for tilgjengeligheten på nettsiden din. Det krever minimalt med ekstra arbeid, men gjør en stor forskjell for brukere som er avhengige av hjelpeteknologi.