목록(ol ul dl)의 올바른 활용 문제 by 백남중


많은 웹 문서에서 목록을 남용하고 있다.
물론 혹자는 코딩에 정도가 없다고 항변할 수 있으나, 기본적인 문법을 따르지 않는 것은 접근성을 논의하기 이전의 문제이다.
여기서는 웹 문서에서 목록의 코딩 오용에 대해 알아보고자 한다.

웹 문서에서 연속된 내용을 나타내는 방법에는 <ul>과 <ol>이 있다.
또한 사전의 표제어처럼 항목에 대한 설명을 달기 위해서는 정의목록 <dl>을 사용한다.

HTML 4.01의 목록에 관한 내용:

  • 앞 목록 예제는 번호없는 목록으로 <UL> 엘레멘트로 만들어진다.
  • <OL> 엘레멘트로 만들어지는 번호있는 목록(ordered)은 번호가 강조되는 정보에 사용된다.
  • 정의 목록(definition list)은 <dl> 엘레멘트로 만들어 지는데, 다른 것도 포함 할 수 있으나, 일반적으로 텀(term:작은제목)/정의(definition)의 짝들로 이루어진다.
-목차-

1. HTML, WCAG와 목록 관련 조항
2. 잘못 사용 사례
    2.1 각각의 목록을 <ul>로 처리한 경우
    2.2 한 개의 목록을 두 개 이상으로 나누는 경우
    2.3 정의 목록(<dl> definition list)의 잘못 사용 문제
    2.4 <li> 대신 <dd>를 사용하는 경우
    2.5 정의 목록과 <li>를 혼용한 경우
3. 스크린 리더 활용자를 위한 목록 코딩을 위한 제언
    3.1 <ol>의 활용
    3.2 정의 목록의 음성 출력 문제

(본 글에서는 내용의 이해를 돕기 위하여 WAT(Web Accessibility Tool)을 사용하여 분석한 화면을 캡춰하여 'WAT의 List item 보기 화면'라는 명칭 하에 원래의 화면과 비교하였다)

1. HTML, WCAG와 목록 관련 조항

HTML 4.0.1 관련 조항:
10. 목록(Lists)

WCAG 1.0 관련 조항:
3.6 목록(list)과 목록 아이템을 적절히 사용한다.
(3.6: Mark up lists and list items properly. [Priority 2])

WCAG 2.0 관련 조항:
1.3.1 정보 및 관계: 프리젠테이션을 통해 전달된 정보, 구조 및 관계는 프로그램적으로 결정되거나 또는 텍스트에서 이용할 수 있습니다. (수준 A)
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Techniques for WCAG 2.0 항목:
H48 Using ol, ul and dl for lists
H40 Using definition lists

2. 잘못된 사례들

2.1 각각의 목록을 <ul>로 처리한 경우
<ul>로 시작하고 <li>로 나타낸 경우에는 목록의 항목들의 성질이 바뀌지 않는 한 계속 같은 목록을 유지해야 한다.
다음의 예는 공지사항에 나타난 목록으로 목록이 3개인데도 각각(공지사항, 날짜)을 하나의 <UL>로 처리한 경우이다.

(WAT의 List item 보기 화면)

위의 내용을 스크린 리더로 들으면 다음과 같다.
목록 시작 개수 2
2009년도 제2회 고입·고졸 검정고시 시행 공고 링크
2009-05-29
목록 끝
목록 시작 개수 2
지방공무원 인사 발령(8급에의 승진) 링크
2009-05-29
목록 끝
목록 시작 개수 2
응시원서 및 OMR카드 작성 예시 자료 링크
2009-05-26
목록 끝

2.2 한 개의 목록을 두 개 이상으로 나누는 경우
목록을 여러 단으로 나타내는 경우에도 목록은 항상 1개로 구성되어야 한다.
그런데 목록을 여러 단으로 구분하는 경우 각각의 단을 하나의 <ul>로 처리하여 혼동을 주는 경우가 있다.
다음은 영화, 증권, 책..... 운세, 키즈, 문자, 동영상으로 이동하는 목록인데 4개씩 각각을 <ul>로 처리하였다. 물론 영화, 공연의 순으로 이동하는 것이 아니라 세로로 이동하였기 어쩔 수 없다고 할 수도 있지만 과연 이렇게 처리할 수 밖에 없는지 의문시된다.

(WAT의 List item 보기 화면)

<ul class="sub f1">
<li><a href="http://...>영화</a></li>
<li><a href="http://...">증권</a></li>
<li><a href="http://...">책</a></li>
<li><a href="http://...">요리</a></li>
</ul>
<ul class="sub f2">
<li><a href="http://...">공연</a></li>
<li><a href="http://...">부동산</a></li>
<li><a href="http://...">지식</a></li>
<li><a href="http://...">미즈넷</a></li>
</ul>
<ul class="sub f3">
<li><a href="http://...">텔존</a></li>
<li><a href="http://...">금융</a></li>
<li><a href="http://...">만화</a></li>
<li><a href="http://...">운세</a></li>
</ul>
<ul class="sub f4">
<li><a href="http://...">키즈</a></li>
<li><a href="http://...">문자</a></li>
<li><a href="http://...">동영상</a></li>
</ul>

위의 내용을 스크린 리더는 다음과 같이 음성 출력한다.
목록 시작 개수 4
영화 링크
증권 링크
책 링크
요리 링크
목록 끝
목록 시작 개수 4
공연 링크
부동산 링크
지식 링크
미즈넷 링크
목록 끝
목록 시작 개수 4
....
2.3 정의 목록(<dl> definition list)의 잘못 사용 문제
정의 목록(<dl> definition list)이란 특정 용어와 그 설명을 표현할 때 사용하는 것으로, <dt>로 용어를 정의하고, <dd>로 용어에 대한 설명을 제공하는 것이다. 반드시 <dd>로 <dt>에 대한 설명을 제공해 주어야 한다.

<dl> definition list 정의형 목록
<dt> definition term 용어 정의
<dd> definition descriotion 용어 설명

다음 예의 경우 정의 목록에 관한 마크업은 맞었지만 이것을 정의 목록으로 정의해야 하는가 하는 의구심이 든다.
(WAT의 List item 보기 화면)

<h2>체험건강 사이트맵</h2>
<dl>
<dt><a href="..."><img src=".../L_sitemap.gif" alt="체험/건강" /></a></dt>
<dd><a href="..."><img src=".../L_sitemap1.gif" alt="체험학습" /></a></dd>
<dd><a href="..."><img src=".../L_sitemap2.gif" alt="여행" /></a></dd>
<dd><a href="..."><img src=".../L_sitemap3.gif" alt="건강" /></a></dd>
<dd><a href="..."><img src=".../L_sitemap4.gif" alt="생활/리빙" /></a></dd>
<dd><a href="..."><img src=".../L_sitemap5.gif" alt="취미" /></a></dd>
<dd><a href="..."><img src=".../L_sitemap6.gif" alt="봉사" /></a></dd>
</dl>

똑 같은 경우로 기사에 대한 내용을 다음과 같이 <li> 안에 <dl>을 넣고, 기사 제목을 <dt> 처리하고, 내용을 <dd> 처리한 것이 과연 옳은가 의심이 든다.

(WAT의 List item 보기 화면)

<li>
<dl class="cla_dl_news02">
<dd><img src="http://.../news79.jpg" alt="" /></dd>
<dt><a href="...">2009 희망근로 프로젝트 사업 ‘순항’</a></dt>
<dd class="cla_dl_news02_txt"><a href="...">저소득층을 위한 일자리 사업인 ‘2009 희망근로 프로젝트’가 순조롭게 진행되고 있다. .......</a></dd>
</dl>
</li>

2.4 <li> 대신 <dd>를 사용하는 경우
많은 사이트들이 무심코 사용하고 있는 경우 중의 하나가 <dd>이다.
<dd>는 <dt>로 정의한 용어에 대한 설명으로 <dt> 다음에 나타나야 하는데도 <li> 대신에 <dd>를 무심코 사용한 예이다.


(WAT의 List item 보기 화면)

2.5 정의 목록과 <li>를 혼용한 경우
단순하게 제목을 정의하고 나머지를 <li>로 처리해야 함에도 불구하고, 정의목록를 사용하고, 용어 정의를 <dt>가 아닌 <dd>로 사용하고, <dd> 대신 <li>를 잘못 사용한 예이다.
또한 목록(<ul>)을 한 개로 처리하지 않고 2개로 잘못 처리하였다.

(WAT의 List item 보기 화면)

<div id="three">
<dl class="service f0">
<dd><img src=".../title.gif" alt="국민소통서비스" class="top_title mb10" /></dd>
<dd class="list cb">
<ul>
<li><a href=".../lst.jsp"><img src="..../img01.gif" alt="민원서식" /></a></li>
<li><a href=".../FrameFocus"><img src=".../img02.gif" alt="민원신청" /></a></li>
<li><a href="...dtL.jsp<img src=".../img03.gif" alt="전자공청회" /></a></li>
</ul>
<ul class="cb">
<li><a href=".../dtL.jsp"><img src=".../img04.gif" alt="국민제안" /></a></li>
<li><a href=".../dtL.jsp"><img src=".../img05.gif" alt="규제개혁" /></a></li>
<li><a href=".../dtl.jsp"><img src=".../img06.gif" alt="신고센터" /></a></li>
</ul></dd></dl></div>

국민소통서비스 이미지
목록 시작 개수 3단계 1
민원서식 그래픽 링크
민원신청 그래픽 현재페이지 링크
전자공청회 그래픽 현재페이지 링크
목록 끝 단계 1
목록 시작 개수 3단계 1
국민제안 그래픽 현재페이지 링크
규제개혁 그래픽 링크
신고센터 그래픽 링크
신고센터 그래픽 링크
목록 끝 단계 1

3. 스크린 리더 활용자를 위한 목록 코딩 제언
3.1 <ol>의 활용
목록이 여러 개인 경우 스크린 리더 사용자는 목록시작 --개 라고 음성 출력한 후에 목록을 계속 음성 출력한다.
그러나 한 갱의 목록이 제목 링크, 날짜 등과 같이 여러 개의 내용이 들어가 있다면 음성으로 들어야 하는 줄 수는 3배, 4배로 늘어나 중간쯤에서는 무슨 내용인지 알 길이 없는 경우도 종종 발생한다.

이러한 문제는 <ol>을 사용하면 효과적으로 처리할 수 있다.
즉 <ol>을 활용하면 목록의 앞에 숫자가 붙고 스크린 리더는 이 번호를 음성 출력한다.

<h3>펜류</h3>
<ol>
<li>볼펜</li>
<li>플러스펜</li>
<li>형광펜</li>
<li>붓펜</li>
</ol>
펜류 헤딩3
목록 시작 개수 4
1.볼펜
2.플러스펜
3.형광펜
4.붓펜
목록 끝
이렇게 코딩하면 디자이너는 앞에 숫자가 나와서 모양이 안난다고 할 수 있다. 이러한 경우 css에
ol {margin:0}
을 정의해 주면 화면에는 목록의 숫자가 나타나지 않지만 스크린 리더는 음성 출력을 해준다. 이것을 응용하면 기사나 상품의 목록을 시각적으로는 현재 모양과 똑같이 하면서도 스크린 리더 사용자에게는 목록의 번호를 음성 출력함으로서 훨씬 더 깊은 배려를 할 수 있다.

3.2 정의 목록의 음성 출력 문제
현재 스크린 리더는 정의 목록으로 처리하는 경우 어떤 것이 용어(<dt>)이고 어떤 것이 설명(<dd>)인지 알 방법이 없다.
<dl>
<dt>볼펜</dt>
<dd>펜 끝에 둥글고 작은 강철 알을 끼워 운필에 따라 회전하면서 오일 잉크를 내어 쓰게 된 필기구</dd>
<dt>만년필</dt>
<dd>펜대 속의 잉크가 끝에 꽂은 펜으로 알맞게 흘러나오도록 된 펜의 일종.</dd>
<dt>사인펜</dt>
<dd>나일론이나 폴리에스테르 섬유를 굳혀 만든 심에 수성 잉크를 넣은 필기도구</dd>
</dl>
위와 같이 정의된 내용을 스크린 리더는 다음과 같이 음성 출력한다.
정의목록 시작 개수 3
볼펜
펜 끝에 둥글고 작은 강철 알을 끼워 운필에 따라 회전하면서 오일 잉크를 내어 쓰게 된 필기구
만년필
펜대 속의 잉크가 끝에 꽂은 펜으로 알맞게 흘러나오도록 된 펜의 일종.
사인펜
나일론이나 폴리에스테르 섬유를 굳혀 만든 심에 수성 잉크를 넣은 필기도구
목록 끝
여기서 문제는 목록이 시작하였는데 어떤 것이 용어(<dt>)이고 설명(<dd>)인지 구분하기 어렵다는 점이다. 스크린 리더 개발업체에서는 이 부분에 대해서 시각장애인 사용자가 구분할 수 있는 방법을 제공해 주어야 한다.

이 글을 쓰는 데 도움을 주신 조현진님께 감사를 드린다.

핑백

덧글

  • 김혜일 2009/06/19 10:46 # 삭제

    백부장님~ 안녕하세요~
    좋은글 잘 읽었습니다.
    정리가 정말 잘돼있네요
    정의목록에 대해서는 계속 논의해서 좋은 결과를 찾아보도록 하겠습니다.^^
  • 치프 2009/06/30 15:59 # 삭제

    글잘읽었습니다. 알면 알수록 호기심만 늘어나네여 ㅠ
    css에 ol {margin:0} 을 주면 숫자가 사라진다고 하셨는데 익스에서만 통하고,
    파폭에서는 다른 스타일을 입혀줘야하는 거 같습니다.
  • 엽님 2010/01/12 11:22 # 삭제

    ol, ul {list-style:none;} 라고 하시면 블릿및 숫자가 없어집니다.
  • 나니 2010/01/12 11:23 # 삭제

    윗분, ie에서는 li에도 margin:0;을 주어야 합니다. (그래서 ul, li { padding:0; margin:0; } 을 사용하여 reset 하는 게 제일 좋습니다.)
  • HYLA 2010/01/12 11:25 # 삭제

    항상 기본기에 충실해야하는거죠~ ㅎㅎ
  • 료쪈 2011/02/18 16:25 # 삭제

    검색하다가 지나가는 길에 궁금한 점이 있어서 질문 드려요.
    body { margin: 0; padding: 0; } 을 줬더니
    원치않게 ol, ul에도 margin: 0이 되어 자동으로 들여쓰기가 되지를 않네요
    margin-left로 값을 주는 방법도 생각 해보았는데, 모든 ol, ul에 그렇게 주기가 힘들어서
    혹시 다른 방법이 있나 궁금해서요ㅠㅠ...
  • 싼도 2011/11/11 17:39 # 삭제

    저도 항상 생각해오던게 정의형목록의 사용인데, 그래서 전 정의형 목록을 되도록이면 쓰지 않으려고합니다.
    대부분 사이트들을 보면 정의형 목록을 썼을때, 정의 - 설명으로 쓰고있지 않는 것 같습니다. 저는 개인적으로 사전적의미 일때 써야 한다고 생각하지만, 정의-설명 이라는게 꼭 그것 만은 아니라고 생각들을 하시나 봅니다. 제가 생각을 바꿔야 하는건지, 아직도 좀 햇갈리네요.. 좋은글 잘보고 갑니다. 앞으로도 좋은거 많이 올려주세요 ~_~
  • MIRiyA 2012/06/24 05:24 # 삭제

    정말 감사합니다^^ 좋은 글 잘 읽고 도움 받아 갑니다.
    UXcamp 행사 페이지를 제작중인데, 연사 이름과 연사 설명 부분을 어떻게 해야하나 고민중에 들어와보니 DT는 쓰면 안되겠네요 ㅎㅎ
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


me2day