Axe MCP Server Demo
開発者がIDEでアクセシビリティ問題を検出・修正できるAxe MCP Serverのデモ。ブラウザベースのスキャン結果をAIが分析し、コード修正を提案。
シェアされたアックリップです。
開発者がIDEでアクセシビリティ問題を検出・修正できるAxe MCP Serverのデモ。ブラウザベースのスキャン結果をAIが分析し、コード修正を提案。
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
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拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。