Webアクセシビリティ達成基準「2.4.3 フォーカス順序の達成基準」の話

前回はWebアクセシビリティ達成基準「2.4.2 ページタイトルの達成基準」について解説しました。続けて今回は「2.4.3 フォーカス順序の達成基準」への対応について解説します。

Webサイトを利用するとき、マウスやタッチ操作だけでなく、キーボードのTabキーなどを使ってページ内を移動する方もいます。その際、フォーカスが移動する順番が不自然だと、情報を理解しにくくなったり、フォームなどの操作に迷ったりすることがあります。

本記事では、Webアクセシビリティにおける「2.4.3 フォーカス順序」の意味や、実際のWeb制作で注意したいポイントについて紹介します。

「2.4.3 フォーカス順序」とは？

「2.4.3 フォーカス順序」は、WCAG（Web Content Accessibility Guidelines）に定められている達成基準の一つです。レベルAに分類されています。

達成基準では、ページを順番に操作するとき、その順序がコンテンツの意味や操作性を損なわないようにすることが求められています。

少し分かりにくい表現ですが、簡単に言えば、

「キーボードなどでWebページを順番に操作したとき、自然な順序でフォーカスが移動するようにしましょう」

という考え方です。

そもそも「フォーカス」とは？

ここでいう「フォーカス」とは、現在キーボード操作の対象になっている要素のことです。

例えば、Webページに以下のような要素があるとします。

• グローバルナビゲーション
• 検索ボックス
• メインコンテンツ
• 「詳しく見る」ボタン
• お問い合わせフォーム

キーボードの「Tab」キーを押すと、リンクやフォームなどの操作可能な要素へフォーカスが順番に移動します。

マウスを使わずにWebサイトを操作する場合、この「フォーカスがどの順番で移動するか」が非常に重要になります。

フォーカス順序が不自然だと何が起こる？

例えば、お問い合わせフォームに次のような入力項目があるとします。

1. お名前
2. メールアドレス
3. 電話番号
4. お問い合わせ内容
5. 送信ボタン

通常であれば、Tabキーを押すたびに「お名前」→「メールアドレス」→「電話番号」→「お問い合わせ内容」→「送信ボタン」という順番で移動すると自然です。

ところが、実際のHTMLの構造や実装方法に問題があると、

「お名前」→「電話番号」→「送信ボタン」→「メールアドレス」→「お問い合わせ内容」

のように、見た目とは違う順番でフォーカスが移動してしまうことがあります。

このような状態では、キーボードだけでフォームを入力する利用者にとって、非常に使いづらいフォームになってしまいます。

特に入力項目が多いフォームでは、「次にどこへ移動するのか」が分からなくなり、操作ミスにつながる可能性もあります。

「見た目の順番」と「HTMLの順番」が重要

フォーカス順序を考えるうえで、Web制作者が特に注意したいのがHTML（DOM）の順序です。

基本はHTMLの記述順にフォーカスが移動する

HTMLでは、インタラクティブな要素が記述されている順序が、基本的なフォーカス順序に影響します。

例えば、

<a href="#">会社概要</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>

という順番で記述されていれば、基本的には「会社概要」→「サービス」→「お問い合わせ」という順番でフォーカスが移動します。

そのため、Webページを制作するときには、見た目だけではなく、HTMLの構造も論理的な順番になっているかを確認することが重要です。

W3Cでも、インタラクティブな要素をコンテンツ内の意味や関係性に沿った順序で配置することが、フォーカス順序への対応方法の一つとして示されています。

CSSで見た目だけ順番を変える場合は注意

近年のWebサイトでは、CSSのFlexboxやGridなどを使って、HTML上の順番とは異なるレイアウトを作ることがあります。

例えば、HTMLでは「A→B→C」の順番になっているのに、CSSによって画面上では「A→C→B」のように表示するケースです。

見た目だけを確認すると問題がないように見えても、キーボードで操作すると「A→B→C」の順番でフォーカスが移動することがあります。

その結果、

画面では右側にある項目へ移動したと思ったら、フォーカスが別の場所へ移動してしまった

ということが起こります。

もちろん、必ずしも「画面上の左から右」という順番にしなければならないわけではありません。

重要なのは、コンテンツの意味や操作の流れに沿った順序になっているかという点です。

tabindexの使い方にも注意

フォーカス順序を調整するために、HTMLの「tabindex」属性を利用する方法があります。

例えば、

<input type="text" tabindex="1">
<input type="text" tabindex="2">

のように指定することで、Tabキーによる移動順を変更できます。

ただし、むやみにtabindexを指定することはおすすめできません。

ページの要素が増えたり、構成を変更したりすると、指定した番号同士の関係が複雑になり、かえってフォーカス順序を管理しにくくなるためです。

そのため、基本的にはHTMLの構造そのものを自然な順番にすることを優先するのがよいでしょう。

特に「tabindex=”1″」「tabindex=”2″」といった正の値を大量に設定する方法は、後からの保守性も考慮して慎重に扱う必要があります。

実際のWeb制作では「Tabキー」で確認する

フォーカス順序への対応は、ソースコードを確認するだけでは十分ではありません。

実際にブラウザでページを開き、マウスを使わずにTabキーを押して確認することが大切です。

チェックしたいポイント

実際にキーボード操作を行う際には、次のような点を確認します。

• Tabキーでフォーカスが適切な順番で移動するか
• 画面上の位置とフォーカス位置が大きく食い違っていないか
• フォームの入力順序が自然になっているか
• メニューやボタンを適切な順番で操作できるか
• フォーカスが突然別の場所へ移動しないか
• キーボードだけで操作を完了できるか

また、フォーカスがどこにあるのか分かるように、フォーカスインジケーターが視認できることも重要です。

これは「2.4.3 フォーカス順序」とは別の達成基準ですが、キーボード操作の確認では「2.4.7 フォーカスの可視化」など、関連する達成基準もあわせて確認するとよいでしょう。

フォーカス順序は「操作する人」を想像することが大切

フォーカス順序への対応というと、HTMLやCSSの技術的な話に見えるかもしれません。

しかし、実際に重要なのは「そのページをキーボードで操作する人が、迷わず使えるか」という視点です。

例えば、申し込みフォームであれば、利用者が入力したい順番にフォーカスが移動するか。

商品ページであれば、商品の情報を確認したあとに、購入や問い合わせなどの操作へ自然につながるか。

このように、利用者がどのような流れでページを操作するのかを考えながらHTML構造やUIを設計することが、Webアクセシビリティ対応では重要になります。

まとめ

今回は、Webアクセシビリティの達成基準「2.4.3 フォーカス順序」について紹介しました。

ポイントをまとめると、以下のとおりです。

• フォーカス順序とは、キーボードなどで操作したときの移動順序のこと
• コンテンツの意味や操作性を損なわない順番にすることが重要
• HTML（DOM）の順序はフォーカス順序に大きく影響する
• CSSで見た目の順番だけを変更する場合は注意が必要
• tabindexは必要以上に使わず、まずHTML構造を見直す
• 実際にTabキーを使って操作性を確認することが大切

Webアクセシビリティは、単にチェック項目をクリアするだけではなく、実際にWebサイトを利用する人が迷わず操作できるかという視点が重要です。

特にフォームやナビゲーションなど、ユーザーが操作する部分については、デザインだけでなくHTMLの構造やキーボード操作まで含めて確認する必要があります。

私たちWeb制作会社も、見た目のデザインだけではなく、HTML・CSS・JavaScriptなどの実装面まで含めて、使いやすくアクセシブルなWebサイトを制作することが大切だと考えています。