Live from Ai4: Using Axe DevTools and Axe MCP Server to find and remediate accessibility issues
Axe DevTools ExtensionとAxe MCP Serverによるアクセシビリティ問題の検出・修正方法をライブデモンストレーション。Ai4 2026カンファレンスでの実演。
シェアされたアックリップです。
Axe DevTools ExtensionとAxe MCP Serverによるアクセシビリティ問題の検出・修正方法をライブデモンストレーション。Ai4 2026カンファレンスでの実演。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
axe が フォーカス状態を評価できないという限界を認識し、その補完実装方法と、flaky テストの見分け方を、Next.js の実プロダクトコード上で解説。Ring 不透明度修飾子などの Tailwind ユーティリティは静的検査を素通りするため、getComputedStyle と canvas でコントラストの実効値を計測する実装も示している。
GitHub Copilot app でアクセシビリティコードの改善を依頼する際の検証方法を設計。自動チェック(Playwright、axe-core)と人による確認を組み合わせ、WCAG適合を目指すプロセスを解説。
Lighthouse と axe で頻出するアクセシビリティエラー(代替テキスト・色コントラスト・ボタン名前・フォームラベル)の意味と修正方法を解説する。
Dockerで動く自前アクセシビリティモニタリングツール。Playwright と axe-core で毎日または週1回サイト全体をスキャン。テンプレートバグを複数ページの重複から1行に圧約し、自動判定できない項目を「needs a human」と表示。
React + Ant Designアプリのアクセシビリティバグを自動検出するGitHub Action「antd A11y Guard」の紹介。axe と jsx-a11y では検出できないAnt Design固有のバグ(ラベル欠落、モーダルタイトル無し等)を捕捉する。
Googleが発表した「Guided Vision」は、Gemini Liveの視覚支援機能で、視覚障害・弱視者との協働開発。カメラの向きや距離が不適切な場合に音で構図を補助し、AIが読める画像を撮影時点で確保する。実務への応用として、建設業で品番読み込みの精度向上を例に検証方法を提案。
音声ゲームブックの開発で直面した、音声認識と音声入力の技術的課題と、入力のタイミング表示・VoiceOver対応などの設計の工夫について
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
首都圏の大学230校を対象にしたWebアクセシビリティ対応状況の調査。方針公表率や試験実施率、axe DevTools による問題検出など、教育機関のアクセシビリティ対応の課題を数値で明らかにするレポート。
動画の音声をAIで文字起こしした場合、映像にしかない操作手順や指示を記事に補足する編集手順。視覚情報なしで内容を追えるようにするW3C基準のブログ編集方法。
ローカルAI(Gemma 3 4B)を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。
WCAG 2.2 のガイドライン 4.1 互換性を読み合い、学んだことを共有する勉強会。毎月第3木曜日はオフライン交流会も開催される。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制(EAA・WAD・雇用平等指令)と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
WCAG 2.2 のガイドライン 3.3 入力支援を読み合い、学んだことを共有する勉強会。毎月第1・2・3木曜日に開催される定期イベント。
Googleスライドのライブ字幕機能の設定・使用方法と注意点。句読点がなく音声認識の精度に限界があり、保存されないため、聞き取り補助として機能すること、記録としては別途用意が必要なことを説明する。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。