デザインシステムとコンポーネントライブラリのアクセシビリティ構築方法を、Deque の Cauldron React 開発の事例で解説。axe DevTools Linter による開発者のアクセシブルな利用確保も紹介する。
シェアックリップ
シェアされたアックリップです。
そのほかの #React ピックアップ
デジタル庁デザインシステムのReactコンポーネントをshadcn/uiレジストリで46個に拡充。導入方法と、独自デザイントークンに対応したクラス統合の実装上の工夫を解説する。
メール再送信ボタンのアクセシブルなUIパターンを解説。idle・sending・sent・cooldown・error の5つの状態を明確に示し、スクリーンリーダーユーザーにも「待機中」「送信中」「再試行まであと24秒」といった情報が伝わるReactコンポーネントの実装方法を提示する。
React 19 の useFormStatus フック使用時のキーボードユーザー向けフォーカス喪失問題と修正方法を解説。aria-disabled の活用と複数サブミットボタン対応を実装例で示す。
Why axe and jsx-a11y miss Ant Design accessibility bugs (and a GitHub Action that catches them)
記事 海外
React + Ant Designアプリのアクセシビリティバグを自動検出するGitHub Action「antd A11y Guard」の紹介。axe と jsx-a11y では検出できないAnt Design固有のバグ（ラベル欠落、モーダルタイトル無し等）を捕捉する。
フォームのバリデーションメッセージ表示時のレイアウト変動（layout shift）を防ぎながら、アクセシビリティを確保する実装方法。React コンポーネントと CSS で状態ごとに安定した幾何形状を保つテクニック。
React で自作するモーダルコンポーネントで、フォーカストラップ・初期フォーカス設定・フォーカス復元を WAI-ARIA に沿って実装する手順。キーボード操作とスクリーンリーダー対応をコード例で具体的に解説する。
そのほかの #デザインシステム ピックアップ
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
デジタル庁デザインシステムのReactコンポーネントをshadcn/uiレジストリで46個に拡充。導入方法と、独自デザイントークンに対応したクラス統合の実装上の工夫を解説する。
デザインシステムの配色監査を支援するツール。複数色の組み合わせをすべて表行列で可視化し、WCAG のコントラスト比基準（AA/AAA）と文字サイズ別の達成状況を一覧表示。相対輝度の計算ロジックと実装方法を解説。
デジタル庁デザインシステムの活用方法。「見やすくする」がコントラスト比などで具体的に定義でき、入力欄設計やエラーメッセージの扱いまで実装レベルでガイドされる。Figma・HTML・React サンプルも提供される、組織で共有できる設計資料。
アイコンライブラリやコンポーネントパッケージでアニメーション付きアイコンを配布するときに必要な、トリガー・時間・ループ・アクセシビリティ情報の標準化について。モーション情報をアセット定義に組み込む必要性と、情報伝達の唯一の手段として動きに依存しない設計原則を解説。
M-Enabling Summit 2026 | Day 3 Seminar Spotlight: UX Accessibility Design: Beyond Tools & Technology
YouTube 海外
UXアクセシビリティデザインを個別の問題修正からケア方針・プロセス・人材育成という組織文化へ転換する方法論。Adobeの実践例とDesign Accessibility Specialist認定を紹介。
そのほかの #axe ピックアップ
アクセシビリティをチェック・テストするためのツール・拡張機能・スクリーンリーダーの一覧。自動チェック、コントラスト測定、スクリーンリーダー利用など、成果物検証の手段を紹介している
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」と表示。
Why axe and jsx-a11y miss Ant Design accessibility bugs (and a GitHub Action that catches them)
記事 海外
React + Ant Designアプリのアクセシビリティバグを自動検出するGitHub Action「antd A11y Guard」の紹介。axe と jsx-a11y では検出できないAnt Design固有のバグ（ラベル欠落、モーダルタイトル無し等）を捕捉する。
そのほかの #WCAG ピックアップ
WCAG 2.2 もくもく会 #13 ～ ガイドライン 4.1 互換性 ～
イベント 開催予定
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 もくもく会 #12 ～ ガイドライン 3.3 入力支援 ～
イベント 開催予定
WCAG 2.2 のガイドライン 3.3 入力支援を読み合い、学んだことを共有する勉強会。毎月第1・2・3木曜日に開催される定期イベント。
Googleスライドのライブ字幕機能の設定・使用方法と注意点。句読点がなく音声認識の精度に限界があり、保存されないため、聞き取り補助として機能すること、記録としては別途用意が必要なことを説明する。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。