2023 年 3 月 24 日にHTML Standard に<search> 要素が追加されました。

背景

<search> 要素はARIA ランドマークロール のsearch ロール に対応する要素です。つまり、<search> は<div role="search"> を代替する要素となります。

ARIA は 8 つのランドマークロールを定義していますが、唯一search ロールのみ対応する HTML 要素が存在しないという状況でした。<search> 要素の追加により、この状況が改善されます。

使い方

<search> 要素は暗黙のロールとしてsearch ロールを持ちます。ブラウザのアクセシビリティ API により search ランドマークが公開され、スクリーンリーダーなどの支援技術を使用するユーザーが素早く検索フォームに移動できるようになります。

<header> 要素や<footer> 要素と同じく、なにか特別な機能を持ってはいません。単にランドマークとしての役割を果たすだけの要素です。

以下はsearch ロールを使用した例です。VoiceOver ローターを起動してランドマークを選択するとバナー、検索、本文、フッターが表示されています。ここで検索を選択すると検索フォームに移動できます。

通常、<search> 要素は少なくとも 1 つの入力要素を含んでいるはずです。また必須ではないものの、検索を開始するためのボタンも存在することが期待されています。

<search> 要素を使用した例として、以下のような検索フォームを作成できます。

<search>  <form>    <label for="search">サイト内検索</label>    <input type="search" id="search" name="search" />    <button type="submit">検索</button>  </form></search>

<form role="search"> のようにrole="search" を使用しても同じ結果が得られます。ですが、「必要なセマンティクスと動作がすでに組み込まれたネイティブの HTML 要素や属性を使用できる場合は、ネイティブのものを使用する」という WAI-ARIA のルールに従って<search> 要素を使用することを推奨しています。

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Using ARIA

This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

www.w3.org

仕様

参考

• HTML Standard
• ARIA in HTML
• Consider creating an HTML search element · Issue #5811 · whatwg/html
• The search element | scottohara.me
• ゆうてん🖖 on Twitter: "<search>要素、来ましたね。後で詳細調べよう。" / Twitter

Contributors