page title

체크박스, 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현한다.

체크박스의 배경과 체크 아이콘은 체크박스의 선택 상태와 해당 요소가 체크박스 컴포넌트임을 인지할 수 있게 도와주는 중요한 시각적 정보이므로 인접 배경과의 명도 대비를 최소 3:1 이상으로 제공해야 한다.

• KWCAG 2.2 텍스트 콘텐츠의 명도 대비
• WCAG 2.1 Non-text Contrast (AA)

체크박스의 선택 상태를 색상으로만 구분하지 않는다.

체크박스의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공해야 한다.

• KWCAG 2.2 색에 무관한 콘텐츠 인식
• WCAG 2.1 Use of Color (A)

체크박스를 키보드로 탐색하고 실행할 수 있도록 한다.

사용자 에이전트에서 제공되는 기본 체크박스가 아니라 커스텀 디자인을 사용하는 경우에 기본 체크박스에 display:none, visibility:hidden, opacity:0과 같은 스타일을 하면 스크린 리더에서 체크박스의 역할을 인지할 수 없으며 키보드로 옵션을 선택할 수 없게 된다.

• KWCAG 2.2 키보드 사용 보장
• WCAG 2.1 Keyboard (A)
• WCAG 2.1 No Keyboard Trap (A)

체크박스에 키보드 초점이 명확하게 표시되도록 한다.

사용자 에이전트에서 제공되는 기본 체크박스가 아니라 커스텀 디자인을 사용하는 경우 키보드 초점이 시각적으로 표시되도록 스타일을 제공해야 한다. 체크박스 요소를 시각적으로 숨기는 경우, 시각적으로 표시되고 있는 체크박스 양식과 숨겨진 요소의 크기와 위치를 일치시켜 포커스링이 적절하게 표시되도록 구현해야 한다.

• KWCAG 2.2 초점 이동
• WCAG 2.1 Focus Visible (AA)
• WCAG 2.1 Non-text Contrast (AA)

체크박스에 접근 가능한 이름을 제공한다.

스크린 리더 사용자가 체크박스의 용도를 확인할 수 있도록 <label>, title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공해야 한다. 이때, 가능하면 <label>을 이용하여 사용자가 레이블을 클릭하였을 때에도 값을 선택할 수 있도록 구현하는 것이 좋다.

• KWCAG 2.2 레이블 제공
• WCAG 2.1 Info and Relationships (A)
• WCAG 2.1 Name, Role, Value (A)

스크린 리더에서 그룹 레이블과 체크박스 그룹의 관계를 확인할 수 있도록 한다.

<fieldset>, <legend>를 사용하여 스크린 리더 사용자에게 체크박스 그룹에서 값을 선택하는 목적을 보다 명확하게 전달할 수 있다.

• WCAG 2.1 Info and Relationships (A)
• WCAG 2.1 Labels or Instructions (A)