UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
#デザインシステム
「デザインシステム」に関するアクセシビリティ関連情報を自動収集して掲載しています。
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
色調パレットをアクセシビリティ規則に基づいて自動修正するエンジンの実装。WCAG対比率を満たすよう色を調整し、OKLCH色空間を使って知覚的な色合い変化を最小限に抑える。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
プロジェクト管理ツール Pleasanter の 2027 年 1 月予定の UI テーマ改善について、CSS 変数削除やクラス名変更などの変更点をまとめた。
デザインシステムの配色監査を支援するツール。複数色の組み合わせをすべて表行列で可視化し、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認定を紹介。
エンジニア向けのUI/UX理論。フィッツの法則・ヒックの法則など認知心理学に基づき、WCAG・Apple HIG・Material Design といった国際標準を実装レベルで解説。タップターゲットサイズ、視覚的階層、アラート疲労対策など実践的テクニック。
フォーカス管理やコントラスト改善など、プラットフォームのアクセシビリティ向上事例と、入稿コンテンツをAIと人が協力してチェックする取り組みを紹介する。
デザインシステムにおけるキーボードフォーカス管理の実装方法を解説する。モーダルやポップオーバーでのフォーカストラップ、フォーカス喪失、ネストされたコンポーネントでのフォーカス管理など、複雑な UI でよくあるバグと回避方法を紹介。
SEO対策のために sr-only と aria-hidden を組み合わせてしまい、結果的に誰にも読めないテキストになった事例と、その修正方法を解説。2つの属性の役割を明確にしながら、アクセシビリティと SEO は対立せず、テキストを可視化することで両立できることを示す。
Webデザインの「違和感」を分解するガイド。余白・文字・色・操作性など、よく言われるデザイン常識について根拠・条件・例外を図解で整理し、表面的なルール遵守ではなくデザイン判断の解像度を上げることを目指す。
Leonie Theißen / Beyond ticking boxes - How to build an inclusive image language #id24 2026
YouTube 海外
ブランドのイメージ戦略をインクルーシブに構築する方法。多様性のトークン化を避けた、自然で包括的な画像選択のコツを、ブランドデザイナーの視点から解説する。
アクセシビリティを日常のデザイン習慣に組み込むための、入門的で実践的なアプローチを紹介。
DOMの抽象化・コンポーネント化が見出しレベルなどの非ビジュアル情報を隠蔽し、スクリーンリーダーユーザーに不正確な見出し階層を提供する問題を解説。コンポーネント設計とアクセシビリティのジレンマについて。
インクルーシブデザインとユニバーサルデザインの違いについて、20人の実践者との対話から解説。「障害のある人のために」から「障害のある人と一緒に」へのアプローチの転換、困りごと解決から新しい価値創出への視点。
株式会社トルクの社内勉強会「ブランディングデー」の取り組み紹介。デザインシステム Material Design 3 を輪読し、カラーシステムのアクセシビリティ設計（トーン管理によるコントラスト比の自動確保）について学ぶプロセスを通じて、アクセシビリティはデザインの後付けではなく設計に組み込まれるべきことを実感した事例。
海外の政府・民間企業が構築したデザインシステムの事例を紹介。各地域の文化や法規制、アクセシビリティ基準への対応、デジタル社会への適応などの特徴を解説する。
JavaScript チャートライブラリの代替として、CSS ネイティブなチャート実装 3 つ（Charts.css、ProvChart、FSCSS）を比較。各々の特性、ユースケース、使い分けを解説。
Reactコンポーネントを別プロジェクトで再利用する際、スキップリンクと見出しのアクセシビリティ関係が壊れる問題を取り上げ。コンポーネント間の契約を明示的に定義することで異なる構成モデル下でもアクセシビリティを保つ設計方法を解説。
WCAGなどのガイドラインは要件を示すが、複雑なコンポーネントの具体的な操作パターンは決まらない。デザインシステムがその間隙を埋め、アクセシビリティを最初の設計に組み込む重要性を、Fluent UIの事例から考察。
CSSの単位pxとremの違いと使い分けを解説。remをfont-sizeに使うと、ユーザーのブラウザ設定に連動しやすく、アクセシビリティ対応につながる。レスポンシブ対応やデザインシステム構築での実践的な活用法も紹介。
WCAGで定義されるコントラスト比の計算方法と、デザインレビューで見落とされやすい3つの罠（グレー本文・背景色上の文字・プレースホルダ）を技術的に解説。
見えにくい・読みにくいという困りごとを解決するデザインをテーマに、著者の間嶋沙知さんをゲストに迎え、Studioを活用したアクセシビリティ対応の実践方法を紹介する。
AIエージェントが生成したコンポーネント状態をデザインシステムに導入する前に、タブ順序とフォーカス可視化の証拠を確保すべき。キーボードユーザーの操作経路を明示的に検証するプロトコルを提示する。
デザインシステムが「見た目」を定義するなら、Web HIG は UI の「動作仕様」を定義する。バージョン管理されたルールセット（HIG-A11Y-003 など）で WCAG を補完し、AI エージェント・CI・人間が同じ基準で検証する。
Map Paragraph Styles to PDF Tags in InDesign
YouTube 海外
InDesignで段落スタイルをPDFタグにマッピングする方法を解説。アクセシビリティタグ設定の一般的な誤りを回避し、PDF生成時にアクセシビリティを確保する実装を示す。
FluentUIBlazorvr5のFieldコンポーネントがフォームのアクセシビリティを確保する仕組みをソースコード解析から詳説。ラベル関連付け・ARIA・シャドウDOMまでWCAG2.1達成基準との対応を明示する。
InDesignのアクセシビリティ上の制限とPDF変換時の問題について、専門家が技術的な課題と対応方法を解説する動画。
Fluent UI Blazor v5 のデザイントークン仕組みを解説。ブランド色からカラーパレット生成、ライト／ダークテーマでの WCAG 2.1 AA コントラスト保証、意味トークンへの変換をソースコード解析で説明。アプリケーション側の確認責任も整理。
Tailwind CSS の Preflight がタグの既定スタイルを削除する設計意図を解説。タイプスケール維持と意識的なスタイリング強制が目的。リストの list-style: none がVoiceOver のアクセシビリティに影響することを注記。
日本の企業・行政が公開している12のデザインシステムを、構築方針・アクセシビリティ・実装方法で分類・紹介。これからUI規則を整える組織向けの参考ガイド。
CSS の contrast-color() 関数がすべてのブラウザで利用可能になり、背景色に応じて自動的に視認性の高いテキスト色を選択できるように。設計システムの運用負荷が軽減される。
デジタル庁のデザインシステム（DADS）を検討したUI/UXデザイナーの経験記。DADSの『誰一人取り残さない』設計思想を評価しながら、Webサービスと公共デジタルサービスの用途・利用者層の違いに応じた設計方針の相違を考察。
Test your custom elements and trust the results with Axe-core's support for ElementInternals - Deque
記事 海外
複数フレームワークで動作するコンポーネント標準化の課題を、Custom elements と ElementInternals で解決し、ARIA に頼らずアクセシビリティを実現する方法を解説。Axe-core のテスト対応も含む。
デジタル庁の生成AIアプリ「源内Web」で実施したアクセシビリティ改修の解説。AIの回答生成やエージェントの進捗をスクリーンリーダーにどう伝えるか、フォーカス移動とライブリージョンの使い分けを実装例とともに示す。
Adobe InDesignのワークフローにアクセシビリティを組み込む方法を詳解。段落スタイル・見出し構造・読み順・テーブル・色コントラストの設定からタグ付きPDFエクスポートまで、設計段階での実装ポイントと自動化の限界を扱う。
デジタル庁が公開したダッシュボードデザインガイドブックとPower BIテンプレート。43種類のビジュアル設定が初期値として『望ましい表現』を組み込んでいる点が特徴。7色パレット・役割定義・コントラスト比要件と代替手段・グラフ設計原則10項目・チェックリスト27項目を備える。
アクセシビリティ監査レポートから実装への転換。問題の「症状」と「発生源」を区別し、根本的な修復とは症状を生み出すシステム（コンポーネント・テンプレート・設計）を修正することを強調。技術債を増やさない修復戦略を解説。
色の調和を効率的に選択・探索できるカラーパレット生成ツール。デザイナーと開発者向けの無料オフラインアプリケーション
Ionic Framework 9のリリースに伴う主要な変更5つを紹介。Selectのリッチコンテンツ対応、Font Icon対応、HTMLネイティブ要素への移行など、コンポーネント拡張とアクセシビリティの向上を図った。
Venngage のアクセシブルテンプレートを選択してエディタで開き、サンプルコンテンツを自分のテキストと情報に置き換える使い方を解説。
読みやすさを追求する書体デザイナー・高田裕美の著作紹介。誰もが読める文字をデザインする実践を通じ、フォント・級数・色選択などで包括的なアクセシビリティを実現する方法を学ぶ。
UI要素・コンポーネントの名前・役割・実装コードが分かるビジュアル辞書。デザイナーとデベロッパーが一貫した用語で対話するための参考リソース。
30のウェブサイトを40項目のアクセシビリティ基準でスコアリング。業界全体のアクセシビリティ水準の実態を調査・報告する。
シンプルなトースト通知コンポーネント開発を起点に、tatami-a11yというアクセシビリティシステム全体へと発展させた実装例と設計思想を解説する。
2026年7月のSmartHRアクセシビリティ月報 〜Design System のコンポーネントページにアクセシビリティ情報を追加する取り組みについて〜｜SmartHR ACCESSIBILITY
記事
SmartHRのアクセシビリティ部による月報。Design Systemのコンポーネントページへのアクセシビリティ情報追加、JIS X 8341-3準拠テストの進捗を報告する企業のアクセシビリティ取り組み事例。
デザインシステムの色変数の不具合が原因で生じた33件のカラーコントラスト違反を解決した事例。WCAG準拠テストの重要性を紹介。
（引用）オブジェクト指向ユーザーインターフェース（OOUI）とは、オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて、画面数が減って作業効率が高まり、また開発効率や拡張性も向上する、いわば「銀の弾丸」的な効果を持ちます。ブログや雑誌記事などで大きな反響を得たこの設計手法について、前半部では理論やプロセスを詳説。そして後半部の「ワークアウト（実践演習）…
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種類のスライダーコンポーネントから、実装で選ぶべきアクセシブルで高性能なものを紹介。実装効率と品質を両立させるコンポーネント選定の考え方を解説する。
Vetting the Tech: How to Audit Component Libraries and Request Remediations| Accessible Web Webinar
YouTube 海外
コンポーネントライブラリ採用時にアクセシビリティを監査・検証する方法と戦略について解説。
Figmaのデザイン変数を活用してフォントスケーリングをテストし、多様なユーザーニーズに対応したアクセシブルなデザインシステムの実装方法を解説する。
Fluent UI 2 の Breadcrumb コンポーネントのアクセシビリティ実装を、Fluent UI Blazor 5 との対応と情報設計の観点から解説。ナビゲーション要素の正しい ARIA 属性による構造化。
Fluent UI 2 の Accordion コンポーネントの情報設計とアクセシビリティ実装ガイド。大量の情報を扱うUIで認知負荷を下げるための設計手法。
インクルーシブデザインを経営戦略に組み込む重要性を論じる。設計の上流段階でアクセシビリティを配慮することの効果を解説。
コントラスト不適合のWebサイトが70%に達する現状を背景に、contrast-color()CSS関数で自動調整するカラーシステムの構築手法を提示。設計者向けの実装ガイド。
Reactで一からアクセシブルなコンポーネントライブラリを構築した実装経験と教訓。WAI-ARIA活用によるデザインシステム設計。
ウェブサイトビルダー（Squarespace、Wix、WordPress など）がアクセシビリティをどこまで自動対応し、どこで開発者が責任を持つ必要があるかを実務的に解説。
医療・ヘルスケア領域向けのデザインシステム「beads」の設計思想を解説。患者や生活者の不安軽減と行動支援を重視した包括的なサービス設計を紹介している。
Accessible Packaging: The Industry Speaks
YouTube 海外
製品パッケージのインクルーシブデザインに関するガイドとツールキットおよび業界における実装事例を紹介する。
Canva Accessibility in 2026
YouTube 海外
Canvaの新しいアクセシビリティ機能を紹介。2026年に実装された機能により、デザイナーがより包括的なデザインワークフローを実現できるようになった。
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実装の手順をステップバイステップで解説。
レスポンシブウェブデザイン実装時に注意すべきアクセシビリティの考慮点を、WCAG達成基準に基づいて解説。
APG Patterns Examples
記事 海外
WAI-ARIA APGのデザインパターンをReact・Vue・Svelte・Astroで実装したアクセシブルコンポーネントの実例集だ。
Accessibility Checkerプラグインの大規模UIリニューアルを題材に、アクセシビリティ基準の遵守とブランドアイデンティティ、プラットフォーム一貫性のバランスについて議論する。
デジタル庁が公開したデザインシステムβ版。UIコンポーネント・設計パターン・実装ガイドラインをアクセシビリティとユーザビリティを踏まえて提供。
デザイナーと開発者がマルチブランドデザインシステム構築時にアクセシビリティを中心に置いた方法を解説。カラーコントラストと適応型コンポーネントの事例を紹介。
WCAG 2.2の4原則と13ガイドラインを体系的に整理し、設計から実装・テストまでウェブアクセシビリティ対応を包括的に解説したガイドだ。
FigmaのアクセシビリティアシスタントがWAI-ARIAロール拡張・アノテーション刷新・UI統合を含むv52へアップデート。デザイン段階での検証精度が向上し、アクセシビリティシフトレフトが実現した。
Claude Codeへのアクセシビリティ指示の有無がデザインシステムの実装品質に与える影響をLighthouseスコアで計測・比較した実践検証記事。
Salesforceでの技術プログラムリーダーへのインタビュー。大規模組織がアクセシビリティをプロダクト開発に統合し、スケール化する戦略を解説。中央集約的な標準設定と分散的な専門性拡大の組み合わせ方法を紹介。
Figmaアノテーションを活用してデザイン段階でアクセシビリティ要件を組み込む「シフトレフト」アプローチを解説。手戻り削減と開発者への引き継ぎ改善を実現する実践方法を紹介。
On Joining Khan Academy
記事 海外
Khan Academyに入社したアクセシビリティ専門家Marcy Suttonが、デザインシステムへのアクセシビリティ統合の方針と実践を解説している。
デザインの初期段階からアクセシビリティを組み込む必要性と、企業の競争力向上への効果について解説する。
パンデミック下のオンライン教育環境で、WCAGとデザイン思考を応用した試験アプリケーションのアクセシブルなUI/UX設計手法について報告。
Figmaを用いてデザイナーとエンジニアが協働し、効率的なコラボレーションとデザインシステムの構築方法を実践的に解説する。
アクセシビリティ専門家Heydon Pickeringによる、カスタム要素継承パターンを活用した再利用可能でアクセシブルなWeb Components構築方法の解説。
Web Componentsのカスタム要素を動的に読み込むアクセシブルな実装パターン。再利用可能な手法を解説する。
動画やiframe要素のフルスクリーン化をアクセシブルに実装するWeb Componentパターン。フォーカス管理を両立する手法を紹介する。
家具・文具メーカーのコクヨが実践するインクルーシブデザインの取り組み。HOWS DESIGN マーク基準とリードユーザーとの協働プロセスを通じた製品開発事例から、企業における包括的な設計の重要性を探究する。
ニュージーランド政府Whaikahā（障害者省）が手話を組み込んだブランドアイデンティティ構築を通じて、アクセシビリティを設計戦略の中核に据えた事例を紹介する。
遠隔地や困難な状況にある人々など、従来デザインプロセスから除外されてきたコミュニティを設計に組み込むための応用研究と、倫理的で包括的なデジタルサービス構築のフレームワーク。
React、Vue、MUIなどのコンポーネントライブラリを使うモダンな開発環境でのアクセシビリティ実装を解説。セマンティックHTMLから遠ざかった現代的なUIフレームワークの中で、複雑なコンポーネントをアクセシブルにする方法を扱う。
デザインプラットフォーム企業がアクセシビリティを組み込んだ事例と、AIを活用するときの課題・対策をCEOが語るインタビュー。
デジタルアクセシビリティ実現の実践的戦略を、Figmaを活用した具体例で解説する。色コントラスト確保、色に依存しない設計検証、読み順の明確化、説明的なリンクテキスト作成など、クリエイティビティと利用可能性を両立させた設計手法が主題。
But…Why? With Melanie Sumner | Axe-con 2025
YouTube 海外
デザインシステムのコンポーネント構造がアクセシビリティに与える影響を解説。一般的なUIパターンで見落とされるアクセシビリティの実装要件を紹介する。
視覚的なストーリーテリングにアクセシビリティを組み込む設計手法について、デザイナー Rochelle Ratkaj Moser が解説。alt テキスト、見出し構造、セマンティック構造といった基本的な実装から認知アクセシビリティ、アクセシビリティと SEO の関連性まで、ブランド価値と実用性の両面から実践的なアプローチを提唱する。
Google Docsがタグ付きPDF出力機能を搭載。この機能の動作と重要性、アクセシビリティ重視のインフォグラフィック・チャート作成ツール Venngage との比較を解説している。
Design Button States for Accessibility
YouTube 海外
ボタンの Default, Hover, Active, Inactive 状態を視覚的に明確に区別するアクセシビリティ設計。Figma での実装方法をビデオで紹介。
デジタル庁デザインシステムを活用するウェブ開発で直面するアクセシビリティ課題と具体的な解決策を実例とともに解説する。
Neuroinclusive Content Design | Axe-con 2024
YouTube 海外
発達特性や神経多様性のある人も含めたコンテンツデザインの方法論。シンプルさ・明確さ・一貫性などの原則を使い、認知的負荷を管理し感覚的配慮を実現するテクニックを解説する。
デザインシステムとコンポーネントライブラリのアクセシビリティ構築方法を、Deque の Cauldron React 開発の事例で解説。axe DevTools Linter による開発者のアクセシブルな利用確保も紹介する。
Does your design conform with WCAG accessibility guidelines — or does it comply | Axe-con 2024
YouTube 海外
アクセシビリティのコンフォーマンスとコンプライアンスの違いを論じ、単なる法令遵守を超えた設計のあり方を提案。Pinterestでの実例を通じて、ビジネス要件とのバランスを取るフレームワークについて解説する。
デジタルアクセシビリティテストを効率化するため、axe ツールセットを活用した自動化戦略と手動テストのバランスを解説。デザイン段階から開発・監査まで、agile サイクル全体でのテスト実装を示す。
WCAG 3で導入予定のAPCA（Advanced Perceptual Contrast Algorithm）を解説。色とタイポグラフィのアプローチの変化がデザインに与える影響と、設計者の準備について。
ノーコードWebデザインツール「Studio」を用いたWebアクセシビリティ対応の基本概念と実装手法。
デザインシステムのコンポーネントを『Accessibility Ready』な状態で提供するための方法論。ガイダンス文書の作成、最小要件と品質要件、ドキュメント管理のポイントを解説する。
Jan Maarten and Daniel Henderson-Ede / Accessibility Annotations Around the World #id24 2025
YouTube 海外
世界中のデザイン・チームがアクセシビリティ・アノテーション・キットをどう活用するか。共通キットを独自のワークフローと目標に合わせて適応させる方法、課題、創意工夫を実例で紹介。
Sam Kuo and Jo Chang / Digital Accessibility in Taiwan: How a Community Drives Change #id24 2025
YouTube 海外
台湾のグラスルーツコミュニティ Coseeing が、デジタルアクセシビリティを後付けではなく核となる価値として定着させるための活動を紹介。プロダクトデザイナー2人が、実践的な知識共有、ツール開発、ワークショップを通じた包括的な設計について語る。
インクルーシブデザインの実践例。視覚障害のある開発者チームに見える開発者が参加したアクセシブルなマッピングソフト『Audiom』の開発経験から、包括的な設計とダイバースな組成の重要性を論じる。
アクセシビリティをデザイン段階から統合するための実践的なフレームワークの紹介。デザイナーが既存のワークフローに無理なくアクセシビリティを組み込む方法を、「Add to Cart」ボタンの実装例で示す。
電通デジタルと国内電通グループが共同制作した『みんなのコミュニケーションデザインガイド』を紹介するGAAD Japan 2025でのセッション映像。誰もが参加できるコミュニケーションを目指すデザインガイドについて。
InDesign・Acrobat・PowerPoint・Word等のデザインツールでのアクセシビリティ実装を学ぶオンラインサミット（2025年9月16-19日）。業界専門家による段階的な実践トレーニング。
FlutterアプリのカラーデザインにWCAGコントラスト比基準を組み込む方法をテーマ設計からテスト実装まで解説している。
社会的VRにおけるアバターデザインの包括的なガイドライン。障害者の身体表現を外観・動き・補助技術・周辺機器・カスタマイズの5つの側面から検討し、アバターインターフェースの設計を改善するための17の設計ガイドラインを提示する。
デザインシステム開発チームが実務の中で学んだアクセシビリティ実装の知見と、企業文化としてのアクセシビリティの取り組みを紹介する。
Enhancing Web Accessibility - Navigating the Upgrade of Design Systems from WCAG 2.0 to WCAG 2.1
論文 海外
デザインシステムをWCAG 2.0からWCAG 2.1へアップグレードする際の方法論と実装戦略を詳細に解説した研究論文。ウェブアクセシビリティ向上とインクルーシブなデジタル環境の実現を目指している。
Figmaテンプレートから開発されたモバイルアプリケーションのアクセシビリティ準拠度を実証的に調査する論文。デザインツール段階での標準化とその実装品質の関連性を検証。
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へ移行するプロセスを解説した研究。アクセシビリティ要件の段階的な更新手法を示す。
60のエンタープラットフォーム対象の比較研究。アクセシビリティファースト設計システムはWCAG 2.1準拠率91.8%（従来型74.6%）を達成。アクセシブルコンポーネント再利用とデザイントークン標準化の効果を定量化。
教育・医療・金融サービス等の分野で、エンタープライズウェブプラットフォームの開発時にアクセシビリティをビジネス要件の初期段階から組み込む、設計戦略を提示している。
freee が独自のデザインシステム「Vibes」を構築・運用する過程で、デザイナーとエンジニアの協業、UX 向上への取り組み、アクセシビリティ統合などについて論じた記事。
デジタル製品のインクルーシブデザインを解説した実践的技術書。できる限り多くのユーザーがアクセスできる製品設計の考え方と手法を体系的に示す。
Identifying Five Archetypes of Interaction Design Professionals and Their Universal Design Expertise
論文 海外
インタラクションデザイン専門家のユニバーサルデザイン知識レベルを5つのアーキタイプで分類。デジタル変革下での包括的なICT設計の課題と方向性を分析する。
インクルーシブデザインの実践書。ミスマッチから生まれるデザイン課題を解決し、あらゆる人が使えるエレガントなデザインを生み出す手法を支援者・デザイナー視点で体系的に解説する。
CSSの設計と実装をアクセシビリティ視点で解説。レイアウト・アーキテクチャを統合した実践的なCSS開発アプローチを提示する記事。
アクセシビリティとデザイン美学を両立させるカラー設計プロセスを解説。障害の有無に関わらず、すべてのユーザーに配慮した色使いの実践ガイド。
WCAGガイドラインをデジタル製品デザイナー向けにリファレンス化した実用マニュアル。デザインプロセスにおけるアクセシビリティ要件の実装方法を体系的に解説している。
アクセシビリティデザイン分野の700以上の用語を精密に定義した包括的な辞典。デザイナーや開発者向けの参考資料として活用できる。