[H40] 설명 목록(description lists)

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H40.html

---

'설명 목록(description lists)'을 사용하기 위해서는 용어와 설명의 관계를 올바르게 파악해서 올바른 요소를 사용하고 올바른 순서로 배치해야 합니다.

---

기술설명

이 기술의 목적은 이름이나 용어를 설명하는 '설명 목록(description lists)'에 대해 알려주는 것입니다.

'설명 목록(description lists)'은 dl요소를 이용하여 표현합니다.

목록 내에서 용어 및 이름은 dt요소를 사용하고, 해당 설명은 dd요소를 사용합니다.

'의미의 흐름(semantic sequence)'이 유지되는 상황에서 여러 용어들을 하나의 설명에 연결할 수 있으며, 하나의 용어에 여러 설명 들을 연결할 수도 있습니다. dl요소에 title속성을 이용하면 '설명 목록'에 대한 추가 정보를 제공할 수 있습니다.

 

'설명 목록(description lists)'을 사용하기 위해서는 용어와 설명이 의미론적으로 연결된 상태를 유지해야 합니다.

'설명 목록'은 각 용어와 설명이 하나의 단위로 묶여서 정리됩니다. 그렇게 해야 정보가 체계적으로 구성되어, 사용자가 쉽게 이해할 수 있습니다.

 

'설명 목록' 은 알파벳 순서로 정렬할 때 가장 유용하며, 보통 용어집에 사용됩니다.

 

*참고: '설명 목록(description lists)'은 HTML5이후에 도입되었습니다. 이전에는 '정의 목록(Definition lists)'이라고 불렀습니다.

 

 

예시

항해 용어에 대한 설명 목록

<dl title="항해 용어">
  <dt>Knot</dt>
  <dd>
    <p>배의 속도를 나타내는 단위. 1노트는 1시간에 1해리, 즉 1,852m를 달리는 속도이다.</p>
  </dd>
  
  <dt>Port</dt>
  <dd>
    <p>항구를 의미한다. 선박이나 항공기의 좌측, 즉 좌현을 의미하기도 한다.</p>
  </dd>
  
  <dt>Starboard</dt>
  <dd>
    <p>우현이라고 하며, 선박이나 항공기의 우측 의미한다.</p>
  </dd>
</dl>

 

자료

HTML5 설명 목록

HTML 4 정의 목록: DL, DT 및 DD 요소

 

 

관련기술

G62: 용어집 제공

 

 

점검절차

1. dl요소가 있는지 확인합니다.

2. dl요소에 dt요소가 있는지 확인합니다.

3. 동일한 설명을 공유하는 용어가 두 개 이상 있는 경우 해당 dt요소 바로 뒤에 오는지 확인합니다.

4. 각 용어에 대한 설명이 하나 이상의 dd요소를 포함하는지 확인합니다.

5. dt요소 다음에 dd요소가 배치되어 있는지 확인합니다.

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

나의 정리

용어집이나 사전같이 어떤 용어나 이름과 설명이 있는 목록 형식을 '설명 목록(description lists)'이라고 합니다.
'설명 목록'은 아래의 예제와 같이 dl요소로 선언할 수 있으며 dl요소 안에 용어 및 이름을 표현하는 dd요소와 그 용어에 대한 설명을 표현하는 dt요소로 구성되어 있습니다.

<dl title="웹 관련 용어집">
  <dt>HTML</dt>
  <dd>웹 페이지에서 태그로 구성된 문서</dd>
</dl>

 

용어가 여러 개인 경우 아래 예와 같은 순서로 배치하면 됩니다.

<dl title="웹 관련 용어집">
  <dt>HTML</dt>
  <dd>웹 페이지에서 태그로 구성된 문서</dd>

  <dt>WEB</dt>
  <dd>전 세계 사용자들이 정보를 공유할 수 있는 온라인 공간</dd>

  <dt>브라우저</dt>
  <dd>인터넷 검색시 정보를 얻기 위해 사용하는 프로그램</dd>
</dl>

 

dt요소가 용어를 의미하며 그 다음으로 오는 dd요소가 해당 용어의 설명에 해당합니다.
이 순서는 '설명 목록'의 사용 방법이며 순서를 잘 못 사용하는 경우, 브라우저나 보조 기술이 용어와 설명에 대한 관계를 잘 못 이해 할 수 있습니다.

만약 아래와 같이 dt요소와 dd요소를 잘못 사용한다면 

<dl title="웹 관련 용어집"> 
  <dd>웹 페이지에서 태그로 구성된 문서</dd>
  <dt>HTML</dt>
 
  <dd>전 세계 사용자들이 정보를 공유할 수 있는 온라인 공간</dd>
  <dt>WEB</dt> 
</dl>

브라우저나 보조 기술은 'HTML' 이라는 용어의 뜻을 '전 세계 사용자들이 정보를 공유할 수 있는 온라인 공간'이라고 인식 할 것입니다.

그리고 하나의 용어에 뜻이 여러 가지인 경우가 있고, 하나의 뜻이 여러 용어를 가지는 경우가 있을 수 있습니다.
그때 에는 다음 예제와 같이 사용하면 됩니다.

<dl title="웹 관련 용어집"> 
    <dt>HTML</dt>
    <dt>HyperText Markup Language</dt>
    <dd>웹 페이지에서 태그로 구성된 문서</dd>
  
    <dt>CSS</dt>
    <dd>웹 페이지의 스타일을 지정하는 스타일 시트 언어</dd>
    <dd>색상, 글꼴, 레이아웃 등을 설정하는 언어</dd> 
</dl>

 

'설명 목록(description lists)'을 사용하기 위해서는 용어와 설명의 관계를 올바르게 파악해서 올바른 요소를 사용하고 올바른 순서로 배치해야 합니다.

---

 

H40: Using description lists

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H40.html

H40: Using description lists | Techniques for WCAG 2.0