Fluent UI 2のラジオボタンコンポーネントのアクセシビリティ実装とBlazor 5との比較・使い分けを解説。ラジオボタンの正しいa11y設計を学べる。
#デザインシステム
Fluent UI 2 の Rating コンポーネント（評価UI）の設計思想とアクセシビリティ実装を、従来版との比較で解説。
Designers are ahead of developers and content creators when it comes to accessibility. Here's why. なぜデザイナーはアクセシビリティで他の職種より先を行くのか
YouTube 海外
デザイナーがアクセシビリティ対応で開発者・コンテンツ制作者より進んでいる理由を解説。設計段階からのアクセシビリティ考慮の重要性と各職種の役割分担。
デザインシステム 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コンポーネントのアクセシビリティを含むレイアウト設計について解説する技術記事。支援技術への意味情報の伝達方法を論じている。
Framework-agnostic Design Systems: A Practical Approach to Web Components フレームワーク非依存デザインシステム：Web Componentsの実践的アプローチ
記事 海外
フレームワークに依存しないデザインシステムの構築。Web Componentsを用いて複数の環境下でアクセシビリティを保つ実装手法について解説している。
5 shadcn slider components that hold up in real dashboards, not just demos. Find accessible, performant picks that help your team ship faster with less custom code. 実装で使えるShadcn Sliderコンポーネント5選
記事 海外
Shadcnの5種類のスライダーコンポーネントから、実装で選ぶべきアクセシブルで高性能なものを紹介。実装効率と品質を両立させるコンポーネント選定の考え方を解説する。
Acessibilidade no Figma: Testar o Font Scaling com Variáveis (Accessibility in Figma: Testing Font Scaling with Variables) Figmaのアクセシビリティ：変数を使ったフォントスケーリングのテスト
イベント 海外 開催終了
Figmaのデザイン変数を活用してフォントスケーリングをテストし、多様なユーザーニーズに対応したアクセシブルなデザインシステムの実装方法を解説する。
Fluent UI 2 の Breadcrumb コンポーネントのアクセシビリティ実装を、Fluent UI Blazor 5 との対応と情報設計の観点から解説。ナビゲーション要素の正しい ARIA 属性による構造化。
Fluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。
インクルーシブデザインを経営戦略に組み込む重要性を論じる。設計の上流段階でアクセシビリティを配慮することの効果を解説。
Algorithmic Theming Engines: Building Self-Correcting Color Systems With contrast-color() — Smashing Magazine contrast-color()で実装する自動調整カラーシステム
記事 海外
コントラスト不適合のWebサイトが70%に達する現状を背景に、contrast-color()CSS関数で自動調整するカラーシステムの構築手法を提示。設計者向けの実装ガイド。
I Built an Accessible React Component Library from Scratch — Here's What I Learned ゼロからアクセシブルなReactコンポーネントライブラリを構築して学んだこと
記事 海外
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 デザインシステムはアクセシビリティのすべてを自動化できない
記事 海外
デザインシステムの限界と、自動化では対応しきれないアクセシビリティ配慮の必要性を論じる。設計段階での人間的判断の重要性。
AI支援開発でUIを高速化する際、色情報を除いた情報設計・構造検証の重要性をバイブコーディングの実例から論じる。
MCPについて、デジタル庁デザインシステムを題材にした実装例を通じて実践的に理解するための技術記事である。
Why Accessibility Comes First in SaaS & AI SaaS・AIでアクセシビリティを最優先にすべき理由
記事 海外
SaaS・AI開発のスピード重視の文化の中で、アクセシビリティを初期段階から優先設計する重要性と実装アプローチを解説する。
Accessibility-first looks different from accessibility-compliant アクセシビリティファーストはアクセシビリティ準拠とは異なる
記事 海外
WCAG 2.2 AAを必須制約として設計に組み込むアーキテクチャ手法を、Reactコンポーネントライブラリの9事例から解説。コンプライアンス超の一流設計。
GovTech Tokyoがダッシュボード標準化に向けてコントラスト比やUX品質を確保した東京都版カラーパレット策定のプロセスを解説している。
CSSカスタムプロパティを活用してプリザンターv2テーマ全体の配色を動的に切り替える実装パターン。ハイコントラストモード等で視認性を高めるUI実装の手順をステップバイステップで解説。
APG Patterns Examples APG パターン実装例集
記事 海外
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
デジタル庁が公開したデザインシステムβ版。UIコンポーネント・設計パターン・実装ガイドラインをアクセシビリティとユーザビリティを踏まえて提供。
WCAG 2.2の4原則と13ガイドラインを体系的に整理し、設計から実装・テストまでウェブアクセシビリティ対応を包括的に解説したガイドだ。
Accessibility Assistant for Figma v52 :: Aaron Gustafson Figma用Accessibility Assistant v52 :: Aaron Gustafson
記事 海外
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
On Joining Khan Academy Khan Academy入社にあたって
記事 海外
Khan Academyに入社したアクセシビリティ専門家Marcy Suttonが、デザインシステムへのアクセシビリティ統合の方針と実践を解説している。
Why Figma Annotations Are Critical for a Shift-Left Accessibility Approach • DigitalA11Y シフトレフトなa11yにFigmaアノテーションが欠かせない理由
記事 海外
Figmaアノテーションを活用してデザイン段階でアクセシビリティ要件を組み込む「シフトレフト」アプローチを解説。手戻り削減と開発者への引き継ぎ改善を実現する実践方法を紹介。
Embedding Accessibility in Design: The Early Planning Advantage デザインへのアクセシビリティ組み込み：早期計画の優位性
記事 海外
デザインの初期段階からアクセシビリティを組み込む必要性と、企業の競争力向上への効果について解説する。
Leveraging The Super Keyword In Custom Elements カスタム要素におけるsuperキーワードの活用
記事 海外
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
How To Dynamically Install Custom Elements カスタム要素を動的にインストールする方法
記事 海外
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
Fullscreen Video and Iframes Made Easy :: Aaron Gustafson フルスクリーン動画とiframeを手軽に実装する
記事 海外
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
Flipping the script When accessibility becomes your primary design strategy Stephen Reid 脚本を覆す — アクセシビリティを第一の設計戦略にするとき — Stephen Reid
YouTube 海外
ニュージーランド政府Whaikahā（障害者省）が手話を組み込んだブランドアイデンティティ構築を通じて、アクセシビリティを設計戦略の中核に据えた事例を紹介する。
Design Button States for Accessibility アクセシビリティのためのボタン状態のデザイン
YouTube 海外
Figmaでボタンのデフォルト・ホバー・アクティブ・非アクティブの4状態を視覚的に識別可能にデザインする方法を紹介。Webアクセシビリティに配慮した設計手法を学べる。
デジタル庁デザインシステムを活用するウェブ開発で直面するアクセシビリティ課題と具体的な解決策を実例とともに解説する。
How to Design Button States for Accessibility (Video Tutorial) アクセシビリティのためのボタン状態デザイン方法（動画チュートリアル）
YouTube 海外
FigmaでDefault・Hover・Active・Inactiveのボタン状態をアクセシブルにデザインする方法をチュートリアル形式で解説した動画。
FlutterアプリのカラーデザインにWCAGコントラスト比基準を組み込む方法をテーマ設計からテスト実装まで解説している。
デザインシステム開発チームが実務の中で学んだアクセシビリティ実装の知見と、企業文化としてのアクセシビリティの取り組みを紹介する。
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へ移行するガイド
論文 海外
デザインシステムをWCAG 2.0からWCAG 2.1へ移行するプロセスを解説した研究。アクセシビリティ要件の段階的な更新手法を示す。
Identifying Five Archetypes of Interaction Design Professionals and Their Universal Design Expertise インタラクションデザイン専門家とユニバーサルデザイン知識：5つのアーキタイプ分析
論文 海外
インタラクションデザイン専門家のユニバーサルデザイン知識レベルを5つのアーキタイプで分類。デジタル変革下での包括的なICT設計の課題と方向性を分析する。
Inclusive Design for a Digital World デジタル世界のためのインクルーシブデザイン
技術書 海外
デジタル製品のインクルーシブデザインを解説した実践的技術書。できる限り多くのユーザーがアクセスできる製品設計の考え方と手法を体系的に示す。
Radio buttons define us. Let’s make better tech ラジオボタンが私たちを定義する。より良いテックを作ろう
記事 海外
ラジオボタンなどのUIコンポーネント設計を例に、ジェンダーダイバーシティや多様性を考慮した、より包括的で良いテクノロジーの設計哲学を論じる
Mismatch, How inclusive methods can build elegant design solutions that work for all ミスマッチ――インクルーシブな手法があらゆる人に使えるエレガントなデザインを生み出す方法
実用書 海外
インクルーシブデザインの実践書。ミスマッチから生まれるデザイン課題を解決し、あらゆる人が使えるエレガントなデザインを生み出す手法を支援者・デザイナー視点で体系的に解説する。
Writing CSS with Accessibility in Mind - Manuel Matuzovic アクセシビリティを念頭に置いたCSSの執筆
記事 海外
CSSの設計と実装をアクセシビリティ視点で解説。レイアウト・アーキテクチャを統合した実践的なCSS開発アプローチを提示する記事。
Color Accessibility Workflows カラーアクセシビリティのワークフロー
技術書 海外
アクセシビリティとデザイン美学を両立させるカラー設計プロセスを解説。障害の有無に関わらず、すべてのユーザーに配慮した色使いの実践ガイド。
WCAG for Designers: Accessibility Reference Manual デザイナーのためのWCAG：アクセシビリティ参照マニュアル
実用書 海外
WCAGガイドラインをデジタル製品デザイナー向けにリファレンス化した実用マニュアル。デザインプロセスにおけるアクセシビリティ要件の実装方法を体系的に解説している。
The Glossary of Accessibility Design アクセシビリティデザイン用語集
技術書 海外
アクセシビリティデザイン分野の700以上の用語を精密に定義した包括的な辞典。デザイナーや開発者向けの参考資料として活用できる。