axe-coreとPlaywrightを組み合わせたWebアクセシビリティテストの自動化。継続的な品質保証の実装方法と実践ガイド。
シェアックリップ
シェアされたアックリップです。
そのほかの #axe ピックアップ
Angularアプリのaxeスキャンで検出した違反を、DOM選択子ではなく修正対象のコンポーネント名に帰属させるツールの開発事例。
WCAG 2.2 達成基準を自動評価するツール(axe-core ベース)を、異なるステークホルダー向けに4つのレポート形式で提供する研究。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
axe が フォーカス状態を評価できないという限界を認識し、その補完実装方法と、flaky テストの見分け方を、Next.js の実プロダクトコード上で解説。Ring 不透明度修飾子などの Tailwind ユーティリティは静的検査を素通りするため、getComputedStyle と canvas でコントラストの実効値を計測する実装も示している。
GitHub Copilot app でアクセシビリティコードの改善を依頼する際の検証方法を設計。自動チェック(Playwright、axe-core)と人による確認を組み合わせ、WCAG適合を目指すプロセスを解説。
Lighthouse と axe で頻出するアクセシビリティエラー(代替テキスト・色コントラスト・ボタン名前・フォームラベル)の意味と修正方法を解説する。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
WebAIM によるスクリーンリーダー利用者調査(第11回)の結果分析。JAWS と NVDA の利用傾向の変化、地域による差、ブラウザ利用状況、AI 利用、スキップリンク利用率の報告。
生成AIのストリーム出力をキャンセルした後も、スクリーンリーダーが遅延テキストを読み上げる競合状態バグの原因特定と修正方法。UI状態管理を状態テーブルで明確化することで根本原因(クライアント側のストリーム継続)を解明する開発プロセス。
ストリーム型のAI生成UIにおいて、キャンセル操作時にフォーカスを失い、古い状態の通知がスクリーンリーダーで宣言される問題を分析。WAI-ARIAのライブリージョンとフォーカス管理の実装パターンと、デバッグ手法を具体的に解説している。
Word文書のアクセシビリティについて、見出し、表、読む順序がコンテンツへのアクセスに与える影響を解説するライブ講座。
自動テストのカバー率は、ツール自体ではなく監査方法論に依存する。100監査の実データから、数字の意味を理解する重要性を説く。