HTMLにsearch要素が追加されたぞ！
Post on:2023年3月29日
sponsors
先週、HTML Living Standardの仕様にsearch要素が追加されました。
ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。
2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。
Add the <search> elementhttps://t.co/AlmyHd0qxI
— HTML Standard (@htmlstandard) March 24, 2023
追加されたsearch要素は、下記で確認できます。
カテゴリは、フローコンテンツです。
4.4.15 The search element -HTML Standard
search要素は、検索またはフィルタリング操作の実行に関連する一連のフォームコントロールまたはその他のコンテンツを含むドキュメントまたはアプリケーションの一部を表します。
たとえば、Webページのヘッダ内に検索フォームを実装する際は下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<header> <h1><a href="/">ページの見出し</a></h1> ... <search> <form action="search.php"> <label for="query">記事内を検索</label> <input id="query" name="q" type="search"> <button type="submit">検索</button> </form> </search> </header> |
search要素が追加されたことで、ARIAが定義するすべてのランドマーク ロールと同等のネイティブなHTML要素が揃います。
- banner:
header - complementary:
aside - contentinfo:
footer - form:
form - main:
main - navigation:
nav - region:
section - search:
search
5.3.4 Landmark Roles- WAI-ARIA 1.2
sponsors
