Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
シェアックリップ
シェアされたアックリップです。
そのほかの #デザインシステム ピックアップ
CSS のネイティブ相対色構文（oklch、color-mix）を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
WCAGコントラスト比を満たす色スキーム設計方法について解説。sRGB・HSL色空間の限界、相対輝度の計算式、OKLCH色空間を使ったCSS設計トークンで、アクセシブルな色システムを構築する方法を示す。
株式会社トルクの社内勉強会「ブランディングデー」の取り組み紹介。デザインシステム Material Design 3 を輪読し、カラーシステムのアクセシビリティ設計（トーン管理によるコントラスト比の自動確保）について学ぶプロセスを通じて、アクセシビリティはデザインの後付けではなく設計に組み込まれるべきことを実感した事例。
海外の政府・民間企業が構築したデザインシステムの事例を紹介。各地域の文化や法規制、アクセシビリティ基準への対応、デジタル社会への適応などの特徴を解説する。
JavaScript チャートライブラリの代替として、CSS ネイティブなチャート実装 3 つ（Charts.css、ProvChart、FSCSS）を比較。各々の特性、ユースケース、使い分けを解説。
Reactコンポーネントを別プロジェクトで再利用する際、スキップリンクと見出しのアクセシビリティ関係が壊れる問題を取り上げ。コンポーネント間の契約を明示的に定義することで異なる構成モデル下でもアクセシビリティを保つ設計方法を解説。
そのほかの #Lighthouse ピックアップ
Web制作の卒業制作をWCAG 2.2に沿ってセルフチェック。LightHouse、キーボード操作、代替テキストの3点から、具体的な問題点と対策を実例で解説。
Lighthouseアクセシビリティスコアが高くても実際のアクセシビリティツリーの品質を保証しないことを説明し、マネーページの監査方法とCI統合のチェックリストを示す。
Lighthouse 100点が実アクセシビリティを保証しない理由を4層で解説。axe-coreの部分実行制限、EUの同意バナー干渉、モバイル固有課題、手動検証の必須性を指摘。
自動テストツール（axe、Lightouseなど）が検出できないアクセシビリティの問題を指摘。キーボード操作・スクリーンリーダー・ARIAの手動検証の必要性と、自動テストと手動テストを組み合わせたアプローチを提唱している。
Web 制作現場でアクセシビリティの重要性をどう説明するか。『使いづらい』と『使えない』の違い、感じ方の多様性、WCAG などの基準が必要な理由を、フロントエンドエンジニアの視点から丁寧に考察。
Chrome DevToolsに統合されたアクセシビリティ機能を活用してWCAGに準拠したWebの検証を行う手法。
そのほかの #テスト・検証 ピックアップ
【名古屋開催】第12回 ウェブアクセシビリティ勉強会
イベント 開催予定
ウェブアクセシビリティの基礎から実務的なテーマまで、参加者と一緒にワークショップ形式で学ぶ勉強会。WCAG 2.2やスクリーンリーダーの実機検証など、手を動かしながら知見を共有する。初心者歓迎。
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
重度重複障害のある子どもたちの心身状態を心拍変動と行動観察で読み取り、それをもとに支援・指導を工夫するスキルを学ぶオンライン講座。視線入力やスイッチ教材などICT・支援技術の活用例も紹介される。
AIをアクセシビリティテストに活用しても、専門知識、批判的思考、障害のある人の見方が必要。AI活用の限界と人間の判定の重要性を指摘。
中国の医薬品に付く追跡コードを活用した情報提供の仕組みを解説。商品識別、偽造対策とともに、アクセシブルコードによる視覚障害のある人・外国人を含めた情報アクセスの実現を扱う。
WCAG 2.1/2.2対応のアクセシビリティツール15個をブラウザで実行できるコレクション。コントラストチェッカー、ARIAパターンジェネレーター、altテキスト生成等を搭載。プロプライエタリコードのアップロードが不要。
そのほかの #生成AI ピックアップ
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制（EAA・WAD・雇用平等指令）と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
AIをアクセシビリティテストに活用しても、専門知識、批判的思考、障害のある人の見方が必要。AI活用の限界と人間の判定の重要性を指摘。
AIエージェントが画面を操作するとき、見た目よりセマンティックな構造が重要。意味を明示するとUIの操作成功率が43%から90%に向上する。
視覚障害・聴覚障害など複数の障害に関わる支援技術・アクセシビリティの最新動向をまとめたニュース記事の集約。AI、スマートグラス、OS アクセシビリティ機能、3Dプリント、ロボティクスなど多分野にわたる技術動向を紹介している。
非エンジニアがClaudeとGeminiを併用してWebアプリ開発した実践プロンプト集。アクセシビリティ要件の初期組み込みから、UI/UX調整、視認性強化、トラブル対処まで、実装プロセスと試行錯誤を解説。
WCAG 3.0の最新仕様を読み解き、アクセシビリティ対応における AI の役割を整理した記事。機械的な検証は AI に任せ、文脈理解と定性評価は人間が行うという役割分担の具体例と、マルチエージェントシステムなどの実装方法を提案する。