開発・オーサリングに関するFAQ

Q.

キーボード操作への対応時に気をつけることについて教えてください。

A.

キーボードで操作が行えることは、さまざまな状況にあるユーザーにとって非常に重要です。例えばマウスを緻密に操作できない、マウスポインタを視認できないユーザーや、マウスを使えない状況にある場合にはキーボードが主な操作ツールとして活用されます。

キーボードでの操作を設定する上でのポイント

操作箇所がキーボードフォーカスを受け取るようにする

すべてのインタラクティブ要素（リンク、ボタン、フォームコントロールなど）がキーボードでアクセス可能となるように設定します。
フォーカス順序を、コンテンツの提示順序にあわせる

キーボードフォーカス中のユーザーがタブキーを使用する際に、要素が論理的な順序でフォーカスされるようにします。
フォーカスしている箇所が視認できるようにする

フォーカスされている要素に対し、枠線や背景色の変更など視覚的に判別可能な変化（視覚的インジケーター）を追加し、ユーザーが現在どの要素にフォーカスしているかを容易に識別できるようにします。
キーボードフォーカスが閉じ込められないようにする

キーボードフォーカス中、Tab キーによる移動においてコンテンツをそれ以上進んだり、あるいは手前に戻ることができない状態を「閉じ込め」と称します。閉じ込められるのを防ぐため、ユーザーがキーボードを使用して特定の要素から抜け出せるよう設定します。

キーボードフォーカスが閉じ込められる状況の例

例1：モーダル

モーダルウインドウ内において、閉じるボタンがない、あるいはボタンをキーボードで操作できないなどの理由でモーダルから脱出できなくなる。
※モーダルウインドウ内において、閉じるや決定操作を行うまでモーダル内から出れない状態は「キーボード操作が閉じ込められる状況」には該当しません。
例2：X（旧twitter）のタイムラインなどの無限スクロール

Tabキーによる移動に伴いコンテンツが連続して読み込まれる。そのため、タイムラインの他のコンテンツに進むことができない。

ページのトップへ

Q.

モーダルウィンドウを用いる場合のアクセシビリティのポイントは何ですか？

A.

モーダルウィンドウのアクセシビリティに関して、特に注意を払うべき主要なポイントは以下の通りです。ただし、これらは基本的な要件であるため、シーンに応じた更なる検討が必要です。

キーボードフォーカスの管理
- モーダルを開いたとき、キーボードフォーカスがモーダルの最初の要素に自動的に移動するようにします。モーダルを閉じる際には、元の要素（例: モーダルを開くボタン）にフォーカスを戻すように気を付けてください。
「閉じる」ボタンの明示
- モーダルを閉じるボタン自体を設定し、その存在を明示することも有用です。
Tabキーの挙動の制御
- モーダル内でTabキーを使用した場合、フォーカスがモーダル内の要素間だけで移動するように制限します。これにより、ユーザーはモーダル内の情報に集中できます。
ARIA属性の使用
- モーダルウィンドウ要素にrole="dialog"を追加し、スクリーンリーダーがこの要素をダイアログとして正しく解釈できるようにします。
背景の視認性の調整
- モーダルが表示されているとき、背後の要素（ページの主要なコンテンツなど）の視認性を低減させることで、モーダルの内容にユーザーの注意を集めるようにします。
見出しの追加
- ユーザーはモーダル内のコンテンツ間を大きく移動することとなるため、見出しがあった方が内容を理解しやすくなります。

ページのトップへ

Q.

アクセシビリティを確保したアコーディオンメニューを、もっと使いやすくするには、どうすればいいですか？

A.

アコーディオンメニューは、情報を開閉する形式のメニューです。使いやすさを高めるためのポイントは以下です。

ポイント
1. 色の選択: 色の組み合わせによっては、区別しづらくなることもあります。コントラストの確保に加えて、色覚特性を考慮し、明瞭に区別できる色の組み合わせを選びます。
2. 文字の大きさ・フォント: 文字は目に負担をかけない大きさにし、普遍的に読みやすいフォントを採用します。
3. 操作の状態: 操作対象が開いているか、閉じているかを、わかるように表示します。
4. 操作の返答: ユーザーが何かを操作した時、それに応じた明確な反応（視覚や音声での通知など）を示すことで、何が起こったかを確認しやすくします。
5. 記号や画像の選定: よく知られていて、誤解の少ないアイコンや画像を選択します。さらに詳しい説明が必要な場合は、テキストでの補足を行います。

これらのポイントを取り入れることで、多様なユーザーにとって使いやすいアコーディオンメニューの実現が期待されます。

花王ウェブアクセシビリティ FAQ：
アコーディオンメニューを使いたいのですが、アクセシビリティを確保するために気を付けるべきポイントを教えてください。

ページのトップへ

Q.

選択されていないタブメニューのコンテンツが音声で読み上げられないのは、ウェブアクセシビリティの観点から問題になるでしょうか？

A.

タブメニューは表示するコンテンツを切り替える役割を持つため、選択されていないコンテンツは通常「非表示」になります。
例えば、以下のような情報や機能が提供されている場合、非表示のコンテンツが読み上げられないことは大きな問題にはなりません。

ポイント
- 読み上げにより、タブメニューのどの情報が選択されているのかを理解できる。
- キーボードだけでも表示・非表示の切り替えが操作できる。
- 操作箇所と変化対象が近い場所に配置されており、表示の変化に気付きやすい。

「視覚的に非表示の情報が読み上げられない」というポイントは、「より多くのユーザーに同等の体験を提供する」というアクセシビリティの考え方に基づいています。
ただし、これは一つの考え方であり、特定の状況に応じて「視覚的に非表示の情報をあえて読み上げる」ような対応をとる場合もあります。具体的な状況によって最適なアクセシビリティ対策は異なるため、一つひとつのケースで慎重に判断することが大切です。

タブメニューの読み上げにおいて、アクセシビリティ上の問題を解消するためのポイントのビジュアルイメージ。