[웹접근성 지침-일반기술 G131] '설명적 라벨'을 제공하자

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

---

라벨은 연결된 해당 요소의 목적 및 정보를 제공하여 사용자가 잘 활용 할 수 있도록 도와주어야 합니다.

---

기술설명

이 기술의 목적은 웹 콘텐츠 내에 상호호환적인 구성요소에서 사용되는 라벨(label)들이 해당 요소의 목적을 명확하게 제공하는 것입니다. 이 기술을 사용하면 보조 기술을 사용하는 사용자들이 해당 컨트롤의 목적을 알 수 있게 됩니다.

라벨은 해당 필드에 값을 꼭 입력해야 하는 필수 사항(required)을 글자나 기호를 포함시켜 표시할 수 있습니다.

 

 

예시

[예시1] 확대/축소 컨트롤이 있는 온라인지도.

지도를 제공하는 웹용 애플리케이션이 있습니다. 지도를 자세히 보려면 '확대'를 하고 큰 도시 단위로 보려면 '축소'하면 됩니다.

마우스나 키보드를 이용하여 '확대'나 '축소'를 할 수 있습니다.

해당 컨트롤에는 '확대(Ctrl+Shift+L)'와 '축소(Ctrl+Shift+R)'이라는 라벨이 있습니다.

 

[예시2] 사용자의 이름을 입력받는 필드가 있습니다. 성과 이름을 각각의 필드로 받아야 합니다.

첫 번째 필드의 라벨은 ‘이름’이라고 되어있고 두 번째 필드의 라벨은 ‘성’이라고 되어 있습니다.

 

[예시3] 여러 개의 입력 필드를 가진 구매 양식(form)이 있습니다. 각 필드의 라벨은 해당 필드가 무엇인지를 식별해 주기도 합니다. 필수 입력 필드의 경우 해당 필드의 라벨에 ‘필수’라는 단어가 들어 있습니다.

 

 

 

관련기술

H90: 레이블 또는 범례를 사용하여 필수 양식 컨트롤 표시

 

 

점검절차

1. 인터페이스 구성요소의 목적을 식별합니다.

2. 필수 라벨이 있는지 확인합니다.

3. 각각의 라벨이 해당 요소의 용도를 명확하게 표시하는지 확인합니다.

 

 

---

 

나의 정리

라벨(label)은 <input>요소나 폼(form) 요소들 같은 인터페이스(UI)에 사용됩니다.
라벨(label)은 연결된 해당 요소의 용도 및 목적 등의 정보를 제공하여 사용자 잘 활용할 수 있도록 도와주는 역할을 합니다. 

즉 라벨은 해당 요소에 대한 사용방법이나 목적을 명시해야 합니다.

해당 요소가 반드시 입력해야 하는 '필수(required)'인 경우에는 라벨(label)에 '필수입력' 또는 '필수'라는 글자 또는 기호를 이용하여 필수 입력 요소라는 것을 표시해야 합니다. 

 

라벨은 연결된 해당 요소의 목적 및 정보를 제공하여 사용자가 잘 활용 할 수 있도록 도와주어야 합니다.

 

---

 

G131: Providing descriptive labels

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

G131: Providing descriptive labels | Techniques for WCAG 2.0

 

 

---

독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다. 

2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다. 

참여하기: https://blog.naver.com/redoxup/223601934677

[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!