ウェブ・アクセシビリティ・クックブック

第6章 フォーカスを管理する

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

Webページは、デフォルトでキーボードでアクセスすることができる。なぜなら、ネイティブのインタラクティブ要素には、それらを使用するために必要なスタイリングと機能が最初から備わっているからだ。それらはフォーカス可能であり、フォーカスの状態を視覚的に示す。CSSや特にJavaScriptを追加するときは、その基本的なアクセシビリティを維持、あるいは向上させ、カスタムソリューションもアクセシブルであることを保証しなければならない。

6.1 フォーカス・スタイルを提供する

問題

、キーボード、スイッチ・デバイス、スクリーン・リーダー、または同様の支援技術を使用してWebサイトにアクセスする場合、Tab キー（またはキーにマッピングされた別の物理的デバイスのコントロール）を使用して、あるインタラクティブ要素から別の要素にジャンプすることができる。

開発者として、CSSを使用して現在アクティブなアイテムを視覚的に強調しなければ、ユーザはオリエンテーションやナビゲーションを行うことができない。

解決策

例6-1、6-2、6-3、6-4で示されるように、フォーカスまたはフォーカス可視状態のインタラクティブ要素をスタイルするには、擬似クラスを使用する。

例 6-1. フォーカス可視状態のすべての要素をスタイリングする

:focus-visible {
  outline: 0.25em solid;
  outline-offset: 0.25em;
}

例6-2. フォーカス状態のすべての要素をスタイリングする

:focus {
  outline: 0.25em solid;
  outline-offset: 0.25em;
}

例6-3. コンテナにフォーカスが当たっている場合、ビデオやオーディオ要素に影を表示する

:is(video, audio):focus-within {
  box-shadow: 0 0 10px 3px rgb(0 0 0 / 0.2);
}

例6-4. キーボード以外のユーザにカスタム・フォーカス・スタイルを提供する

button:focus-visible { 
  outline: 0.25em dashed black;
}

button:focus:not(:focus-visible) { 
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

キーボードユーザのためのスタイル

ポインティングデバイスのユーザ向けの点

ディスカッション

現在フォーカスされている要素をスタイリングすることは、キーボード・アクセシビリティのためにできる最も重要なことの1つである。すべてのブラウザにデフォルトで備わっているフォーカス・スタイルを削除すると、多くの人の生活を困難にすることになる。キーボード・ユーザのためにフォーカス・インジケータを削除することは、マウス・ユーザのためにカーソルを隠すようなものだ。残念ながら、 ...