ARIA 접근성 가이드

속성 · 위젯 상태

aria-required

양식을 제출하기 전에 반드시 입력하거나 선택해야 하는 항목임을 알립니다.

기초

한눈에 보기

구분
속성 (Property)
분류
위젯 상태
값 형식
true / false
기본값
false
적용 범위
특정 역할에만 사용
HTML 대체
<input>·<select>·<textarea>의 required 속성

설명

aria-required="true"는 사용자가 양식을 제출하기 전에 이 항목에 값을 넣거나 선택해야 한다는 것을 알립니다. 화면낭독기는 필드에 포커스가 갈 때 “필수”라고 읽습니다. 빨간 별표(*)는 화면낭독기 설정에 따라 “별표”로 읽히거나 생략되어 의미가 전달되지 않을 수 있기 때문에, 의미 정보를 따로 주는 것입니다.

HTML required 속성은 필수 정보를 자동으로 전달하고, 브라우저 기본 검사(빈 값이면 제출 차단)까지 해 줍니다. 브라우저 기본 오류 말풍선 대신 직접 만든 오류 메시지를 쓰려고 required를 피하는 경우, <form novalidate>와 required를 함께 쓰거나 aria-required="true"를 쓸 수 있습니다. 사용자 정의 위젯인 radiogroup, listbox, combobox, checkbox, spinbutton, textbox, tree, gridcell에도 씁니다. 라디오 버튼 묶음은 개별 radio가 아니라 radiogroup에 붙입니다.

이 속성은 검사를 해 주지 않습니다. 값이 비었는지 확인하고 오류 메시지를 보여 주는 것은 스크립트의 몫이며, 검사에 실패하면 aria-invalid와 오류 메시지를 함께 설정합니다. 또한 시각적으로도 필수임을 표시해야 하므로(WCAG 3.3.2 레이블 또는 설명), 양식 위에 “* 표시는 필수 항목입니다”라는 안내를 두거나 레이블에 “(필수)”를 텍스트로 적습니다. 별표를 aria-hidden="true"로 숨기고 aria-required로 전달하면 “필수, 별표”처럼 중복으로 읽히지 않습니다.

필수가 아닌 항목이 대부분이고 필수 항목이 소수라면, 반대로 “(선택)”을 표시하는 방식도 쓰입니다. 어느 쪽이든 화면 표시와 속성이 일치해야 합니다.

테스트할 때는 필수 필드마다 “필수”가 읽히는지, 시각적 표시가 있는지, 빈 값으로 제출했을 때 오류가 알려지는지 확인합니다.

값

값
값의미
true제출 전에 값을 입력하거나 선택해야 합니다.
false 기본값필수가 아닙니다.

사용 예

네이티브 required (권장)

권장HTML
<label for="name">이름 <span aria-hidden="true">*</span></label>
<input id="name" type="text" required autocomplete="name">

required가 필수 정보를 전달하므로 별표는 aria-hidden으로 숨깁니다.

사용자 정의 라디오 그룹

HTML
<p id="ship-label">배송 방법 <span aria-hidden="true">*</span></p>
<div role="radiogroup" aria-labelledby="ship-label" aria-required="true">
  <div role="radio" aria-checked="false" tabindex="0">일반 배송</div>
  <div role="radio" aria-checked="false" tabindex="-1">새벽 배송</div>
</div>

개별 라디오에 붙인 경우 (비권장)

비권장HTML
<div role="radiogroup" aria-label="배송 방법">
  <div role="radio" aria-checked="false" aria-required="true">일반 배송</div>
  <div role="radio" aria-checked="false" aria-required="true">새벽 배송</div>
</div>

radio 역할은 aria-required를 지원하지 않습니다. 그룹에 한 번만 붙입니다.

직접 해 보기

아무것도 고르지 않고 “다음”을 눌러 보세요. 라디오 그룹은 Tab으로 들어가 방향키로 고릅니다.

표시는 필수 항목입니다.

배송 방법

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
필수 입력란에 포커스이름, 편집 창, 필수
필수 라디오 그룹으로 이동배송 방법, 그룹화, 필수, 일반 배송, 라디오 버튼, 선택 안 됨, 1/3
빈 값으로 제출 후 그룹으로 포커스배송 방법, 그룹화, 필수, 잘못된 입력, 배송 방법을 선택하세요.

사용 지침

이렇게 쓰세요

  • 네이티브 요소는 HTML required를 우선 씁니다.
  • 라디오 묶음은 radiogroup에 붙입니다.
  • 별표 등 시각적 표시와 그 의미 안내를 함께 제공합니다.
  • 검사 실패 시 aria-invalid와 오류 메시지를 함께 설정합니다.

이렇게 쓰지 마세요

  • 속성만 붙이고 검사·오류 안내를 생략하지 않습니다.
  • 개별 radio, 버튼, 링크에 쓰지 않습니다.
  • 화면에는 필수 표시가 없는데 속성만 쓰거나, 그 반대로 두지 않습니다.

사용할 수 있는 역할

textboxsearchboxcomboboxcheckboxswitchradiogrouplistboxspinbuttontreegridcelltreegrid
aria-invalidaria-errormessagearia-describedbyaria-readonly

이 속성을 쓰는 패턴

폼 오류 검증라디오 그룹

참고 자료