WCAG 2.1 항공사 WAI-ARIA 적용 사례
  • 모두를 위한 디자인
  • 항공사의 웹 접근성 준수 의무
  • 국내 접근성과 국제 접근성은 어떻게 다를까?
  • 항공사 접근성 위배로 인한 벌금 부과 사례
  • AOA 2023~
    • 주요 UI별 ARIA 적용 사례 (2022~2024)
      • 호버 콘텐츠 적용사례
      • 입력 글자 수 제한 사례
      • 🕹️Form 그룹의 오류 적용 사례
      • 비밀번호 실시간 오류 적용 사례
      • 🖼️SVG 이미지의 접근성 향상 방법
      • 오류메시지 종류별 적용 사례
      • 스낵바(Snack bar) 적용 사례
  • AOA 2019
    • 주요 UI별 ARIA 적용 사례 (2019)
      • 스핀 버튼 적용 사례
      • 페이지 네비게이터 적용 사례
      • 메인 네비게이션 구현 사례
      • 메뉴 적용 사례
      • 캐러셀 적용 사례
      • 채팅 상담 적용 사례
      • 툴팁 적용 사례
      • 그룹명 필수 항목 적용 사례
      • 이해하기 쉬운 데이터 테이블 적용 사례
      • 날짜 입력 적용 사례
    • 알아두면 좋은 TIP!
      • dl, dt, dd 태그를 남용하지 마세요.
      • 제발 나를 무시해 주세요.
      • 띄어쓰기를 주의하세요!
  • AOA 2018
    • 주요 UI별 ARIA 적용 사례 (2018)
      • 로딩 적용 사례
      • Date Picker 적용사례
      • 좌석선택 적용사례
      • 탭 UI 적용 사례
      • 모달 다이얼로그 적용 사례
      • 확장과 축소 콘텐츠 적용 사례
      • 정렬할 수 있는 table 적용 사례
      • 자동완성 적용 사례
      • 접근성 주요 개선 항목
        • 버튼을 왜 링크로 쓰는거지?
        • 그룹에게는 그룹명을 알려주자
        • 에러메세지는 왜 보이기만 하지?
        • 이해하기 어려운 폼 레이블
        • 화면을 보는 스크린리더 사용자
        • 전환되지 않는 페이지의 포커스
        • 동일한 기능의 서로 다른 UI
    • 알아두면 좋은 것들
      • role=application은 언제 사용할까?
      • 대문자로만 표현해야 할 때
      • 화면의 정렬을 위해 중복 태그를 사용하지 말 것
    • Screen Reader 테스트
      • Screen Reader와 Browser 조합
      • Screen Reader 버그
  • WAI-ARIA
    • Landmark Role
    • Widget Role & Attributes
  • Contact
    • 무엇이 궁금하세요?
Powered by GitBook
On this page
  • Radio 그룹 오류
  • Checkbox 그룹 오류

Was this helpful?

Edit on Git
  1. AOA 2023~
  2. 주요 UI별 ARIA 적용 사례 (2022~2024)

Form 그룹의 오류 적용 사례

그룹에 발생한 오류도 그룹화하여 제공하자

Previous입력 글자 수 제한 사례Next비밀번호 실시간 오류 적용 사례

Last updated 1 year ago

Was this helpful?

Radio 버튼으로 구성된 Radio 그룹이나 여러 개의 Checkbox로 구성된 Checkbox 그룹을 사용해야 하는 경우가 있다. 비장애인은 시각적으로 그룹화 정보를 인식할 수 있지만 스크린리더 사용자들은 어떻게 그룹화된 정보를 인지할 수 있을까?

그룹으로 된 Form을 사용할 때 오류 메시지는 어떻게 구현하는 것이 접근성을 준수하면서 사용성까지 만족할 수 있을 지에 대해서 알아보자.

(사전지식 : 폼 그룹의 필수 항목 적용하는 방법)

Radio 그룹 오류

항공권을 조회할 수 있는 기능이고 4개의 Radio 버튼으로 구현하였다. 아무것도 선택하지 않고 submit 버튼을 누르면 위 스크린샷과 같이 오류 메세지가 그룹 영역 하단에 바로 노출된다.

소스는 다음과 같다.

<h3 id="timerange">항공권 조회 기간</h3>
<div role="group" aria-labelledby="timerange" aria-describedby="timerange-error">
    <input name="range" type="radio" id="nine">
    <label for="nine">9월</label>
    <input name="range" type="radio" id="ten" >
    <label for="ten">10월</label>
    <input name="range" type="radio" id="eleven" >
    <label for="eleven">11월</label>
    <input name="range" type="radio" id="twelve" >
    <label for="twelve">12월</label>
</div>
<!-- 에러메시지 -->
<p id="timerange-error">조회를 원하는 달을 선택하세요</p>

전체 Radio 그룹을 role="group"으로 묶고 aria-labelledby로 상위 <h3>의 제목의 id와 연결한다. Radio 그룹의 오류이므로 오류 문구는 role="group"속성을 갖고 있는 <div> 태그에 aria-describedby 속성을 삽입하고 오류문의 id와 연결한다.

오류가 발생했을 때 포커스는 Radio 그룹의 첫번째 항목으로 포커스를 이동시킨다. 이렇게 하면 그룹 레이블과 그룹 오류를 한 번에 읽고 있어서 스크린리더 사용자도 쉽게 이해할 수 있는 UI가 될 수 있다.

스크린리더 NVDA는 다음과 같이 읽게 된다.

항공권 조회 기간 그룹 조회를 원하는 달을 선택하세요

9월 라디오 버튼 해제됨 4개 중 1번 째

위 구현 방법 외에도 <filedset><legend>를 활용하는 방법도 있다. 다음 소스를 확인해보자.

<fieldset>
    <legend>항공권 조회 기간
        <!-- 에러메시지 -->
        <p id="timerange-error">조회를 원하는 달을 선택하세요</p>
    </legend>
    <div>
        <input name="range" type="radio" id="nine">
        <label for="nine">9월</label>
        <input name="range" type="radio" id="ten" >
        <label for="ten">10월</label>
        <input name="range" type="radio" id="eleven" >
        <label for="eleven">11월</label>
        <input name="range" type="radio" id="twelve" >
        <label for="twelve">12월</label>
    </div>
</fieldset>

라디오 그룹 전체를 <fieldset>으로 묶고, <legend>태그에 제목을 삽입하고 하단 <div>태그 안에 라디오 버튼을 감싸게 마크업한다. 그리고 오류가 발생하면 <legend>태그 안에 오류 메시지가 동적으로 삽입되고 포커스는 첫번째 라디오 버튼으로 이동시킨다.

이렇게 구현하면 NVDA에서는 다음과 같이 읽는다. 그룹이라는 단어의 출력 순서만 바뀌었을 뿐 첫번째에서 구현한 것과 큰 차이는 없다.

항공권 조회 기간 조회를 원하는 달을 선택하세요 그룹

9월 라디오 버튼 해제됨 4개 중 1번 째

2가지 방법 모두 단순하고 쉬운 방법이므로 상황에 맞게 구현해 보는 것을 권장한다.


Checkbox 그룹 오류

Radio 그룹과 비슷한 Checkbox 그룹 오류도 다음과 같은 사례가 있다.

환불 전 동의 사항에 대한 내용을 한 개의 컨테이너 안에 넣고 전체에 대한 동의 체크박스를 2개를 배치한 사례이다. 위 사례와 마찬가지로 시각적으로 보여지는 박스 레이아웃 디자인으로 비장애인은 정보가 그룹화되어 있음을 바로 인지할 수 있다.

그럼 스크린리더 사용자들에게 어떻게 그룹화된 정보를 인지시킬 수 있을 지 role=radio와 aria-labelledby를 어디까지 묶어야 할 지 확인해 보자.

소스 구현 사례이다.

<h3 id="agree-contents">환불 신청 전 동의 사항</h3>
<div role="group" aria-labelledby="agree-contents" aria-describedby="error-massege">
    <ul>
        <li>환불 수수료는 최초 지불 수단에서 공제됩니다.</li>
        <li>신용카드로 구매한 환불금은 승인 후 카드사로 이관되므로 환불금 수령시기는 해당 카드사에 문의해 주세요.</li>
        <li>환불에 대한 책임은 신청자 본인에게 있습니다.</li>
    </ul>
    <input type="checkbox" id="agree1">
    <label for="agree1">[동의] 환불 방법을 확인하였습니다.</label>
    <input type="checkbox" id="agree2">
    <label for="agree2">[동의] 위의 내용에 대해 모두 확인하였습니다.</label>
</div>
<!-- 에러 메시지 -->
<p id="error-massege">첫번째 항목에 동의해 주세요</p>

Checkbox 그룹을 <div role="group">으로 묶고 aria-labelledby 속성과 <h3>의 id값을 삽입하여 그룹의 제목과 연결한다. 오류가 발생하면 aria-describedby 속성과 오류 문구의 id 값을 연결하고 포커스는 첫 번째 체크박스로 포커스를 이동시킨다.

다른 대안으로는 마찬가지로 <fieldset><legend>로 묶는 방법이 있다.

<fieldset>
    <legend>환불 신청 전 동의 사항
        <!-- 에러 메시지 -->
        <p id="error-massege">첫번째 항목에 동의해 주세요</p>
    </legend>
    <div>
        <ul>
            <li>환불 수수료는 최초 지불 수단에서 공제됩니다.</li>
            <li>신용카드로 구매한 환불금은 승인 후 카드사로 이관되므로 환불금 수령시기는 해당 카드사에 문의해 주세요.</li>
            <li>환불에 대한 책임은 신청자 본인에게 있습니다.</li>
        </ul>
        <input type="checkbox" id="agree1">
        <label for="agree1">[동의] 환불 방법을 확인하였습니다.</label>
        <input type="checkbox" id="agree2">
        <label for="agree2">[동의] 위의 내용에 대해 모두 확인하였습니다.</label>
    </div>
</fieldset>

<fieldset> 태그 안에 동의 사항과 체크박스 내용을 모두 삽입하고 <legend>에 제목을 삽입하고 오류가 발생하면 오류 문구를 동적으로 삽입한다. 이렇게 구현하고 NVDA로 들어보면 다음과 같다.

환불 신청 전 동의 사항 첫번째 항목에 동의해 주세요 그룹 [동의] 환불 방법을 확인하였습니다. 체크상자 해제 됨

이렇게 구현하면 그룹 정보와 오류 내용을 그룹화하여 잘 읽어 주게 되므로 스크린리더 사용자들도 쉽게 사용할 수 있게 된다.

현재 chceckbox 그룹을 <div role="group">으로 묶고 aria-describedby 속성과 오류 문구를 연결하는 경우 NVDA 스크린리더에서 제대로 오류 문구를 읽지 않는 버그가 있다. 그 버그가 해결되기 전까지 <fieldset><legend>로 구현하는 것을 사용할 것을 권장한다.

🕹️
Page cover image
그룹명 필수 항목 적용 사례WCAG 2.1 항공사 WAI-ARIA 적용사례
Logo