アクセシビリティ監査レポートから実装への転換。問題の「症状」と「発生源」を区別し、根本的な修復とは症状を生み出すシステム（コンポーネント・テンプレート・設計）を修正することを強調。技術債を増やさない修復戦略を解説。
#デザインシステム
「デザインシステム」に関するアクセシビリティ関連情報を自動収集して掲載しています。
色の調和を効率的に選択・探索できるカラーパレット生成ツール。デザイナーと開発者向けの無料オフラインアプリケーション
読みやすさを追求する書体デザイナー・高田裕美の著作紹介。誰もが読める文字をデザインする実践を通じ、フォント・級数・色選択などで包括的なアクセシビリティを実現する方法を学ぶ。
UI要素・コンポーネントの名前・役割・実装コードが分かるビジュアル辞書。デザイナーとデベロッパーが一貫した用語で対話するための参考リソース。
30のウェブサイトを40項目のアクセシビリティ基準でスコアリング。業界全体のアクセシビリティ水準の実態を調査・報告する。
デザインシステムの色変数の不具合が原因で生じた33件のカラーコントラスト違反を解決した事例。WCAG準拠テストの重要性を紹介。
シンプルなトースト通知コンポーネント開発を起点に、tatami-a11yというアクセシビリティシステム全体へと発展させた実装例と設計思想を解説する。
2026年7月のSmartHRアクセシビリティ月報 〜Design System のコンポーネントページにアクセシビリティ情報を追加する取り組みについて〜｜SmartHR ACCESSIBILITY
記事
SmartHRのアクセシビリティ部による月報。Design Systemのコンポーネントページへのアクセシビリティ情報追加、JIS X 8341-3準拠テストの進捗を報告する企業のアクセシビリティ取り組み事例。
CSSでアクセシブルなカラーシステムを構築する実装方法を解説。色覚特性や低視力のある人にも対応した色彩インフラの設計ガイドとなるワークフローを紹介している。
2026年3月開催のイベント「スクリーンリーダーによる実践的アクセシビリティウォークスルー」を振り返り、モーダルダイアログとデザインシステムの関係や生成AIを活用したアクセシビリティ対応の可能性を語るポッドキャスト回。
多様な個性や働き方をする人が全員主体的に参加できるオンライン会議の設計。デザインシステム開発の現場実践例。
Claude Code の dataviz スキルに搭載された配色検証ツールの使用例と結果を紹介。アクセシブルな配色設計の自動チェック方法を実装事例で解説。
10年のAngular経験に基づき、アクセシビリティを開発初期段階から組み込むコンポーネントライブラリ設計。バックログではなく前提条件とする開発哲学。
Fluent UI 2 の Tooltip コンポーネント設計を実装解説。Popover との違い、アクセシビリティ配慮、コンテンツ設計のポイント、Fluent UI Blazor 5 との比較。
アコーディオンとタブは異なるARIAパターンであることを解説。コンポーネントライブラリが同じ実装方法で扱う誤りと、正しい実装の違いを紹介。
デザイン会社アンティー・グループがアクセシビリティを品質の中核に位置づけ、知的美的デザインの方法論を通じた実装事例と組織の思想について紹介している。
Fluent UI 2 の Toast を理解する — Dialog / Field / MessageBar との違い・アクセシビリティ・Fluent UI Blazor 5 比較 - Qiita
記事
Microsoft Fluent UI 2 デザインシステムの Toast コンポーネントについて、Dialog・MessageBar との違い、アクセシビリティ実装、Blazor 5 との互換性を詳解した技術記事。
Fluent UI 2 の Toolbar コンポーネントの用途と役割、AppBar/Nav との違い、実装上のアクセシビリティとコンテンツ設計について詳しく解説。
DESIGN.md のリンターが WCAG コントラスト基準をデフォルトで自動検証する設計。コンポーネントの色彩ペアリングの品質確保。
Microsoft Fluent UIデザインシステムの Text コンポーネント実装をアクセシビリティ基準と Blazor での活用の観点から解説する。
EU Accessibility Act（EAA）施行1年後の現状調査。コンポーネントライブラリのCI/CDに自動a11yテストが統合されているか、規制遵守の課題を検証。
Fluent UI 2のTag pickerコンポーネントのガイダンス・レイアウト・アクセシビリティ設計を解説。React v9とBlazer5での実装戦略の違いを比較。
Fluent UIのTagコンポーネント仕様とアクセシビリティ実装。Badgeとの設計的違いを説明し、React・Blazor両フレームワークでの実装方法を解説。
デザインシステム「Aegis」のアクセシビリティ試験結果公開のプロセス、試験方法、発見した課題と対策を解説した事例記事。
Fluent UI 2 の Tablist を理解する — Link / Button との違い、Fluent UI Blazor Tabs 比較、アクセシビリティとコンテンツ設計 - Qiita
記事
Fluent UI 2のTablistコンポーネントの設計解説。Link・Buttonとの役割分け、ARIA属性の使用、アクセシブルなナビゲーション実装方法を詳解する。
Fluent UIのSliderコンポーネント設計。キーボード操作やWAI-ARIAの実装、Inputとの使い分けを通じてアクセシブルなUI設計手法を解説。
Fluent UIのSearchboxコンポーネントについて、アクセシビリティ対応とコンテンツ設計の実装詳細を解説。Blazor 5との比較も含める。
Fluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。
Fluent UI 2 の Rating コンポーネント（評価UI）の設計思想とアクセシビリティ実装を、従来版との比較で解説。
デザインシステム Fluent UI の Persona コンポーネント実装。ユーザー情報の表示設計、レイアウト、アクセシビリティ要件、Blazor での使用方法を解説。
デザインシステム Fluent UI の MessageBar コンポーネント実装。状態通知の情報設計、アクセシビリティ要件、Blazor 5 との比較を解説。
Fluent UI 2のNavコンポーネントのガイダンス・動作・レイアウト・アクセシビリティ実装を詳解。Fluent UI Blazor 5との比較を交えながら、アクセシビリティを実装するためのポイントを提示。
Fluent UIのリンクコンポーネント設計を、支援技術での理解を重視しながらボタンとの区別も含めて解説。
Fluent UI 2のアイコンのセマンティック目的とアクセシビリティ対応について解説する技術記事。デザインシステムにおけるアクセシビリティの実装方法を論じている。
Fluent UI 2のImageコンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。
フレームワークに依存しないデザインシステムの構築。Web Componentsを用いて複数の環境下でアクセシビリティを保つ実装手法について解説している。
Shadcnの5種類のスライダーコンポーネントから、実装で選ぶべきアクセシブルで高性能なものを紹介。実装効率と品質を両立させるコンポーネント選定の考え方を解説する。
Figmaのデザイン変数を活用してフォントスケーリングをテストし、多様なユーザーニーズに対応したアクセシブルなデザインシステムの実装方法を解説する。
Fluent UI 2 の Breadcrumb コンポーネントのアクセシビリティ実装を、Fluent UI Blazor 5 との対応と情報設計の観点から解説。ナビゲーション要素の正しい ARIA 属性による構造化。
Fluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。
インクルーシブデザインを経営戦略に組み込む重要性を論じる。設計の上流段階でアクセシビリティを配慮することの効果を解説。
コントラスト不適合のWebサイトが70%に達する現状を背景に、contrast-color()CSS関数で自動調整するカラーシステムの構築手法を提示。設計者向けの実装ガイド。
Reactで一からアクセシブルなコンポーネントライブラリを構築した実装経験と教訓。WAI-ARIA活用によるデザインシステム設計。
医療・ヘルスケア領域向けのデザインシステム「beads」の設計思想を解説。患者や生活者の不安軽減と行動支援を重視した包括的なサービス設計を紹介している。
Studioフォント紹介LPを題材に、エディターで実際にサイトをアクセシブルにしていく手法をハンズオン形式で解説。
Fluent UI/Fluent 2 におけるデザイントークンの使い分け。raw値ではなくaliasトークンを使用することで、アクセシビリティ運用の効率化と色のWCAG準拠を強化する設計方法を解説する。
Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。
WCAG 2.1の基準と照らし合わせながら、Fluent UI 2のカラーコントラストと色使いのアクセシビリティ問題を整理。エラー表示や選択状態を色だけに依存しない設計を解説する。
Design systems can’t automate away all of your accessibility considerations :: Aaron Gustafson
記事 海外
デザインシステムの限界と、自動化では対応しきれないアクセシビリティ配慮の必要性を論じる。設計段階での人間的判断の重要性。
SaaS・AI開発のスピード重視の文化の中で、アクセシビリティを初期段階から優先設計する重要性と実装アプローチを解説する。
WCAG 2.2 AAを必須制約として設計に組み込むアーキテクチャ手法を、Reactコンポーネントライブラリの9事例から解説。コンプライアンス超の一流設計。
GovTech Tokyoがダッシュボード標準化に向けてコントラスト比やUX品質を確保した東京都版カラーパレット策定のプロセスを解説している。
CSSカスタムプロパティを活用してプリザンターv2テーマ全体の配色を動的に切り替える実装パターン。ハイコントラストモード等で視認性を高めるUI実装の手順をステップバイステップで解説。
APG Patterns Examples
記事 海外
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
デジタル庁が公開したデザインシステムβ版。UIコンポーネント・設計パターン・実装ガイドラインをアクセシビリティとユーザビリティを踏まえて提供。
WCAG 2.2の4原則と13ガイドラインを体系的に整理し、設計から実装・テストまでウェブアクセシビリティ対応を包括的に解説したガイドだ。
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
On Joining Khan Academy
記事 海外
Khan Academyに入社したアクセシビリティ専門家Marcy Suttonが、デザインシステムへのアクセシビリティ統合の方針と実践を解説している。
Figmaアノテーションを活用してデザイン段階でアクセシビリティ要件を組み込む「シフトレフト」アプローチを解説。手戻り削減と開発者への引き継ぎ改善を実現する実践方法を紹介。
デザインの初期段階からアクセシビリティを組み込む必要性と、企業の競争力向上への効果について解説する。
パンデミック下のオンライン教育環境で、WCAGとデザイン思考を応用した試験アプリケーションのアクセシブルなUI/UX設計手法について報告。
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
ニュージーランド政府Whaikahā（障害者省）が手話を組み込んだブランドアイデンティティ構築を通じて、アクセシビリティを設計戦略の中核に据えた事例を紹介する。
Design Button States for Accessibility
YouTube 海外
Figmaでボタンのデフォルト・ホバー・アクティブ・非アクティブの4状態を視覚的に識別可能にデザインする方法を紹介。Webアクセシビリティに配慮した設計手法を学べる。
デジタル庁デザインシステムを活用するウェブ開発で直面するアクセシビリティ課題と具体的な解決策を実例とともに解説する。
FigmaでDefault・Hover・Active・Inactiveのボタン状態をアクセシブルにデザインする方法をチュートリアル形式で解説した動画。
FlutterアプリのカラーデザインにWCAGコントラスト比基準を組み込む方法をテーマ設計からテスト実装まで解説している。
デザインシステム開発チームが実務の中で学んだアクセシビリティ実装の知見と、企業文化としてのアクセシビリティの取り組みを紹介する。
Figmaテンプレートから開発されたモバイルアプリケーションのアクセシビリティ準拠度を実証的に調査する論文。デザインツール段階での標準化とその実装品質の関連性を検証。
Enhancing Web Accessibility - Navigating the Upgrade of Design Systems from WCAG 2.0 to WCAG 2.1
論文 海外
デザインシステムをWCAG 2.0からWCAG 2.1へアップグレードする際の方法論と実装戦略を詳細に解説した研究論文。ウェブアクセシビリティ向上とインクルーシブなデジタル環境の実現を目指している。
WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。
Advancing Web Accessibility - A guide to transitioning Design Systems from WCAG 2.0 to WCAG 2.1
論文 海外
デザインシステムをWCAG 2.0からWCAG 2.1へ移行するプロセスを解説した研究。アクセシビリティ要件の段階的な更新手法を示す。
教育・医療・金融サービス等の分野で、エンタープライズウェブプラットフォームの開発時にアクセシビリティをビジネス要件の初期段階から組み込む、設計戦略を提示している。
freee が独自のデザインシステム「Vibes」を構築・運用する過程で、デザイナーとエンジニアの協業、UX 向上への取り組み、アクセシビリティ統合などについて論じた記事。
デジタル製品のインクルーシブデザインを解説した実践的技術書。できる限り多くのユーザーがアクセスできる製品設計の考え方と手法を体系的に示す。
Identifying Five Archetypes of Interaction Design Professionals and Their Universal Design Expertise
論文 海外
インタラクションデザイン専門家のユニバーサルデザイン知識レベルを5つのアーキタイプで分類。デジタル変革下での包括的なICT設計の課題と方向性を分析する。
ラジオボタンなどのUIコンポーネント設計を例に、ジェンダーダイバーシティや多様性を考慮した、より包括的で良いテクノロジーの設計哲学を論じる
インクルーシブデザインの実践書。ミスマッチから生まれるデザイン課題を解決し、あらゆる人が使えるエレガントなデザインを生み出す手法を支援者・デザイナー視点で体系的に解説する。
CSSの設計と実装をアクセシビリティ視点で解説。レイアウト・アーキテクチャを統合した実践的なCSS開発アプローチを提示する記事。
アクセシビリティとデザイン美学を両立させるカラー設計プロセスを解説。障害の有無に関わらず、すべてのユーザーに配慮した色使いの実践ガイド。
WCAGガイドラインをデジタル製品デザイナー向けにリファレンス化した実用マニュアル。デザインプロセスにおけるアクセシビリティ要件の実装方法を体系的に解説している。
アクセシビリティデザイン分野の700以上の用語を精密に定義した包括的な辞典。デザイナーや開発者向けの参考資料として活用できる。