[LAB-4] 키보드 접근성을 고려하다가 발생한 체크박스 문제에 대해 질문있습니다!

[SeoMiYoung]

질문 작성자

서미영

문제 상황

현재 디테일 페이지의 팝업창의 Tab 접근성을 고려하고 있습니다. 위의 움짤에서 보면 알 수 있듯이, Tab으로 접근 시, '비밀글로 문의하기' 부분의 체크박스에 Tab접근이 되질 않는 상황이 발생했습니다.

저는 비밀글로 문의하기 부분을 Secret.jsx라는 컴포넌트로 관리하고 있습니다. 그 안에서 체크박스를 input태그로 구현했는데요,

만약에 Secret.module.scss에서

input[type="checkbox"] {
    // display: none;
}

위의 코드에서 display:none;을 주석처리한다면 다음과 같이 input태그에 포커스가 잡히지만,

제가 원하는 형태대로 되지 않습니다. 제가 원하는 형태가 되려면, display:none;이 적용되어야 합니다.

도움이 필요합니다ㅠㅠ!

프로젝트 저장소 URL

• 저장소 URL
  • https://github.com/SeoMiYoung/project-repo
• branch 정보: feat/#212
• 이슈 관련 파일 정보 설명
  • ProductDetailPopUp.jsx : 디테일 팝업창 컴포넌트
  • Secret.jsx : 비밀글로 문의하기 부분 컴포넌트

환경 정보

• 운영체제 정보: 윈도우
• Node.js 정보: v18.14.0

[seulbinim]

안녕하세요 미영님 display: none을 사용하면 스크린 리더 사용자는 체크박스 서식을 인식할 수 없습니다. 또한 키보드로 조작이 불가능하기 때문에 좋은 방법이 아닙니다.

display: none을 사용하지 않고 커스텀 체크박스를 키보드로 조작할 수 있도록 하기 위한 방법으로 다음 내용을 참고하시기 바랍니다.

가장 먼저 체크박스 input 요소에 apperance: none을 지정합니다. 이렇게 하면 기본 UI가 보이지 않게 됩니다.

다음으로 input 요소가 영역을 차지하지 않도록 position: absolute를 사용하여 label 요소 위에 겹치도록 배치합니다. 이때 label 요소에 체크되기 전 상태의 배경이미지를 지정한 후 적절한 padding 값을 지정하여 배경이미지와 레이블 텍스트가 겹치지 않도록 합니다.

마지막으로 체크박스인 input 요소에 키보드 접근 시 초점이 보일 때 스페이스 키를 눌러 :checked 상태가 되면 label 요소의 배경이 체크된 상태의 이미지로 변경되도록 설정하면 됩니다. 이때 헝제 선택자 (input:checked + label)를 활용하여 처리할 수 있습니다.

첨부한 파일을 다운로드 받으셔서 마크업과 함께 CSS 코드를 참고하시기 바랍니다.

checkbox.zip

[SeoMiYoung]

우와... absolute로 띄울 생각을 못했네요... 많은 도움이 되었습니다!! 감사합니당 ㅠㅠㅠ