HTML の新要素 <search>（仮称）の提案

WAI-ARIA では HTML フォーム（form ロール）の中でもいわゆるサイト内検索など検索用のフォームに search ロールが定義されています。

よく見られる、検索キーワードの入力欄と送信ボタン（虫眼鏡アイコン）が横並びになっているコンポーネントのマークアップ例はこんな感じです。

<form action="/search" role="search" aria-label="サイト内検索"><!-- ← `role=search` を付ける -->
  <p>
    <input type="search" name="q" required="" title="キーワード" />
    <button><img src="/assets/magnifying-glass.svg" alt="検索" /></button>
  </p>
</form>

search ロールの定義では以下のようにランドマークとして扱われることが推奨されています。

WAI-ARIA では下表の8つが Landmark Roles として定義されており、 search 以外は対応する HTML 要素が存在します。

• ランドマークロールと HTML 要素の結びつけは例外があるケースもあります。正確な定義は W3C が公開している「ARIA in HTML」の HTML で ARIA 属性を使用するための文書適合性要件の表を参照ください。

このため、唯一対応する HTML 要素のない search ロールのために、 <search> 要素（※要素名は仮称）を作ろうという提案がなされました。

要素名に "search" を採用すると、 <input type=search> と紛らわしい懸念があります。

そのため "searcharea" や "searchgroup" などが候補として挙げられ、投票アンケートが Domenic Denicola 氏の個人アカウントで行わました。

結果は "search" が圧倒的優勢で、今のところその命名に対する大きな反論もなさそうです。ただしこのアンケートはあくまで世論調査であり、結果がそのまま採用に結びつくわけではありません。

いくつかの意見が挙がっています。

<div role=search> のエイリアス

Issue が立った大元の意見です。 <search><form action="...">...</form></search> ないし <form action="..."><search>...</search></form> のように使います。

HTMLFormElement を継承（再利用）

マークアップエンジニア視点では <form> を置き換える形になります。すなわち現行の <form action="..." role="search"> は <search action="..."> になります。

<form search> のように属性にする

現状の role=search と比べて大きな違いはないものの、 HTML 仕様に取り込むことで将来的な機能拡張の余地があるとのことです。おそらく属性値を search=something のように String 型にすることで、より細かい区分ができるようにする可能性を指しているのだと思います。

• 上記はかなり要約しており、実際はもっとミクロな議論も行われています。例えば <p> 要素を自動で閉じるか（<p><search>...</search></p> を許容するか）、action 属性値に空の値を許可するかなど。

今のところ、大元の意見である「<div role=search> のエイリアス」がもっとも受け入れられている感じを受けます。

とはいえ解決しなければならない問題も存在し（既存ブラウザのバグを含む）、また <form> とのネストについてどちらを、あるいはいずれも許可するかなど不確定な部分も多く[1]、今後の進展に目が離せません。

2023年3月24日追記予想どおり、「<div role=search> のエイリアス」で確定しました。

ランドマークロールの中で banner, contentinfo, main ロールは配置数に制限があり（document または application の中に一つのみ）、また region ロールはラベルが必要とされています。これは HTML では hidden 属性のない <main> を複数配置できないとか、 <section> には見出しが必要といった話になります。

一方で role=search はそのような制約はなく、例えば以下のように <form role=search> を複数持ち、かつそれらにラベルや見出しが含まれないマークアップでも問題はありません。

<main>
  <h1>Search forms</h1>

  <form role="search"></form>
  <form role="search"></form>
</main>

<search> 要素については、前述の3パターンの提案のうち「<div role=search> のエイリアス」におけるプルリクコメントで複数配置について質問があり、Scott O'Hara 氏による回答がなされています。

• 複数配置は可能だが、他のランドマークと同様に目的を持って使う必要がある（乱用は良くないというニュアンスか?）
• 複数配置のためのガイダンスを作成する

可能性として、<nav> のように複数使用時は一意なラベルが必要になる[2]といったことになるかもしれませんね。