自動テストツール(axe、Lightouseなど)が検出できないアクセシビリティの問題を指摘。キーボード操作・スクリーンリーダー・ARIAの手動検証の必要性と、自動テストと手動テストを組み合わせたアプローチを提唱している。
シェアックリップ
シェアされたアックリップです。
そのほかの #axe ピックアップ
GitHub ActionsでWCAG 2.2準拠のアクセシビリティチェックを自動化するアクション。axe-coreを使用し、プルリクエストで違反を検出して構築を失敗させる。重大度レベル(critical/serious/moderate/minor)の設定や基準の選択ができる。
英国の140のチャリティホームページを自動テストした結果、138がWCAG 2.2 AA基準に違反。最も一般的な問題はテキストコントラスト不足(79%)とアクセス可能な名前のないリンク(69%)。
Agentic Web Accessibility Auditing: Authoring and Evaluating Per-Criterion Worker Agents for WCAG
WCAG 2.1・2.2の自動監査フレームワークとして、criterion-specific worker agentsを39個の基準に実装し、既存ツール(axe-core・ビジョンランゲージモデル)と比較評価した論文。
Lighthouse 100点が実アクセシビリティを保証しない理由を4層で解説。axe-coreの部分実行制限、EUの同意バナー干渉、モバイル固有課題、手動検証の必須性を指摘。
生成AIが増加させるアクセシビリティ負債の問題を Deque Systems レポートのデータから分析し、開発プロセスへの検証統合による対策を論じた記事。
React ダッシュボードの 412 件のアクセシビリティ違反を AI エージェントで修正した過程の記録。違反を JSON で機械可読化してバッチ処理し、修正状況を可視化することで 78% を 6 時間で解決。不正確な ARIA 生成も報告。
そのほかの #Lighthouse ピックアップ
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
Lighthouseアクセシビリティスコアが高くても実際のアクセシビリティツリーの品質を保証しないことを説明し、マネーページの監査方法とCI統合のチェックリストを示す。
Lighthouse 100点が実アクセシビリティを保証しない理由を4層で解説。axe-coreの部分実行制限、EUの同意バナー干渉、モバイル固有課題、手動検証の必須性を指摘。
Web 制作現場でアクセシビリティの重要性をどう説明するか。『使いづらい』と『使えない』の違い、感じ方の多様性、WCAG などの基準が必要な理由を、フロントエンドエンジニアの視点から丁寧に考察。
Chrome DevToolsに統合されたアクセシビリティ機能を活用してWCAGに準拠したWebの検証を行う手法。
Core Web Vitalsダッシュボードに表示されやすいアクセシビリティ修正。フォーカス表示、キーボード応答性、モーダルの位置固定に注目し、計測可能な改善の優先度付けを実例で解説。
そのほかの #キーボード操作 ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
同じHTMLを異なるCSSリセットで実装した3パターンを比較。:focusでアウトラインを削除するCSSリセットがキーボードユーザーのフォーカス追跡を不可能にする問題と、:focus-visibleによる解決法を実装で検証している。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
点字コラムを発信する著者が、自分のアカウント名の漢字「文佳」がスクリーンリーダーで正しく読み上げられず、読者が一文字ずつ変換して対応してくれていたことに気づき、無知のうちに視覚障害のある人に負担を押しつけていたことへの反省を綴る。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。
Kindle の TalkBack による読み上げ仕様が変わったため、代わりに Kindle 搭載の Assistive Reader に乗り換えたユーザーが、使いやすさ・速度・スマホ放置時の継続再生など、むしろ快適に感じた経験を記述したもの。
スクリーンリーダー NVDA を 7 年使い熟達した視覚障害のある人による省察。操作の工夫で対応できるようになったことが、サイト設計側の課題を覆い隠していないか。熟達するほど「アクセシブルであること」と「ユーザーの工夫で使える状態」の違いが見えなくなる危険性を指摘。
ウェブサイトのキーボードナビゲーション障害を自動検出するツール。スクリーンリーダー利用者が実際の操作で遭遇するフォーカス移動や状態変化への対応障害を見つけるアルゴリズムを提案する。
そのほかの #WAI-ARIA ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
重度重複障害のある子どもたちの心身状態を心拍変動と行動観察で読み取り、それをもとに支援・指導を工夫するスキルを学ぶオンライン講座。視線入力やスイッチ教材などICT・支援技術の活用例も紹介される。
中国の医薬品に付く追跡コードを活用した情報提供の仕組みを解説。商品識別、偽造対策とともに、アクセシブルコードによる視覚障害のある人・外国人を含めた情報アクセスの実現を扱う。
GitHub ActionsでWCAG 2.2準拠のアクセシビリティチェックを自動化するアクション。axe-coreを使用し、プルリクエストで違反を検出して構築を失敗させる。重大度レベル(critical/serious/moderate/minor)の設定や基準の選択ができる。
Playwrightを使ったE2Eテストで、ブラウザ(Chromium/WebKit)、端末(iPhone実機/Android Emulator)、画面幅、アクセシビリティなど複数軸での動作確認。Chrome環境のみでなく、Safari系やスマートフォン環境での検証の重要性を解説する。