Semantiske lister
Silktide tester at listeelementer på sidene dine bare inneholder listeelementer som direkte underordnede elementer. Når andre elementer plasseres direkte i en liste, kan rapportere feil antall elementer i listen.
<!-- Feil: div-elementene skjuler elementene for skjermlesere -->
<ul>
<div class="group">
<li>Eksempel 1</li>
</div>
<div class="group">
<li>Eksempel 2</li>
<li>Eksempel 3</li>
</div>
</ul>
<!-- Rettet: bare listeelementer direkte i listen -->
<ul>
<li>Eksempel 1</li>
<li>Eksempel 2</li>
<li>Eksempel 3</li>
</ul>
Hvorfor dette er viktig
Når en kommer til en liste, kunngjør den hvor mange elementer listen har – «liste, 3 elementer» – slik at brukeren vet hvor mye innhold han eller hun kan forvente, og trygt kan hoppe forbi det. Omsluttende elementer i listen forstyrrer denne opptellingen: Eksempelet ovenfor kan bli kunngjort som en liste med to elementer, selv om den egentlig har tre. Navigasjonsmenyer rammes oftest, siden de vanligvis bygges som lister.
Slik løser du det
- Fjern omsluttende elementer som
<div>eller<span>fra direkte innsiden av<ul>- og<ol>-elementer, slik at bare<li>-elementer gjenstår. - Hvis du trenger det omsluttende elementet for styling, flytter du det inn i
<li>-elementet eller styler<li>-elementene direkte. - Hvis du vil legge én liste inni en annen, plasserer du den indre
<ul>- eller<ol>-listen i et overordnet<li>-element.
Slik tester Silktide dette
- Finn alle
<ul>- og<ol>-elementer på siden. - Undersøk hvert av listens direkte underordnede elementer.
- Marker alle underordnede elementer som ikke er et listeelement (
<li>) eller en nestet liste. Kommentarer og mellomrom mellom elementene er tillatt og ignoreres.