🕹️Form 그룹의 오류 적용 사례
그룹에 발생한 오류도 그룹화하여 제공하자
Radio 버튼으로 구성된 Radio 그룹이나 여러 개의 Checkbox로 구성된 Checkbox 그룹을 사용해야 하는 경우가 있다. 비장애인은 시각적으로 그룹화 정보를 인식할 수 있지만 스크린리더 사용자들은 어떻게 그룹화된 정보를 인지할 수 있을까?
그룹으로 된 Form을 사용할 때 오류 메시지는 어떻게 구현하는 것이 접근성을 준수하면서 사용성까지 만족할 수 있을 지에 대해서 알아보자.
(사전지식 : 폼 그룹의 필수 항목 적용하는 방법)
Radio 그룹 오류
항공권을 조회할 수 있는 기능이고 4개의 Radio 버튼으로 구현하였다. 아무것도 선택하지 않고 submit 버튼을 누르면 위 스크린샷과 같이 오류 메세지가 그룹 영역 하단에 바로 노출된다.
소스는 다음과 같다.
전체 Radio 그룹을 role="group"
으로 묶고 aria-labelledby
로 상위 <h3>
의 제목의 id와 연결한다. Radio 그룹의 오류이므로 오류 문구는 role="group"
속성을 갖고 있는 <div>
태그에 aria-describedby
속성을 삽입하고 오류문의 id와 연결한다.
오류가 발생했을 때 포커스는 Radio 그룹의 첫번째 항목으로 포커스를 이동시킨다. 이렇게 하면 그룹 레이블과 그룹 오류를 한 번에 읽고 있어서 스크린리더 사용자도 쉽게 이해할 수 있는 UI가 될 수 있다.
스크린리더 NVDA는 다음과 같이 읽게 된다.
항공권 조회 기간 그룹 조회를 원하는 달을 선택하세요
9월 라디오 버튼 해제됨 4개 중 1번 째
위 구현 방법 외에도 <filedset><legend>를 활용하는 방법도 있다. 다음 소스를 확인해보자.
라디오 그룹 전체를 <fieldset>
으로 묶고, <legend>
태그에 제목을 삽입하고 하단 <div>태그 안에 라디오 버튼을 감싸게 마크업한다. 그리고 오류가 발생하면 <legend>
태그 안에 오류 메시지가 동적으로 삽입되고 포커스는 첫번째 라디오 버튼으로 이동시킨다.
이렇게 구현하면 NVDA에서는 다음과 같이 읽는다. 그룹이라는 단어의 출력 순서만 바뀌었을 뿐 첫번째에서 구현한 것과 큰 차이는 없다.
항공권 조회 기간 조회를 원하는 달을 선택하세요 그룹
9월 라디오 버튼 해제됨 4개 중 1번 째
2가지 방법 모두 단순하고 쉬운 방법이므로 상황에 맞게 구현해 보는 것을 권장한다.
Checkbox 그룹 오류
Radio 그룹과 비슷한 Checkbox 그룹 오류도 다음과 같은 사례가 있다.
환불 전 동의 사항에 대한 내용을 한 개의 컨테이너 안에 넣고 전체에 대한 동의 체크박스를 2개를 배치한 사례이다. 위 사례와 마찬가지로 시각적으로 보여지는 박스 레이아웃 디자인으로 비장애인은 정보가 그룹화되어 있음을 바로 인지할 수 있다.
그럼 스크린리더 사용자들에게 어떻게 그룹화된 정보를 인지시킬 수 있을 지 role=radio
와 aria-labelledby
를 어디까지 묶어야 할 지 확인해 보자.
소스 구현 사례이다.
Checkbox 그룹을 <div role="group">
으로 묶고 aria-labelledby
속성과 <h3>의 id값을 삽입하여 그룹의 제목과 연결한다. 오류가 발생하면 aria-describedby
속성과 오류 문구의 id 값을 연결하고 포커스는 첫 번째 체크박스로 포커스를 이동시킨다.
다른 대안으로는 마찬가지로 <fieldset><legend>
로 묶는 방법이 있다.
<fieldset>
태그 안에 동의 사항과 체크박스 내용을 모두 삽입하고 <legend>
에 제목을 삽입하고 오류가 발생하면 오류 문구를 동적으로 삽입한다. 이렇게 구현하고 NVDA로 들어보면 다음과 같다.
환불 신청 전 동의 사항 첫번째 항목에 동의해 주세요 그룹 [동의] 환불 방법을 확인하였습니다. 체크상자 해제 됨
이렇게 구현하면 그룹 정보와 오류 내용을 그룹화하여 잘 읽어 주게 되므로 스크린리더 사용자들도 쉽게 사용할 수 있게 된다.
현재 chceckbox 그룹을 <div role="group">
으로 묶고 aria-describedby
속성과 오류 문구를 연결하는 경우 NVDA 스크린리더에서 제대로 오류 문구를 읽지 않는 버그가 있다. 그 버그가 해결되기 전까지 <fieldset><legend>
로 구현하는 것을 사용할 것을 권장한다.
Last updated