Semantiske lister
Silktide tester, at listeelementer på dine sider kun indeholder listeelementer som direkte underordnede elementer. Når andre elementer placeres direkte i en liste, kan fejlagtigt oplyse, hvor mange elementer listen indeholder.
<!-- Forkert: div-elementerne skjuler elementer for skærmlæsere -->
<ul>
<div class="group">
<li>Eksempel 1</li>
</div>
<div class="group">
<li>Eksempel 2</li>
<li>Eksempel 3</li>
</div>
</ul>
<!-- Rettet: kun listeelementer direkte i listen -->
<ul>
<li>Eksempel 1</li>
<li>Eksempel 2</li>
<li>Eksempel 3</li>
</ul>
Hvorfor dette er vigtigt
Når en kommer ind i en liste, annoncerer den, hvor mange elementer listen har – "liste, 3 elementer" – hvilket fortæller brugeren, hvor meget indhold der kan forventes, og gør det muligt at springe sikkert forbi den. Indpakningselementer i listen forstyrrer denne optælling: Eksemplet ovenfor kan blive annonceret som en liste med to elementer, selv om den faktisk har tre. Navigationsmenuer rammes oftest, da de normalt er opbygget som lister.
Sådan retter du det
- Fjern indpakningselementer som
<div>eller<span>direkte inde i<ul>- og<ol>-elementer, så kun<li>-elementer er tilbage. - Hvis du har brug for indpakningselementet til styling, skal du flytte det ind i
<li>-elementet eller style<li>-elementerne direkte. - Hvis du vil indlejre en liste i en anden, skal du placere den indre
<ul>eller<ol>i et overordnet<li>-element.
Sådan tester Silktide dette
- Find alle
<ul>- og<ol>-elementer på siden. - Undersøg hvert af listens direkte underordnede elementer.
- Markér ethvert underordnet element, der ikke er et listeelement (
<li>) eller en indlejret liste. Kommentarer og mellemrum mellem elementer er i orden og ignoreres.