WCAG 2.1 항공사 WAI-ARIA 적용 사례
  • 모두를 위한 디자인
  • 항공사의 웹 접근성 준수 의무
  • 국내 접근성과 국제 접근성은 어떻게 다를까?
  • 항공사 접근성 위배로 인한 벌금 부과 사례
  • AOA 2023~
    • 주요 UI별 ARIA 적용 사례 (2022~2024)
      • 호버 콘텐츠 적용사례
      • 입력 글자 수 제한 사례
      • 🕹️Form 그룹의 오류 적용 사례
      • 비밀번호 실시간 오류 적용 사례
      • 🖼️SVG 이미지의 접근성 향상 방법
      • 오류메시지 종류별 적용 사례
      • 스낵바(Snack bar) 적용 사례
  • AOA 2019
    • 주요 UI별 ARIA 적용 사례 (2019)
      • 스핀 버튼 적용 사례
      • 페이지 네비게이터 적용 사례
      • 메인 네비게이션 구현 사례
      • 메뉴 적용 사례
      • 캐러셀 적용 사례
      • 채팅 상담 적용 사례
      • 툴팁 적용 사례
      • 그룹명 필수 항목 적용 사례
      • 이해하기 쉬운 데이터 테이블 적용 사례
      • 날짜 입력 적용 사례
    • 알아두면 좋은 TIP!
      • dl, dt, dd 태그를 남용하지 마세요.
      • 제발 나를 무시해 주세요.
      • 띄어쓰기를 주의하세요!
  • AOA 2018
    • 주요 UI별 ARIA 적용 사례 (2018)
      • 로딩 적용 사례
      • Date Picker 적용사례
      • 좌석선택 적용사례
      • 탭 UI 적용 사례
      • 모달 다이얼로그 적용 사례
      • 확장과 축소 콘텐츠 적용 사례
      • 정렬할 수 있는 table 적용 사례
      • 자동완성 적용 사례
      • 접근성 주요 개선 항목
        • 버튼을 왜 링크로 쓰는거지?
        • 그룹에게는 그룹명을 알려주자
        • 에러메세지는 왜 보이기만 하지?
        • 이해하기 어려운 폼 레이블
        • 화면을 보는 스크린리더 사용자
        • 전환되지 않는 페이지의 포커스
        • 동일한 기능의 서로 다른 UI
    • 알아두면 좋은 것들
      • role=application은 언제 사용할까?
      • 대문자로만 표현해야 할 때
      • 화면의 정렬을 위해 중복 태그를 사용하지 말 것
    • Screen Reader 테스트
      • Screen Reader와 Browser 조합
      • Screen Reader 버그
  • WAI-ARIA
    • Landmark Role
    • Widget Role & Attributes
  • Contact
    • 무엇이 궁금하세요?
Powered by GitBook
On this page
  • dl 은 Definition list 또는 description list
  • 국내 포털 사이트에서는 잘 사용하고 있을까?
  • <dl><dt><dd>는 1:1로 쌍을 이룰 때 사용하는 것을 권장

Was this helpful?

Edit on Git
  1. AOA 2019
  2. 알아두면 좋은 TIP!

dl, dt, dd 태그를 남용하지 마세요.

Previous알아두면 좋은 TIP!Next제발 나를 무시해 주세요.

Last updated 2 years ago

Was this helpful?

dl 은 Definition list 또는 description list

국내 사이트에는 구조화하여 마크업하기 쉽다는 이유로 무의식적으로 <dl>, <dt>, <dd>를 많이 사용한다. 사용 목적을 잘 이해하지 않고 시맨틱하다고 생각하고 사용하는 경우도 많다.

다음의 예제 화면을 보자.

<dl>
    <dt>Cabin Class</dt>
    <dd><input type="radio" id="cla-1">
        <label for="cla-1">Economy Class</label>
    </dd>
    <dd><input type="radio" id="cla-2">
        <label for="cla-2">Prestige Class</label>
    </dd>
    <dd><input type="radio" id="cla-3">
        <label for="cla-3">First Class</label>
    </dd>
</dl>

처음 이렇게 제작해 놓고 잘 구조화 해놓았고 좋아했지만, 이런 형태는 정의형 목록도 아니고 설명을 위한 목록도 아니다.

다음의 더 신박한 마크업을 보자.

<dl>
    <dt><label for="ad">비밀번호</label></dt>
    <dd><input type="text" id="ad"></dd>
</dl>

이런 방법으로 제작하는 사람이 정말 드물겠지만(?), 이런 방법으로 마크업하는 사람도 있다. 물론 이것도 <dl><dt><dd>의 사용목적과 맞지 않다.

정의형(설명형) 목록에서 <dd>는 값이 바뀔 수 있다면, 그건 정의형이 될 수 없기 때문이다. 이미 정의가 되어 있거나 설명이 정해져 있는 경우에만 사용할 수 있는 태그인 것이다.

국내 포털 사이트에서는 잘 사용하고 있을까?

Daum의 메뉴

모 포털사이트의 메뉴 영역을 <dl><dt><dd>로 사용하고 있다.

<dl>
    <dt>커뮤니케이션</dt>
        <dd>메일</dd>
        <dd>카페</dd>
        <dd>블로그</dd>
        <dd>티스토리</dd>
        <dd>브런치</dd>
        <dd>아지트</dd>
        <dd>카카오스토리</dd>
</dl>
<dl>
    <dt>미디어</dt>
        <dd>뉴스</dd>
        <dd>스포츠</dd>
        <dd>연예</dd>
</dl>
.... 

위와 같이 마크업하였을 경우, 일단 가장 문제되는 것은 스크린리더 사용자들은 전체 메뉴구조를 파악할 수 없다는 것이다. 같은 제목 아래 한 개의 리스트로 있어야 존재해야 하는 항목을 단지 레이아웃 배치를 위해 9개의 <dl>을 사용하고 있다. 그리고 메뉴의 뎁스 구조를 <dt><dd>로 표현했을 뿐 정의형도 아니고 설명을 위한 구조도 아닌 것이다.

시맨틱하고 접근성을 고려한 마크업은 전체 1개의 <ul>로 제작하고 하위 <ul>태그로 구조화하는 것이 더 적절한 방법이다.

또 다른 포털사이트의 뉴스 페이지이다. 사진과 설명글을 <dl><dt><dd>로 마크업하였다.

네이버의 뉴스

<dl>
    <dt><img src="비건.jpg" alt="훈련 끝 대화시작? 방한 비건에 쏠린 눈"></dt>
    <dd>훈련 끝 대화시작? 방한 비건에 쏠린 눈</dd>
</dl>  

HTML5에서는 description 의 역할이 가능하므로 이미지의 설명으로는 문제가 없을 것 같은 마크업이다. 하지만 소스를 들여다 보면, 이미지의 alt 속성의 값이 <dd>에 동일한 문구로 중복으로 삽입되는 것이 문제인 것이다. 시맨틱하게 마크업을 할 수 있다면 <figure>태그를 사용하는 것이 더 적절한 것이다.

<dl><dt><dd>는 1:1로 쌍을 이룰 때 사용하는 것을 권장

스크린리더는 <dt>와 <dd>를 1:1로 쌍을 이룰 때 사용하는 것이 가장 정확한 의미를 읽어내어 스크린리더 사용자의 이해가 쉬워진다. 반드시 정의형이나 설명형을 만족하지 않더라도 제목과 데이터가 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다.

<dt>는 1개이고 <dd>가 2개 이상을 사용해도 문법 오류는 발생하지 않지만, <dl><dt><dd> 태그 사용이 적합한 구조인지 다시 한번 생각해 보는 것이 좋다.

<dl> 태그 또한 <ul>이나 <ol>과 마찬가지로 화면에 보이는 병렬 배치를 위해 여러 개를 사용하지 않도록 해야 한다. 스크린리더 사용자는 몇 개의 리스트를 더 탐색해야 하는 건지 전혀 예측이 안되기 때문이다.

다음 포털사이트의 메뉴를 dl, dt, dd로 사용
이미지와 이미지 설명을 dl, dt, dd