デジタル庁デザインシステムの活用方法。「見やすくする」がコントラスト比などで具体的に定義でき、入力欄設計やエラーメッセージの扱いまで実装レベルでガイドされる。Figma・HTML・React サンプルも提供される、組織で共有できる設計資料。
シェアックリップ
シェアされたアックリップです。
そのほかの #デザインシステム ピックアップ
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 変数削除やクラス名変更などの変更点をまとめた。
そのほかの #UXデザイン ピックアップ
Kyoto UI自由研究室 #1 (2026/11/13 19:00〜)
イベント 開催予定
UI・UX・アクセシビリティに関する気づきや試験を持ち寄る勉強会。完成度不問で、途中経過や失敗事例の共有も歓迎する。
The Design + Accessibility Summit
イベント 海外 開催予定
デザイン専門家向けのオンラインサミット（第7回）。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
「誰もどれも取り残さない」は、どうつくる？｜PROJECT SOLITの実践
イベント 開催予定
ファッションを起点にインクルーシブデザインを実践する PROJECT SOLIT の代表による、社会の在り方を問い直すセッション。属性やカテゴリーではなく、人間の多元性から考えるアプローチと企業との共創事例を紹介。
インクルーシブデザインでつくる海に親しむあそびづくり
イベント 開催予定
インクルーシブデザインの手法を用いて、海に親しむ遊びを制作するワークショップ。参加者が遊びのデザイナーとなり、工作を通じて多様な身体への配慮を学ぶ。
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
WCAG 2.2達成基準3.2.3『一貫したナビゲーション』について、デザイナー・コーダー両方の視点から解説。サイト内の共通メニューの並び順を統一する必要性と実装方法。
そのほかの #WCAG ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、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画面開発におけるアクセシビリティ要件化の必要性も論じる。
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
そのほかの #Figma ピックアップ
ウェブサイト再デザイン過程で、Figmaの設計段階からアクセシビリティ要件を組み込み、デザイン時のアクセシビリティレビュー方法を詳しく解説する。
FigmaのAIアクセシビリティチェッカーが検出する6項目を、JIS X 8341-3（WCAG 2.0）の達成基準と比較分析。デザイン段階での検出の有用性と実装後の試験が必要な項目を整理。
WCAGで定義されるコントラスト比の計算方法と、デザインレビューで見落とされやすい3つの罠（グレー本文・背景色上の文字・プレースホルダ）を技術的に解説。
日本の企業・行政が公開している12のデザインシステムを、構築方針・アクセシビリティ・実装方法で分類・紹介。これからUI規則を整える組織向けの参考ガイド。
Customize a Venngage Accessible Template
YouTube 海外
Venngageのアクセシブルテンプレートライブラリの使用方法と、テンプレート選択から編集・カスタマイズまでの手順をチュートリアル形式で紹介。
Figmaのコントラスト検査機能での一般的な誤りと落とし穴。WCAG 2.2やJIS X 8341-3の実務を踏まえ、正しい検査方法と設定の注意点を解説する。
そのほかの #ガイドライン ピックアップ
ユニバーサルイベント検定に向けた対策問題集。アクセシビリティ・コミュニケーション・オペレーション・サステナビリティの5章から300問を収録し、全問に正解・ポイント・参照元を掲載する。
デジタル庁ガイドブック第3章「非干渉」基準を解説。自動再生音声の制御、キーボードトラップ回避、光の点滅制限、自動コンテンツ切り替え禁止の4つの基準について、リリース前に必ず対応する必要性と改修方法を述べる。
企業の複数 Web サイトのガバナンス診断方法論。外形診断とヒアリングの 2 層アプローチ、計測・個人情報・アクセシビリティなど 6 つの診断観点、見えない統制を「なし」と誤報告しない所見の書き方を解説。
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
ウェブアクセシビリティを始める人向けの書籍を、初学者向けから実装・テスト・インクルーシブデザインまで段階別に体系的に紹介。各書籍の特徴・対象読者・媒体情報を解説し、個人での開始にも組織導入にも対応できるリソース紹介。
ブログに掲載する表の設計方法を解説する。W3C WAIのガイドラインに基づき、行と列の見出しを明確に決めることで、セルの意味が自明になる表を作成する方法を述べる。AIへの依頼文とチェックリスト付き。