Figmaのデザイン変数を活用してフォントスケーリングをテストし、多様なユーザーニーズに対応したアクセシブルなデザインシステムの実装方法を解説する。
Fluent UI/Fluent 2 におけるデザイントークンの使い分け。raw値ではなくaliasトークンを使用することで、アクセシビリティ運用の効率化と色のWCAG準拠を強化する設計方法を解説する。
Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。
WCAG 2.1の基準と照らし合わせながら、Fluent UI 2のカラーコントラストと色使いのアクセシビリティ問題を整理。エラー表示や選択状態を色だけに依存しない設計を解説する。
デザインシステムの限界と、自動化では対応しきれないアクセシビリティ配慮の必要性を論じる。設計段階での人間的判断の重要性。
AI支援開発でUIを高速化する際、色情報を除いた情報設計・構造検証の重要性をバイブコーディングの実例から論じる。
MCPについて、デジタル庁デザインシステムを題材にした実装例を通じて実践的に理解するための技術記事である。
SaaS・AI開発のスピード重視の文化の中で、アクセシビリティを初期段階から優先設計する重要性と実装アプローチを解説する。
WCAG 2.2 AAを必須制約として設計に組み込むアーキテクチャ手法を、Reactコンポーネントライブラリの9事例から解説。コンプライアンス超の一流設計。
GovTech Tokyoがダッシュボード標準化に向けてコントラスト比やUX品質を確保した東京都版カラーパレット策定のプロセスを解説している。
デザイナーと開発者のコラボレーション戦略とアノテーション手法を通じ、アクセシブルな開発を実現するための実践的アプローチを解説した講演である。
CSSカスタムプロパティを活用してプリザンターv2テーマ全体の配色を動的に切り替える実装パターン。ハイコントラストモード等で視認性を高めるUI実装の手順をステップバイステップで解説。
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
デジタル庁が公開したデザインシステムβ版。UIコンポーネント・設計パターン・実装ガイドラインをアクセシビリティとユーザビリティを踏まえて提供。
デザイナーと開発者の協業によるマルチブランド対応のアクセシブルなデザインシステム構築の実践事例を紹介するA11yTalksセッション。
WCAG 2.2の4原則と13ガイドラインを体系的に整理し、設計から実装・テストまでウェブアクセシビリティ対応を包括的に解説したガイドだ。
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
Khan Academyに入社したアクセシビリティ専門家Marcy Suttonが、デザインシステムへのアクセシビリティ統合の方針と実践を解説している。
Figmaアノテーションを活用してデザイン段階でアクセシビリティ要件を組み込む「シフトレフト」アプローチを解説。手戻り削減と開発者への引き継ぎ改善を実現する実践方法を紹介。
デザインの初期段階からアクセシビリティを組み込む必要性と、企業の競争力向上への効果について解説する。
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
ニュージーランド政府Whaikahā（障害者省）が手話を組み込んだブランドアイデンティティ構築を通じて、アクセシビリティを設計戦略の中核に据えた事例を紹介する。
Figmaでボタンのデフォルト・ホバー・アクティブ・非アクティブの4状態を視覚的に識別可能にデザインする方法を紹介。Webアクセシビリティに配慮した設計手法を学べる。
デジタル庁デザインシステムを活用するウェブ開発で直面するアクセシビリティ課題と具体的な解決策を実例とともに解説する。
FigmaでDefault・Hover・Active・Inactiveのボタン状態をアクセシブルにデザインする方法をチュートリアル形式で解説した動画。
FlutterアプリのカラーデザインにWCAGコントラスト比基準を組み込む方法をテーマ設計からテスト実装まで解説している。
WebアプリケーションのアクセシビリティをHTMLとWAI-ARIAの基礎から実践的改善手法まで体系的に解説した技術書。フォーム・モーダル等の複雑なUIパターンへの対応と組織での推進ノウハウも網羅する。
デザインシステムをWCAG 2.0からWCAG 2.1へ移行するプロセスを解説した研究。アクセシビリティ要件の段階的な更新手法を示す。
デジタル製品のインクルーシブデザインを解説した実践的技術書。できる限り多くのユーザーがアクセスできる製品設計の考え方と手法を体系的に示す。
ラジオボタンなどのUIコンポーネント設計を例に、ジェンダーダイバーシティや多様性を考慮した、より包括的で良いテクノロジーの設計哲学を論じる
インクルーシブデザインの実践書。ミスマッチから生まれるデザイン課題を解決し、あらゆる人が使えるエレガントなデザインを生み出す手法を支援者・デザイナー視点で体系的に解説する。
CSSの設計と実装をアクセシビリティ視点で解説。レイアウト・アーキテクチャを統合した実践的なCSS開発アプローチを提示する記事。
アクセシビリティとデザイン美学を両立させるカラー設計プロセスを解説。障害の有無に関わらず、すべてのユーザーに配慮した色使いの実践ガイド。
WCAGガイドラインをデジタル製品デザイナー向けにリファレンス化した実用マニュアル。デザインプロセスにおけるアクセシビリティ要件の実装方法を体系的に解説している。
アクセシビリティデザイン分野の700以上の用語を精密に定義した包括的な辞典。デザイナーや開発者向けの参考資料として活用できる。
