HTML の新要素 <search> (仮称)の提案

HTML Standard で新要素 <search> の議論がここ数か月活発に行われています。

この新要素は WAI-ARIA における role=search に相当するものに過ぎず、今までできなかった新しい機能を提供するような性質ではないため、どちらかというと地味な存在でしょう。一方でランドマークが関わってくるためアクセシビリティ的には重要な要素であり、また昨今では検索フォームを持つサイトも多いため、 Web サイト制作においては近い将来には地味だが無視はできない立ち位置になると思います。

2021年12月現在は絶賛議論途上のものであり、最終的にどのような形になるかは分からない状況ではありますが、現時点での議論内容を抜粋のうえまとめてみます。

  1. 背景
  2. 要素名
  3. 要素(属性)定義
  4. ページ内での複数配置

背景

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

For search facilities, authors SHOULD use the search role and not the generic form role.

form (role) - Accessible Rich Internet Applications (WAI-ARIA) 1.1(www.w3.org)

検索機能のために、著者は、汎用なformロールでなく、searchロールを使用すべきである。

form (ロール) - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳(momdo.github.io)

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

<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 ロールの定義では以下のようにランドマーク(www.w3.org)として扱われることが推奨されています。

User agents SHOULD treat elements with the role of search as navigational landmarks.

search (role) - Accessible Rich Internet Applications (WAI-ARIA) 1.1(www.w3.org)

ユーザーエージェントは、ナビゲーションランドマークとしてsearchのロールをもつ要素を扱うべきである。

search (ロール) - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳(momdo.github.io)

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

ランドマークロール HTML 要素
banner header
complementary aside
contentinfo footer
form form
main main
navigation nav
region section
search なし

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

要素名

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

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

Domenic Denicola (@domenic) 2021年9月15日 06:31(Twitter)

結果は "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]、今後の進展に目が離せません。

ページ内での複数配置

ランドマークロールの中で 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 氏による回答(github.com)がなされています。

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

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

  • [1]ちなみにネストのアクセシビリティ面については、Scott O'Hara 氏のコメント(github.com)によるとどちらも支援技術(AT)には同じように公開されるとのことです。
  • [2]HTML 的には問題ないとしても、アクセシビリティチェックツールで警告が出るとか。