HTML の仕様に search 要素が追加された

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

この記事が公開された時点（2023 年 3 月 26 日）で、ブラウザの実装はまだ完了していません。現在の実装状況は Can I use... Support tables for HTML5, CSS3, etc を参照してください。

背景

<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