화면의 정렬을 위해 중복 태그를 사용하지 말 것

단순 병렬 배치용 리스트

국내 포털사이트의 지식백과 페이지이다. 주제백과 바로가기의 하단 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> 정의형 리스트를 사용해야 할 때도 마찬가지이다.

AOA동영상 강의