いま操作するボタンを、固定の案内で隠さない。

05条件と補足

制作者が表示した別の内容による遮蔽を確認する

対象は、制作者が配置した固定ヘッダー、固定フッター、重なって表示される案内などで、キーボードの操作対象が隠れる場面です。ここでいうフォーカスはいまキー操作の対象になっている状態を指します。

確認するのはボタンやリンクなどの部品そのものです。部品の外側に表示する枠線だけが見えていても、部品全体が隠れていれば、この基準を満たしません。

一部の隠れと、全体の隠れを区別する

レベルAAの2.4.11では、対象の一部が見えていれば、部分的な隠れは許容されます。どの部分も隠れないことを求めるのは、レベルAAAの2.4.12「隠されないフォーカス (高度)」です。

この教材の「改善した例」では操作の対象を見つけやすいよう、全体が見える配置を選んでいます。部分的な隠れを減らすことは、最低限の要件に加えた設計上の配慮です。

注記1：利用者が配置を変えられる内容

設定可能な画面で、利用者がツールバーやパネルの位置を変更できる場合があります。このように移動できる内容について、基準のテストと適合の判定で確認するのは初期位置です。

例えば、利用者が動かせるツールバーは、最初に置かれた位置で他の操作部品全体を隠さないか確認します。

注記2：利用者が自分で開いた内容

利用者が開いたチャットなどで、フォーカスを受けた部品が隠れる場合があります。その場合、キーボードフォーカスを移さずに対象を表示できれば、制作者の内容によって隠されたとはみなしません。

例えば、利用者が開いたチャットの裏にリンクが隠れても、リンクにフォーカスを保ったままEscapeキーでチャットを閉じて、リンクを表示できる方法です。

この注記は、利用者が自分で開いた内容についてのものです。最初から固定されている案内や自動で現れる通知では、フォーカスを受けた対象がすぐに見えるようにする必要があります。

枠線を表示する基準とは別に確認する

2.4.7「フォーカスの可視化」では、現在の操作位置を示す表示が見えるかを確認します。2.4.11では、その操作対象自体の全体が別の内容で覆い隠されていないかを確認します。両方を併せて確認します。

固定部分の高さに合わせてスクロール時の余白を取る方法や、狭い画面では固定表示をやめる方法などがあります。特定のCSSの指定だけで判断せず、実際にキーボードで進んだときと戻ったときの表示を確認します。

ここで示した改善例は固定の案内と「詳細を見る」ボタンについての例です。ページやサイト全体のWCAG適合を示すものではありません。