웹 접근성_레이블 제공

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

레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말합니다.

옷에도 라벨이 있듯이 입력 서식에도 라벨, 즉, 레이블을 제공해야 합니다.

 

레이블이 시각적으로 노출되어 있는 경우

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

아이디 입력창도 "편집창", 비밀번호 입력 창도 "편집창"이라고 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없습니다.

따라서 이에 대한 설명을 제공해야 합니다.

 

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

: 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공

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

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

라디오 버튼과 체크 박스는 컨트롤 크기가 매우 작은데요,

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

 

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

: 각 입력 서식에 대해 title을 제공

---

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

: 각 입력 서식에 대해 title을 제공

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

따라서 중복 제공은 피하고 클릭할 수 있는 범위가 늘어나기 때문에 1:1매칭인 경우는 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공해주시면 됩니다.