Riktlinje nr 104 Prio 4

Använd rätt html-element när ni gör listor

En av poängerna med HTML är att språket kan användas för att märka upp semantiken i ett dokument. Märk upp listor som listor, och se till att inget annat än listor är märkta så. Skärmläsare och andra hjälpmedel behöver korrekt kodade listor för att kunna signalera till användaren att en lista faktiskt är just en lista.


Rekommendationer för listorLänk hit

  • Märk upp alla listor som listor med korrekta HTML-element.
  • Använd inte listrelaterade HTML-element för sådant som inte är listor.

Listor i HTMLLänk hit

Det finns tre olika typer av listor i HTML:

  • oordnade listor – punktlistor
  • ordnade, numrerade, listor
  • definitionslistor.

En ordnad lista används när punkterna behöver komma i rätt ordning. Det är inte viktigt i en oordnad lista. En lista med ingredienser för en sockerkaka är en oordnad lista: det spelar ingen roll om man nämner vetemjölet före äggen eller vice versa. Bakinstruktionen är dock en ordnad lista: man måste blanda ingredienserna innan man gräddar kakan, annars blir det inte en sockerkaka.

Notera att det inte handlar om sortering, utan om inbördes ordning. En lista över svenska 1900-talsförfattare är en oordnad lista, även om namnen står sorterade i bokstavsordning. Däremot är en topp-tio-lista med favoritförfattare en ordnad lista. En navigeringsmeny på en webbplats är i de allra flesta fall en oordnad lista.

En definitionslista (dl) kan användas för olika typer av nyckel- eller värdelistor, eller för att märka upp till exempel en dialog i ett manuskript. Varje element består av en eller flera nycklar (dt) och ett eller flera värden (dd).

Tyvärr finns det en överdriven användning av listor. En sekvens är inte nödvändigtvis en lista. Det är inte ovanligt att se formulär uppmärkta med ul eller ol, bara för att författaren vill ha ett ”gratis” li-element runt varje etikettpar eller fältpar för att de ska presenteras på en egen rad. Det är att använda HTML på ett sätt det inte är tänkt.

En tumregel kan vara att om man vill trolla bort listpunkter med CSS för att presentationen ska bli begriplig, borde innehållet förmodligen inte alls göras till en lista. Till exempel är det ytterst få formulär som bör ha en listpunkt eller ett ordningsnummer framför varje etikett eller fält.



Kommentarer (5)