ARIA 접근성 가이드

역할 · 문서 구조

role="group"

관련된 요소를 하나로 묶는 컨테이너입니다. 랜드마크와 달리 페이지 요약(목차)에는 나오지 않습니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<fieldset>, <details>, <optgroup>, <address>, <hgroup>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

group은 서로 관련된 사용자 인터페이스 요소의 묶음입니다. region과 달리 랜드마크가 아니어서 랜드마크 목록에 나오지 않습니다. 주로 다음 경우에 씁니다.

  • 양식 컨트롤 묶음: “배송 주소” 입력란들, 체크박스 묶음 등. HTML에서는 <fieldset>과 <legend>가 group과 이름을 자동으로 만들어 줍니다.
  • 위젯 안의 하위 묶음: tree의 하위 항목 묶음, menu 안의 메뉴 항목 묶음, listbox 안의 옵션 묶음(<optgroup>). listbox 안 group의 자식은 option만 와야 합니다.
  • 이름 있는 묶음: 슬라이드 하나, 카드 하나처럼 묶어서 이름을 줘야 할 때(이름 금지인 generic 대신).

이름 붙이기

이름은 필수가 아니지만 group은 이름이 있을 때 가장 쓸모가 있습니다. 포커스가 묶음 안으로 들어갈 때 화면낭독기가 그룹 이름을 먼저 읽어 주기 때문입니다. 보이는 제목을 aria-labelledby로 연결하거나 aria-label을 씁니다.

주의할 점

  • 라디오 버튼 묶음은 group보다 radiogroup이 정확합니다(단, <fieldset> 안의 <input type="radio">라면 그대로 충분합니다).
  • 도구 버튼 묶음에 화살표 이동을 제공한다면 toolbar를 씁니다.
  • aria-disabled를 group에 주면 묶음 전체가 비활성임을 알릴 수 있지만, 실제로 안의 컨트롤도 조작되지 않게 막아야 합니다.

테스터 관점

관련 입력란 묶음(예: 생년월일 연·월·일, 질문별 선택지)에 그룹 이름이 있는지 확인합니다. 포커스가 첫 입력란에 갈 때 “생년월일, 그룹”이 함께 들리면 정상입니다.

함께 쓰는 속성

지원 속성

aria-activedescendantaria-disabled

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

fieldset과 legend (권장)

권장HTML
<fieldset>
  <legend>알림 받을 방법</legend>
  <label><input type="checkbox" name="n" value="sms"> 문자</label>
  <label><input type="checkbox" name="n" value="mail"> 이메일</label>
</fieldset>

레이아웃상 fieldset을 쓰기 어려울 때

HTML
<div role="group" aria-labelledby="birth-l">
  <span id="birth-l">생년월일</span>
  <label>년 <input inputmode="numeric" size="4"></label>
  <label>월 <input inputmode="numeric" size="2"></label>
  <label>일 <input inputmode="numeric" size="2"></label>
</div>

이름 없는 group (효과 없음)

비권장HTML
<div role="group">
  <input type="checkbox" id="a"><label for="a">문자</label>
</div>

무엇의 묶음인지 알 수 없어 group으로 감싼 의미가 거의 없습니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
그룹 안 첫 컨트롤로 Tab 이동알림 받을 방법, 그룹, 문자, 체크 상자, 체크 안 됨
같은 그룹 안 다음 컨트롤이메일, 체크 상자, 체크 안 됨

사용 지침

이렇게 쓰세요

  • 양식 컨트롤 묶음은 <fieldset>/<legend>로 만듭니다.
  • group에는 보이는 제목을 연결해 이름을 줍니다.

이렇게 쓰지 마세요

  • 랜드마크로 이동해야 할 큰 영역을 group으로 만들지 않습니다(region 등 사용).
  • 라디오 묶음·도구 막대에 더 정확한 역할이 있는데 group만 쓰지 않습니다.
regionradiogrouptoolbarlistboxtreemenu

이 역할을 쓰는 패턴

폼 오류 검증라디오 그룹체크박스캐러셀(슬라이드)

참고 자료