국내 포털사이트의 지식백과 페이지이다.
주제백과 바로가기의 하단 12개의 백과 종류를 병렬로 배치하기 위해 총 4개의 <ul>을 사용하고 있다. 단순히 화면 배치를 위해 <ul>을 의미없이 중복해서 사용하고 있는 것이다.
이처럼 화면 배치를 위해 <ul>을 단순 반복하게 되면 스크린리더 사용자들은 전체가 몇 개의 리스트로 구성되어 있는지 페이지를 어떻게 탐색해야 하는지 알 수가 없게 된다.
소스는 병렬 배치를 위해 <ul>을 4개로 반복하여 사용하였으며, 위의 내용을 스크린리더로 읽어보자.
heading level 3
주제백과 바로가기
list with 3 items
건강백과
동물백과
음악백과
out of list
list with 3 items
수학/과학백과
식물백과
밀리터리백과
out of list
...
스크린리더는 <ul>을 만나면 <li>의 개수를 읽고 스크린리더 사용자들은 리스트 구조와 탐색해야 하는 영역이 어디까지인지 이해하고 쉽게 운용할 수 있게 된다.
그렇기 때문에 한 개의 리스트는 한 개의 <ul>로 사용해야 하며 이것은 <dl> 정의형 리스트를 사용해야 할 때도 마찬가지이다.
{% embed url="https://youtu.be/5n5Im5YvoN0" %}