Accessibility Studio / Check Rule(検査ルール)

フォーカス表示が確認できない

現在操作している要素を視覚的に識別できない。 focused/unfocused computed stylesを証拠として確認し、outlineやbox-shadowで明確なfocus-visibleを設定する。

DAS-KBD-003v1.0.0監査画面で確認

Direct answer

何を確認する項目ですか?

現在操作している要素を視覚的に識別できない。 focused/unfocused computed stylesを証拠として確認し、outlineやbox-shadowで明確なfocus-visibleを設定する。

DAS-KBD-003 はWCAG 2.4.7 Level AAへ対応するautomated checkです。focused/unfocused computed stylesを根拠にしますが、対象の意味と実環境での操作は別途確認します。

Reference facts

固定値・必要な証拠・判定境界

Rule ID(固定ID)
DAS-KBD-003
Domain(検査領域)
keyboard
WCAG SC(達成基準)
2.4.7 Level AA
Automation(判定方式)
automated
Runtime(実装状態)
実行検査あり
Severity(既定の影響度)
critical
Test method(検査方法)
dom-runtime
Evidence(必要な証拠)
focused/unfocused computed styles
Remediation(修正方針)
outlineやbox-shadowで明確なfocus-visibleを設定する。
Fix safety(自動修正安全度)
A
False positive(誤検出の境界)
初期DOMと計算済みstyleだけでは、操作後に正しく変化する状態や意図的な例外を捉えられない場合があります。対象と実際の操作条件を人が照合します。
False negative(見逃しの境界)
遅延表示、別route、支援技術固有の挙動、文言の質、視覚だけでは判断できない意味は検出範囲外です。

Detect → evidence → remediate → verify

検出から再監査まで

  1. 対象:keyboard領域を、dom-runtime方式で確認します。
  2. 検出:現在操作している要素を視覚的に識別できない。
  3. 証拠:focused/unfocused computed stylesをFindingへ保存し、対象selector・実測値・環境を照合します。
  4. 修正:outlineやbox-shadowで明確なfocus-visibleを設定する。 自動修正安全度はAです。
  5. 再監査:同じfixture・viewport・zoom・配色・Reduced Motionで再実行し、追加の手動確認も記録します。

Broken / fixed review

問題例と修正版を比べるときの読み方

Broken(問題候補)
button:focus { outline: none; }
Fixed(修正後の候補)
button:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }

再確認:明暗両背景でTab移動し、現在位置を常に視認できることを確認します。

検証Fixture:broken-marketing

Human review boundary

このページだけでは決められないこと

  • 自動検査結果だけでWCAG適合、認証、法的要件の充足を宣言しません。
  • 意味、文章品質、操作の分かりやすさ、支援技術固有の挙動は人が確認します。
  • 代表ページと状態、複数browser・端末、keyboard、screen reader、zoom・reflowを評価範囲へ含めます。
  • 未実施環境と確認できなかった項目をreportに残し、0 Findingを「問題なし」と言い換えません。

Primary source

公式仕様・解説

W3C/WAIの該当ページで原文と例外を確認する