정의 및 사용 방법

role 속성의 search 값은 웹 접근성 측면에서 해당 HTML 요소에 '검색 기능 구현을 위한 검색 영역'이라는 의미(semantic meaning)의 랜드마크 역할(role)을 부여합니다.

'검색 기능 구현을 위한 검색 영역'이란 문서 또는 애플리케이션에서 검색이나 필터링 작업을 수행하는 것과 관련된 폼(Form)이나 기타 콘텐츠를 포함하는 부분입니다.

다음과 같은 검색이나 필터링 작업을 수행하는 부분에 사용될 수 있습니다.

  • 웹사이트나 애플리케이션 전체를 대상으로 검색을 수행하는 부분
  • 현재 웹페이지에 나타난 검색 결과 내에서 원하는 항목을 걸러내는 필터링 부분
  • 특정 사이트를 넘어 인터넷 전체를 아우르는 웹 검색을 제공하는 부분

기본 예제

다음은 웹사이트를 대상으로 검색을 수행하는 부분에 role="search"를 지정한 예제입니다. 이렇게 하면 일반적인 콘텐츠나 다른 폼(Form)과 구별되어 쉽게 찾을 수 있는 Search Landmark(검색 랜드마크) 역할(role)이 부여됩니다.

HTML 
<form action="/search" role="search">
    <label for="user-search">사이트 내 검색</label>
    <input
        type="search"
        id="user-search"
        name="query">
    <button type="submit">검색</button>
</form>

Search Landmark(검색 랜드마크)

스크린 리더 및 기타 보조 기술을 사용하는 사용자에게는 웹 접근성 측면에서 웹 페이지의 콘텐츠 구조를 쉽게 탐색할 수 있는 것이 무엇보다 중요합니다.

웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소들을 "랜드마크(landmark)" 요소라고 하며, role 속성의 값으로도 랜드마크 역할(role)을 부여할 수 있습니다. 예를 들어, 글로벌 헤더, 메인, 글로벌 푸터 등은 웹 페이지 내 콘텐츠를 구성하는 다양한 콘텐츠들 중에서도 웹 접근성 측면에서 사용자가 빠르게 탐색할 수 있어야 하는 랜드마크 요소들입니다.

role 속성의 search 값을 가지는 요소는 검색 기능 구현을 위한 검색 영역을 나타내는 랜드마크 요소로서의 역할(role)이라는 의미(semantic meaning)가 부여됩니다. 이를 Search Landmark(검색 랜드마크)라고 합니다. 스크린 리더 및 기타 보조 기술을 사용하는 사용자는 Search Landmark(검색 랜드마크)를 빠르게 탐색할 수 있습니다.

기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.

role 속성의 search 값으로 부여할 수 있는 Search Landmark(검색 랜드마크) 역할(role)을 이미 가지고 있는 요소도 있습니다.

<search> 태그는 고유한 역할의 의미(semantic meaning)로 search 역할(role)을 가집니다. 즉, role 속성을 별도로 지정하지 않아도 암시적인(implicit) 역할(role)은 search입니다.

<search> 태그는 이미 Search Landmark(검색 랜드마크) 역할(role)을 하기 때문에 이 요소에 role 속성의 search 값으로 역할을 부여할 필요는 없으며, 스크린 리더 등과 같은 웹 접근성 도구뿐만 아니라 관련 기술에서의 처리, 코드를 직접 다루는 개발자 및 코드의 가독성 측면에서도 올바른 의미론적 HTML 요소인 <search> 태그를 사용하는 것이 좋습니다.

HTML 
<search>
    <form action="/search">
        <label for="user-search">사이트 내 검색</label>
        <input
            type="search"
            id="user-search"
            name="query">
        <button type="submit">검색</button>
    </form>
</search>

고려할 점

문서 내에 Search Landmark(검색 랜드마크)가 여러 개 포함된 경우, 동일한 검색 기능이 반복되는 것이 아니라면 각 랜드마크에 고유한 레이블을 지정하세요. 이 레이블을 통해서 스크린 리더 및 기타 보조 기술을 사용하는 사용자는 각 랜드마크의 용도를 빠르게 이해할 수 있습니다.

콘텐츠 내에 적절한 레이블이 있다면 aria-labelledby를 사용하고, 그렇지 않다면 aria-label을 사용합니다.

참고하세요!
role="search"가 지정된 랜드마크의 레이블에는 "검색"과 같이 해당 랜드마크의 역할을 나타내는 단어를 포함하지 않는 것이 좋습니다. 스크린 리더 등과 같은 보조 기술은 랜드마크의 레이블과 역할을 함께 전달할 수 있으므로, 레이블에 역할 이름을 포함하면 동일한 의미가 중복되어 전달될 수 있습니다.
예를 들어, role="search"가 지정된 랜드마크의 레이블을 "사이트 전체 검색"으로 지정하면 사용자에게 "사이트 전체 검색 검색"과 같이 의미가 중복되어 전달될 수 있으므로, "사이트 전체"와 같이 해당 검색 영역을 구분할 수 있는 레이블을 지정하는 것이 좋습니다.

HTML 
<form role="search" aria-labelledby="search-heading">
    <fieldset>
        <legend id="search-heading">상품 필터</legend>
        <!-- search content area -->
    </fieldset>
</form>

...

<form role="search" aria-label="사이트 전체">
    <!-- search content area -->
</form>

활용 예제

role="search"의 다양한 사용 예제 중 일부를 살펴보겠습니다.

웹사이트 전체를 대상으로 하는 검색을 수행하는 부분

다음 예제에서는 웹 페이지의 헤더에 웹사이트 전체를 대상으로 하는 검색 부분에 role="search"를 사용했습니다.

HTML 
<header>
    <h1>우리 사이트</h1>
    <form method="get" action="/search" role="search">
        <label for="user-search">사이트 내 검색</label>
        <input
            type="search"
            id="user-search"
            name="query">
        <button type="submit">검색</button>
    </form>
</header>

현재 웹페이지에 나타난 검색 결과 내에서 필터링하는 부분

다음 예제에서는 현재 웹페이지에 나타난 검색 결과 내에서 필터링하는 부분에 role="search"를 사용했습니다.

HTML 
<main>
    <h2>상품 목록</h2>
    <div role="search">
        <label>
    		검색어 입력 및 필터링
    		<input type="search" id="query">
	    </label>
        <label>
		    <input type="checkbox" id="exact-only">
		    정확히 일치하는 결과만
	    </label>
        <section>
            <h3>검색 결과:</h3>
            <ul>
                <li><a href="">필터링된 상품 1</a></li>
                <li><a href="">필터링된 상품 2</a></li>
                <li><a href="">필터링된 상품 3</a></li>
                ...
            </ul>
        </section>
    </div>
</main>

한 페이지에서 두 가지 검색 부분에 사용

다음 예제에서 해당 페이지는 두 가지 검색 기능을 제공합니다.

첫 번째 기능은 웹 페이지의 헤더에 위치하며 웹사이트 전체 콘텐츠를 검색하는 역할을 합니다. 두 번째 기능은 페이지의 주요 콘텐츠 영역에 포함되어 있는데, 이는 현재 페이지의 콘텐츠를 검색하고 필터링하는 역할을 하기 때문입니다.

HTML 
<body>
	<header>
		...
	    <form method="get" action="/search" role="search" aria-label="사이트 전체">
			<label>
				사이트 내 검색
				<input type="search">
			</label>
			<button type="submit">검색</button>
		</form>
	</header>
	<main>
		<h1>상품 목록</h1>

		<div role="search" aria-labelledby="heading">
			<h2 id="heading">검색 결과 필터링</h2>
			...
		</div>

		<article>
			<!-- 검색 결과 콘텐츠 -->
		</article>
	</main>
</body>

명세서

role 속성의 search 값에 대한 명세서 사양
명세서 사양
role="search" Accessible Rich Internet Applications (WAI-ARIA)
#search

참고문헌

같이 보기