ARIA 접근성 가이드

역할 · 랜드마크

role="search"

사이트나 문서를 검색하는 기능을 담은 영역을 나타내는 랜드마크입니다. HTML <search> 요소가 대응합니다.

기초HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<search> (HTML 표준에 2023년 추가)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

search는 검색 기능을 이루는 요소 묶음(검색어 입력란, 검색 버튼, 필터 등)을 표시하는 랜드마크입니다. 사용자는 랜드마크 목록에서 “검색”을 골라 곧바로 검색창으로 갈 수 있습니다.

HTML과의 관계: <search> 요소

HTML Living Standard에 2023년 추가된 <search> 요소는 암묵적으로 search 역할을 가집니다. 이 요소가 생기기 전에는 <form role="search">가 표준 방법이었습니다. <search>는 그 자체로 양식이 아니므로 서버에 제출하는 검색이라면 안에 <form>을 넣습니다.

HTML
<!-- 새 방식 -->
<search>
  <form action="/search">…</form>
</search>

<!-- 이전부터 쓰던 방식 (지금도 유효) -->
<form role="search" action="/search">…</form>

현재 주요 브라우저(Chrome·Edge 118+, Firefox 118+, Safari 17+)가 <search>를 search 랜드마크로 노출합니다. 오래된 환경까지 고려해야 한다면 <search role="search">처럼 중복 지정하거나 <form role="search">를 계속 써도 됩니다.

search 역할과 searchbox 역할

search는 영역(랜드마크)이고, 그 안의 검색어 입력란은 <input type="search">(암묵적 역할 searchbox)입니다. 입력란 자체에 role="search"를 주면 입력란의 의미가 사라지므로 안 됩니다.

이름 붙이기

검색 영역이 하나면 이름이 없어도 됩니다. 사이트 검색과 페이지 내 필터 검색처럼 둘 이상이면 aria-label로 구분합니다(예: “사이트 검색”, “도서 목록 내 검색”). 입력란에는 여전히 별도의 레이블이 필요합니다.

테스터 관점

랜드마크 목록에 “검색”이 나오는지, 입력란에 레이블이 있는지, role="search"가 입력란에 잘못 붙지 않았는지 확인합니다.

함께 쓰는 속성

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

사용 예

search 요소 (권장)

권장HTML
<search>
  <form action="/search">
    <label for="q">도서 검색</label>
    <input id="q" type="search" name="q">
    <button>검색</button>
  </form>
</search>

form에 role="search"

권장HTML
<form role="search" aria-label="사이트" action="/search">
  <label for="q2" class="sr-only">검색어</label>
  <input id="q2" type="search" name="q">
  <button>검색</button>
</form>

입력란에 role="search" (비권장)

비권장HTML
<input type="text" role="search" placeholder="검색">

입력란이 텍스트 상자가 아닌 “검색 영역”으로 노출되고, 레이블도 없습니다.

직접 해 보기

검색 영역을 만드는 방법에 따라 랜드마크 목록이 어떻게 되는지 비교해 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동검색 랜드마크, 도서 검색, 검색 편집창

    사용 지침

    이렇게 쓰세요

    • 검색 영역은 <search>로 감싸거나 <form role="search">를 씁니다.
    • 검색 영역이 여러 개면 aria-label로 구분합니다.
    • 검색어 입력란에는 레이블을 붙입니다.

    이렇게 쓰지 마세요

    • <input>에 role="search"를 붙이지 않습니다.
    • 검색이 아닌 일반 양식에 search 역할을 쓰지 않습니다.
    searchboxformcomboboxbannernavigation

    이 역할을 쓰는 패턴

    페이지 레이아웃(랜드마크)콤보박스(자동완성)

    참고 자료