Understanding
- SC 2.4.12:Focus Not Obscured (Enhanced) (Level AAA)
+ 解説書
+ 達成基準 2.4.12:隠されないフォーカス (高度) (レベル AAA)
- In Brief
+ 要約
- - Goal
- - Don't cover any part of the item with focus.
+ - 目標
+ - フォーカスのある項目のどの部分も覆わない。
- - What to do
- - Ensure when an item gets keyboard focus, it is fully visible.
+ - 何をすればよいか
+ - 項目がキーボードフォーカスを取得したときに、その項目が完全に見えることを保証する。
- - Why it's important
- - People who can't use a mouse need to see what has keyboard focus.
+ - なぜそれが重要か
+ - マウスを使用できない人々は、キーボードフォーカスがどこにあるかを確認する必要がある。
- Intent
- The intent of this Success Criterion is to ensure that the item receiving keyboard
- focus is always visible in the user's viewport. For sighted people who rely on a keyboard
- (or on a device that operates through the keyboard interface, such as a switch or
- voice input), knowing the current point of focus is critical. The component with focus
- signals the interaction point on the page. Where users cannot see the item with focus,
- they may not know how to proceed, or may even think the system has become unresponsive.
+
意図
+ この達成基準の意図は、キーボードフォーカスを受け取る項目が、利用者のビューポート内で常に表示されることを保証することである。キーボード (又はスイッチ、音声入力など、キーボードインターフェースを通じて操作するデバイス) に依存している目の見える人にとって、現在のフォーカス地点を知ることは非常に重要である。フォーカスを持つコンポーネントは、ページ上のインタラクション地点を示す。利用者がフォーカスを持つ項目を見ることができない場合、利用者はどのように進めればよいのかわからない、又はシステムが応答しなくなったとさえ思うかもしれない。
- Typical types of content that can overlap focused items are sticky footers, sticky
- headers, and non-modal dialogs. As a user tabs through the page, these layers of content
- can hide the item receiving focus, along with its focus indicator.
+
フォーカスされた項目と重なる可能性のある代表的なコンテンツの種類は、スティッキーフッター、スティッキーヘッダー、及び非モーダルダイアログである。利用者がページ内をタブで移動すると、これらのコンテンツのレイヤーにより、フォーカスを受け取った項目がフォーカスインジケータと共に覆い隠されてしまう可能性がある。
- A notification implemented as sticky content, such as a cookie banner, will fail this
- Success Criterion if it partially covers a component receiving focus. Ways of passing
- include making the banner modal so the user has to dismiss the banner before navigating
- through the page, or using scroll padding so the banner does not overlap other content. Notifications that do not require user
- action could also meet this criterion by closing on loss of focus.
+
Cookie バナーのようなスティッキーコンテンツとして実装された通知は、フォーカスを受け取るコンポーネントを部分的にでも覆う場合、この達成基準に失敗する。合格する方法には、利用者がページ内をナビゲートする前にバナーを閉じる必要があるようにバナーをモーダルにする、又はバナーが他のコンテンツと重ならないように scroll-padding を使用する、といったものがある。利用者のアクションを必要としない通知も、フォーカスが失なわれるときに閉じることでこの基準を満たす可能性がある。
- Another form of obscuring can occur where light boxes or other semi-opaque effects
- overlap the item with focus. This form of obscuring is not in scope for this Success Criterion. While less than 100 percent opacity is not causing
- the component to be visually hidden
, such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. When a focus indicator can be covered by a semi-opaque component, the the focus
- indicator should be assessed against 2.4.11. The intention in both situations is that
- the component receiving focus should never be obscured to the point a user cannot
- tell which item has focus.
+
別の隠される状況としては、ライトボックス又はその他の半透明効果がフォーカスを持つ項目に重なる場合がある。この隠される状況は、この達成基準の範囲外である。不透明度が 100％未満であればコンポーネントが視覚的に隠れる
ことはないが、そのような半透明の重なりにより 1.4.11 非テキストのコントラスト 及び／又は 2.4.13 フォーカスの外観の失敗が発生する場合がある。フォーカスインジケータが半透明のコンポーネントによって覆われる場合、そのフォーカスインジケータは 1.4.11 及び 2.4.13 に照らして評価されるべきである。この達成方法の意図は、どちらの状況にせよ、利用者がどの項目にフォーカスがあるのか判断できないほどにフォーカスを受け取るコンポーネントが隠されるべきではない、ということである。
- Benefits
+ 利点
- - Sighted users who rely on a keyboard interface to operate the page will be able to
- see the component which gets keyboard focus. Such users include those who rely on
- devices which use the keyboard interface, including speech input, sip-and-puff software,
- on-screen keyboards, scanning software, and a variety of assistive technologies and
- alternate keyboards.
+
- キーボードインタフェースに依存してページを操作している目の見える利用者は、キーボードフォーカスを取得するコンポーネントを見ることができる。そのような利用者には、キーボードインタフェースを利用するデバイス (音声入力、呼気・吸気ソフトウェア、オンスクリーンキーボード、スキャンソフトウェア、並びにさまざまな支援技術及び代替キーボードなど) に依存するような利用者が含まれる。
- - People with limited or low vision but who rely upon a pointing device (for viewport
- orientation and repositioning) benefit from a clearly visible indication of the current
- point of keyboard interaction, especially where magnification reduces the overall
- useable portion of content.
+
- 視力に制限がある又はロービジョンだが、(ビューポートの向き及び位置を変えるために) ポインティングデバイスに依存している利用者は、特に拡大によってコンテンツの全体的な使用可能部分が減少する場合に、キーボード操作の現在位置が明確に表示されることで恩恵を受ける。
- - People with attention limitations, short term memory limitations, or limitations in
- executive processes benefit by being able to more easily discover where the focus
- is located.
+
- 注意力の制限、短期記憶の制限、又は実行プロセスの制限がある人々は、フォーカスがどこにあるのかをより容易に発見できることで恩恵を受ける。
- Examples
+ 事例
- - A page has a sticky footer (attached to the bottom of the viewport). When tabbing
- down the page the focused item is not at all obscured by the footer because content
- in the viewport scrolls up to always display the item with keyboard focus using scroll padding.
+
- ページにスティッキーフッター (ビューポートの下部に固定されている) がある。タブ操作でページの下に移動しても、フォーカスされた項目はフッターによって少しも隠れることはない。これは、ビューポート内のコンテンツが上にスクロールして、scroll-padding を使用してキーボードフォーカスのある項目が常に表示されるためである。
- - A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing
- access to the other controls in the page until it has been dismissed. Focus is not
- obscured because the cookie approval dialog (including the focus indicator) remains
- on screen until selections are made and submitted.
+
- ページに大きな (幅 30％の) クッキー承認ダイアログがある。ダイアログはモーダルであり、閉じられるまでページ内の他のコントロールへのアクセスを防ぐ。選択が行われて送信されるまで、クッキー承認ダイアログ (フォーカスインジケータを含む) は画面上に残るため、フォーカスは隠されない。
- - A notification is implemented as a sticky header and the keyboard focus is moved to
- the notification. The notification disappears when it loses focus, and does not obscure
- any other controls (including the focus indicator visible prior to the notification).
+
- 通知はスティッキーヘッダーとして実装され、キーボードフォーカスは通知に移動する。通知はフォーカスを失うと消え、他のコントロール (通知の前に表示されていたフォーカスインジケータを含む) に隠されることはない。
- Techniques
- Each numbered item in this section represents a technique or combination of techniques
- that the WCAG Working Group deems sufficient for meeting this Success Criterion. However,
- it is not necessary to use these particular techniques. For information on using other
- techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
+
テクニック
+ この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
- Sufficient Techniques
+ 十分なテクニック
- C43: Using CSS scroll-padding to un-obscure content
@@ -185,21 +150,15 @@ Sufficient Techniques
- Failures
- The following are common mistakes that are considered failures of this Success Criterion
- by the WCAG Working Group.
+
失敗
+ 次に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
- - An interaction that causes content to appear over the component with keyboard focus,
- visually covering part of the focus indicator. This behavior might be encountered
- with advertising or promotional material meant to provide more information about a
- product as the user navigates through a catalogue.
+
- キーボードフォーカスを持つコンポーネントの上にコンテンツを表示させ、フォーカスインジケータの一部を視覚的に覆うインタラクション。この動作は、利用者がカタログ内をナビゲートするときに、製品に関する詳細情報を提供することを目的とした広告又は販促資料で遭遇する可能性がある。
- - A page has a sticky footer (attached to the bottom of the viewport). When tabbing
- down the page, a focused item is partially obscured by the footer because content
- in the viewport scrolls without sufficient scroll padding.
+
- ページにはスティッキーフッター（ビューポートの下部に貼り付けられる）がある。ページをタブで下に移動すると、ビューポート内のコンテンツが十分な scroll padding なしにスクロールするため、フォーカスされた項目がフッターによって部分的に隠される。
@@ -208,42 +167,37 @@ Failures
- Key Terms
+ 重要な用語
- user interface component
+ ユーザインタフェース コンポーネント (user interface component)
- a part of the content that is perceived by users as a single control for a distinct
- function
+
コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。
- Note
- Multiple user interface components may be implemented as a single programmatic element.
- "Components" here is not tied to programming techniques, but rather to what the user
- perceives as separate controls.
+
注記
+ 複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいう「コンポーネント」は、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。
- Note
- User interface components include form elements and links as well as components generated
- by scripts.
+
注記
+ ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。
- Note
- What is meant by "component" or "user interface component" here is also sometimes
- called "user interface element".
+
注記
+ ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインターフェース要素」とも呼ばれる。
@@ -251,9 +205,7 @@ Key Terms
In Brief
+要約
-
-
- Goal -
- Don't cover any part of the item with focus. +
- 目標 +
- フォーカスのある項目のどの部分も覆わない。 -
- What to do -
- Ensure when an item gets keyboard focus, it is fully visible. +
- 何をすればよいか +
- 項目がキーボードフォーカスを取得したときに、その項目が完全に見えることを保証する。 -
- Why it's important -
- People who can't use a mouse need to see what has keyboard focus. +
- なぜそれが重要か +
- マウスを使用できない人々は、キーボードフォーカスがどこにあるかを確認する必要がある。
Intent
-The intent of this Success Criterion is to ensure that the item receiving keyboard - focus is always visible in the user's viewport. For sighted people who rely on a keyboard - (or on a device that operates through the keyboard interface, such as a switch or - voice input), knowing the current point of focus is critical. The component with focus - signals the interaction point on the page. Where users cannot see the item with focus, - they may not know how to proceed, or may even think the system has become unresponsive. +
意図
+この達成基準の意図は、キーボードフォーカスを受け取る項目が、利用者のビューポート内で常に表示されることを保証することである。キーボード (又はスイッチ、音声入力など、キーボードインターフェースを通じて操作するデバイス) に依存している目の見える人にとって、現在のフォーカス地点を知ることは非常に重要である。フォーカスを持つコンポーネントは、ページ上のインタラクション地点を示す。利用者がフォーカスを持つ項目を見ることができない場合、利用者はどのように進めればよいのかわからない、又はシステムが応答しなくなったとさえ思うかもしれない。
-Typical types of content that can overlap focused items are sticky footers, sticky - headers, and non-modal dialogs. As a user tabs through the page, these layers of content - can hide the item receiving focus, along with its focus indicator. +
フォーカスされた項目と重なる可能性のある代表的なコンテンツの種類は、スティッキーフッター、スティッキーヘッダー、及び非モーダルダイアログである。利用者がページ内をタブで移動すると、これらのコンテンツのレイヤーにより、フォーカスを受け取った項目がフォーカスインジケータと共に覆い隠されてしまう可能性がある。
-A notification implemented as sticky content, such as a cookie banner, will fail this - Success Criterion if it partially covers a component receiving focus. Ways of passing - include making the banner modal so the user has to dismiss the banner before navigating - through the page, or using scroll padding so the banner does not overlap other content. Notifications that do not require user - action could also meet this criterion by closing on loss of focus. +
Cookie バナーのようなスティッキーコンテンツとして実装された通知は、フォーカスを受け取るコンポーネントを部分的にでも覆う場合、この達成基準に失敗する。合格する方法には、利用者がページ内をナビゲートする前にバナーを閉じる必要があるようにバナーをモーダルにする、又はバナーが他のコンテンツと重ならないように scroll-padding を使用する、といったものがある。利用者のアクションを必要としない通知も、フォーカスが失なわれるときに閉じることでこの基準を満たす可能性がある。
-Another form of obscuring can occur where light boxes or other semi-opaque effects
- overlap the item with focus. This form of obscuring is not in scope for this Success Criterion. While less than 100 percent opacity is not causing
- the component to be visually hidden
, such semi-opaque overlaps may cause a failure of 2.4.11 Focus Appearance. When a focus indicator can be covered by a semi-opaque component, the the focus
- indicator should be assessed against 2.4.11. The intention in both situations is that
- the component receiving focus should never be obscured to the point a user cannot
- tell which item has focus.
+
別の隠される状況としては、ライトボックス又はその他の半透明効果がフォーカスを持つ項目に重なる場合がある。この隠される状況は、この達成基準の範囲外である。不透明度が 100％未満であればコンポーネントが視覚的に隠れる
ことはないが、そのような半透明の重なりにより 1.4.11 非テキストのコントラスト 及び／又は 2.4.13 フォーカスの外観の失敗が発生する場合がある。フォーカスインジケータが半透明のコンポーネントによって覆われる場合、そのフォーカスインジケータは 1.4.11 及び 2.4.13 に照らして評価されるべきである。この達成方法の意図は、どちらの状況にせよ、利用者がどの項目にフォーカスがあるのか判断できないほどにフォーカスを受け取るコンポーネントが隠されるべきではない、ということである。
Benefits
+利点
-
-
- Sighted users who rely on a keyboard interface to operate the page will be able to - see the component which gets keyboard focus. Such users include those who rely on - devices which use the keyboard interface, including speech input, sip-and-puff software, - on-screen keyboards, scanning software, and a variety of assistive technologies and - alternate keyboards. +
- キーボードインタフェースに依存してページを操作している目の見える利用者は、キーボードフォーカスを取得するコンポーネントを見ることができる。そのような利用者には、キーボードインタフェースを利用するデバイス (音声入力、呼気・吸気ソフトウェア、オンスクリーンキーボード、スキャンソフトウェア、並びにさまざまな支援技術及び代替キーボードなど) に依存するような利用者が含まれる。 -
- People with limited or low vision but who rely upon a pointing device (for viewport - orientation and repositioning) benefit from a clearly visible indication of the current - point of keyboard interaction, especially where magnification reduces the overall - useable portion of content. +
- 視力に制限がある又はロービジョンだが、(ビューポートの向き及び位置を変えるために) ポインティングデバイスに依存している利用者は、特に拡大によってコンテンツの全体的な使用可能部分が減少する場合に、キーボード操作の現在位置が明確に表示されることで恩恵を受ける。 -
- People with attention limitations, short term memory limitations, or limitations in - executive processes benefit by being able to more easily discover where the focus - is located. +
- 注意力の制限、短期記憶の制限、又は実行プロセスの制限がある人々は、フォーカスがどこにあるのかをより容易に発見できることで恩恵を受ける。
Examples
+事例
-
-
- A page has a sticky footer (attached to the bottom of the viewport). When tabbing - down the page the focused item is not at all obscured by the footer because content - in the viewport scrolls up to always display the item with keyboard focus using scroll padding. +
- ページにスティッキーフッター (ビューポートの下部に固定されている) がある。タブ操作でページの下に移動しても、フォーカスされた項目はフッターによって少しも隠れることはない。これは、ビューポート内のコンテンツが上にスクロールして、scroll-padding を使用してキーボードフォーカスのある項目が常に表示されるためである。 -
- A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing - access to the other controls in the page until it has been dismissed. Focus is not - obscured because the cookie approval dialog (including the focus indicator) remains - on screen until selections are made and submitted. +
- ページに大きな (幅 30％の) クッキー承認ダイアログがある。ダイアログはモーダルであり、閉じられるまでページ内の他のコントロールへのアクセスを防ぐ。選択が行われて送信されるまで、クッキー承認ダイアログ (フォーカスインジケータを含む) は画面上に残るため、フォーカスは隠されない。 -
- A notification is implemented as a sticky header and the keyboard focus is moved to - the notification. The notification disappears when it loses focus, and does not obscure - any other controls (including the focus indicator visible prior to the notification). +
- 通知はスティッキーヘッダーとして実装され、キーボードフォーカスは通知に移動する。通知はフォーカスを失うと消え、他のコントロール (通知の前に表示されていたフォーカスインジケータを含む) に隠されることはない。
Techniques
-Each numbered item in this section represents a technique or combination of techniques - that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, - it is not necessary to use these particular techniques. For information on using other - techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section. +
テクニック
+この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
Sufficient Techniques
+十分なテクニック
- C43: Using CSS scroll-padding to un-obscure content @@ -185,21 +150,15 @@
Sufficient Techniques
Failures
-The following are common mistakes that are considered failures of this Success Criterion - by the WCAG Working Group. +
失敗
+次に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
-
-
- An interaction that causes content to appear over the component with keyboard focus, - visually covering part of the focus indicator. This behavior might be encountered - with advertising or promotional material meant to provide more information about a - product as the user navigates through a catalogue. +
- キーボードフォーカスを持つコンポーネントの上にコンテンツを表示させ、フォーカスインジケータの一部を視覚的に覆うインタラクション。この動作は、利用者がカタログ内をナビゲートするときに、製品に関する詳細情報を提供することを目的とした広告又は販促資料で遭遇する可能性がある。 -
- A page has a sticky footer (attached to the bottom of the viewport). When tabbing - down the page, a focused item is partially obscured by the footer because content - in the viewport scrolls without sufficient scroll padding. +
- ページにはスティッキーフッター（ビューポートの下部に貼り付けられる）がある。ページをタブで下に移動すると、ビューポート内のコンテンツが十分な scroll padding なしにスクロールするため、フォーカスされた項目がフッターによって部分的に隠される。
Failures
- Key Terms
+ 重要な用語
- a part of the content that is perceived by users as a single control for a distinct - function +
コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。
Note
-Multiple user interface components may be implemented as a single programmatic element. - "Components" here is not tied to programming techniques, but rather to what the user - perceives as separate controls. +
注記
+複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいう「コンポーネント」は、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。
Note
-User interface components include form elements and links as well as components generated - by scripts. +
注記
+ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。
Note
-What is meant by "component" or "user interface component" here is also sometimes - called "user interface element". +
注記
+ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインターフェース要素」とも呼ばれる。