ARIA 접근성 가이드

역할 · 랜드마크

role="form"

여러 입력 요소를 묶어 제출하는 양식 영역을 나타내는 랜드마크입니다. 이름이 있어야 랜드마크로 노출됩니다.

중급HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<form> (접근 가능한 이름이 있을 때 form 랜드마크로 노출)
이름 정하는 방법
작성자 (author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

form은 입력 요소, 버튼 등이 모여 하나의 양식을 이루는 영역입니다. 회원가입, 문의하기, 예약 신청처럼 페이지에서 중요한 양식을 랜드마크로 만들어 바로 이동할 수 있게 합니다.

HTML과의 관계

<form> 요소가 대응합니다. 다만 WAI-ARIA 1.2에서 form 역할은 이름이 필수이고, HTML-AAM도 이름이 없는 <form>은 랜드마크로 노출하지 않도록 정하고 있습니다. 따라서 랜드마크로 만들고 싶은 양식에는 aria-labelledby(양식 제목 참조)나 aria-label로 이름을 붙입니다. 모든 <form>을 랜드마크로 만들 필요는 없습니다.

search와 구분

검색 양식이라면 form 대신 search 역할(또는 HTML <search> 요소)을 씁니다. 검색 영역은 별도의 “검색” 랜드마크로 안내됩니다.

주의할 점

  • <div role="form">은 실제 제출 기능을 주지 않습니다. 제출·검증이 필요하면 <form>을 씁니다.
  • 양식 안의 컨트롤 묶음(라디오 그룹 등)은 form이 아니라 <fieldset>/group으로 묶습니다.

테스터 관점

주요 양식이 랜드마크 목록에 이름과 함께 나오는지, 이름 없는 role="form"이 남아 있지 않은지 확인합니다.

함께 쓰는 속성

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

사용 예

이름이 있는 양식 (권장)

권장HTML
<form aria-labelledby="join-h" action="/join" method="post">
  <h2 id="join-h">회원 가입</h2>
  <label for="id">아이디</label>
  <input id="id" name="id" autocomplete="username">
  <button>가입하기</button>
</form>

이름 없는 role="form" (비권장)

비권장HTML
<div role="form">
  <input placeholder="아이디">
  <div onclick="send()">가입</div>
</div>

이름이 없어 랜드마크로 노출되지 않을 수 있고, 제출·레이블도 없습니다.

직접 해 보기

양식에 이름이 있을 때와 없을 때를 비교해 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동회원 가입, 폼 랜드마크, 회원 가입, 제목 수준 2

    사용 지침

    이렇게 쓰세요

    • 랜드마크로 만들 양식에는 보이는 제목을 aria-labelledby로 연결해 이름을 붙입니다.
    • 실제 양식은 <form> 요소로 만듭니다.

    이렇게 쓰지 마세요

    • 검색 양식에 form을 쓰지 않습니다. search를 씁니다.
    • 이름 없는 role="form"을 만들지 않습니다.
    searchregiongroupmain

    이 역할을 쓰는 패턴

    페이지 레이아웃(랜드마크)폼 오류 검증

    참고 자료