サイト内検索フォームでアクセシビリティを意識する

サイト内検索でよくあるデザインのマークアップについて、アクセシビリティを意識したコードを考えてみます。

対応前

まずは特に意識しないでマークアップしてみます。
キーワード入力エリアと虫眼鏡アイコンの検索ボタンのみのような、よくあるデザインを例にしてみます。

<form action="./" method="get" class="search">
  <input type="search" name="keyword" class="search_keyword">
  <button type="submit" class="search_btn">
    <svg viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
  </button>
</form>

対応前のデモページ

キーワード入力と検索ボタンにラベルを設定する

まずは input type=”search” にラベルをつけるのですが、今回の例だとデザイン上(コード上)にラベルがありません。
そのため、title属性を使ってラベルを設定します。

<form action="./" method="get" class="search">
  <input title="サイト内検索" type="search" name="keyword" class="search_keyword">
  <button type="submit" class="search_btn">
    <svg viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
  </button>
</form>

「サイト内検索」というラベルを設定しました。
キーワード入力にラベルを設定するデモページ

キーワード入力部分をスクリーンリーダーで確認してみます。
PC-Talkerで確認した場合、対応前は「文字入力」でしたが、対応後は「サイト内検索の 文字入力」になりました。

VoiceOverの場合、対応前は「検索テキスト欄」で、対応後は「サイト内検索、検索テキスト欄」になりました。

検索ボタンの場合もラベルになるテキストはありませんが、虫眼鏡アイコンのSVG要素がボタン内に含まれているので、こちらに対してラベルを設定します。
role属性の値にimgを設定した上で、aria-label属性を追加します。

<form action="./" method="get" class="search">
  <input title="サイト内検索" type="search" name="keyword" class="search_keyword">
  <button type="submit" class="search_btn">
    <svg role="img" aria-label="検索" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
  </button>
</form>

検索ボタンにラベルを設定するデモページ

検索ボタン部分をPC-Talkerで確認すると、対応前は「確認」で、対応後は「検索の 確認」になりました。

VoiceOverの場合、対応前は「ボタン,グループ」で、対応後は「検索、ボタン,グループ」になりました。

searchランドマークロールを設定する

次にsearchロールを設定します。
form要素に対してrole属性でsearchを設定します。

<form role="search" action="./" method="get" class="search">
  <input title="サイト内検索" type="search" name="keyword" class="search_keyword">
  <button type="submit" class="search_btn">
    <svg role="img" aria-label="検索" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
  </button>
</form>

これでランドマークに設定できました。
role=”search”を設定するデモページ

PC-Talkerでdキーでランドマーク間の移動を試してみると、対応後は「検索ランドマーク」への移動ができました。

VoiceOverの場合、対応後はランドマークの一覧に「検索」と表示されるようになりました。

role属性でsearchを設定する際の補足として、特に同一ページ内に複数のsearchランドマークロールがある場合、合わせてaria-labelを設定しておくといいようです。

<form role="search" aria-label="サイト全体" action="./" method="get" class="search">
  <input title="サイト内検索" type="search" name="keyword" class="search_keyword">
  <button type="submit" class="search_btn">
    <svg role="img" aria-label="検索" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
  </button>
</form>

ラベルづけの目的としてはユニークにするためではなく、ランドマークの内容を理解しやすくすることになります。
そのため、例えばサイト内検索がヘッダーとフッターの2箇所にあるような場合、aria-labelに設定する内容は両方とも「サイト全体」のような値で問題ありません。
searchランドマークロールにラベルをつけるデモページ

PC-Talkerで確認したところ、テキストは「検索ランドマーク」のまま特に変更されていなさそうでした。

VoiceOverの場合、対応後はランドマークの一覧に「サイト全体 検索」と表示されるようになりました。

ここまではrole属性でsearchを設定する方法を試しましたが、代わりにsearch要素を使用する方法でもsearchランドマークロールが設定されます。
ただし対応ブラウザを確認すると、chromeとedgeはバージョン118(2023年10月〜)、Safariはバージョン17.0(2023年9月〜)、Firefoxはバージョン118(2023年9月〜)からと比較的最近の対応になっているので、案件の対応範囲によってはrole属性を使った対応としておいた方がよいかもしれません。

<search>
  <form action="./" method="get" class="search">
    <input title="サイト内検索" type="search" name="keyword" class="search_keyword">
    <button type="submit" class="search_btn">
      <svg role="img" aria-label="検索" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" color="#000000"><defs><style>.cls-6374f8d9b67f094e4896c660-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><circle class="cls-6374f8d9b67f094e4896c660-1" cx="9.14" cy="9.14" r="7.64"></circle><line class="cls-6374f8d9b67f094e4896c660-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"></line></svg>
    </button>
  </form>
</search>

search要素を使用するデモページ

スクリーンリーダーでの読み上げは、role属性でsearchを設定した時と同じになります。