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
検出から再監査まで
- 対象:keyboard領域を、dom-runtime方式で確認します。
- 検出:現在操作している要素を視覚的に識別できない。
- 証拠:focused/unfocused computed stylesをFindingへ保存し、対象selector・実測値・環境を照合します。
- 修正:outlineやbox-shadowで明確なfocus-visibleを設定する。 自動修正安全度はAです。
- 再監査:同じfixture・viewport・zoom・配色・Reduced Motionで再実行し、追加の手動確認も記録します。
Broken / fixed review
問題例と修正版を比べるときの読み方
button:focus { outline: none; }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