웹 접근성 지침(KWCAG에 대해) - 21 / 레이블 제공

• 웹 접근성 지침(KWCAG에 대해) - 0
• 웹 접근성 지침(KWCAG에 대해) - 1 / 적절한 대체 텍스트 제공
• 웹 접근성 지침(KWCAG에 대해) - 2 / 자막제공
• 웹 접근성 지침(KWCAG에 대해) - 3 / 색에 무관한 콘텐츠 인식
• 웹 접근성 지침(KWCAG에 대해) - 4 / 명확한 지시 사항 제공
• 웹 접근성 지침(KWCAG에 대해) - 5 / 텍스트 콘텐츠의 명도 대비
• 웹 접근성 지침(KWCAG에 대해) - 6 / 자동 재생 금지
• 웹 접근성 지침(KWCAG에 대해) - 7 / 콘텐츠 간의 구분
• 웹 접근성 지침(KWCAG에 대해) - 8 / 키보드 사용 보장
• 웹 접근성 지침(KWCAG에 대해) - 9 / 초점 이동
• 웹 접근성 지침(KWCAG에 대해) - 10 / 조작 가능
• 웹 접근성 지침(KWCAG에 대해) - 11 / 응답 시간 조절
• 웹 접근성 지침(KWCAG에 대해) - 12 / 정지 기능 제공
• 웹 접근성 지침(KWCAG에 대해) - 13 / 깜빡임과 번쩍임 사용 제한
• 웹 접근성 지침(KWCAG에 대해) - 14 / 반복 영역 건너뛰기
• 웹 접근성 지침(KWCAG에 대해) - 15 / 제목 제공
• 웹 접근성 지침(KWCAG에 대해) - 16 / 적절한 링크 텍스트
• 웹 접근성 지침(KWCAG에 대해) - 17 / 기본 언어 표시
• 웹 접근성 지침(KWCAG에 대해) - 18 / 사용자 요구에 따른 실행
• 웹 접근성 지침(KWCAG에 대해) - 19 / 콘텐츠의 선형 구조
• 웹 접근성 지침(KWCAG에 대해) - 20 / 표의 구성

---

사용자 입력에는 대응하는 레이블을 제공해야 한다.

 

 

청각으로만 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린리더가 '편집창'이라고만 읽어준다.

그렇기 때문에 무엇을 입력해야하는지 구분이 가지 않는다.

따라서 입력 서식에 대한 설명을 제공해야 한다.

 

레이블이 입력 서식이 1:1 매칭인 경우

레이블을 제공하고 label for 값과 input id 값을 동일하게 제공한다.

이렇게 제공하게 되면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 초점이 가게 된다.

 

레이블과 선택 서식이 1:1 매칭인 경우

이 경우도 위와 동일하다.

 

레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우

라디오 버튼, 체크 박스도 마찬가지로 레이블과 연결해 준다.

이렇게 레이블을 매칭해주면 레이블만 선택하더라도 컨트롤이 선택되기 때문에 편리하다.

 

레이블과 입력 서식이 1:다 매칭인 경우

각 입력 서식에 대해 title을 제공해준다.

 

레이블이 시각적으로 노출되지 않은 경우

각 입력 서식에 대해 title을 제공해야 한다.

 

 

레이블과 타이틀을 둘 다 제공한 경우 스크린리더기에 따라 레이블을 읽어주기도 하고 타이틀을 읽어주기도 한다.

따라서 중복 제공은 피하고 클릭할 수 있는 범위가 늘어나기 때문에 1:1 매칭인 경우에는 우선적으로 레이블을 제공하고

이외의 경우는 타이틀로 제공하면 된다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발