UDフォント(ユニバーサルデザインフォント)をWebサイトやアプリに正しく実装するための実践ガイド。2024年4月の改正障害者差別解消法対応、視覚特性や年齢に関わらない読みやすさの設計ポイント、WCAGのコントラスト基準やレスポンシブ設計の注意点を解説する。
シェアックリップ
シェアされたアックリップです。
そのほかの #カラーコントラスト ピックアップ
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
AIと自動検査ツールを使ってWebページのアクセシビリティを検査する方法を、実装例で解説。WCAG 2.2に基づく6項目(色のコントラスト、代替テキスト、ボタンサイズ、幅320での表示、動き設定の尊重)の検査スクリプトとコマンド例を提示。自動検査の限界(説明文の内容評価、ボタン間隔)についても述べる。
WCAG 2.1のコントラスト比判定を相対輝度から計算し、5つの基準(AA/AAA通常文字/大文字、UI要素)に対応するTypeScriptの実装方法を解説。背景色に応じた合格色の自動提案アルゴリズムも含む。
WCAG 2.1のコントラスト比判定アルゴリズムを実装する方法を解説。相対輝度の計算、複数の達成基準の同時判定、不合格時の色の自動提案を扱う。
色覚の多様性とカラーコントラスト。WCAG AA基準に沿った実装例と、テストの手法を示す。
ページ公開前のアクセシビリティレビューで、実装チェックではなく人が測定したカラーコントラストペアを記録し、代替テキスト出典とキーボード動線の確認が無い場合は公開を止める判定プロセスを解説。
そのほかの #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 の達成基準を参考に改善方法を示す。
そのほかの #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『一貫したナビゲーション』について、デザイナー・コーダー両方の視点から解説。サイト内の共通メニューの並び順を統一する必要性と実装方法。
そのほかの #法律・制度 ピックアップ
障害のある子どもを含むすべての子どもが学べる学校作りのため、基礎的環境整備と合理的配慮の実践を公立学校の事例から学ぶ。教師の視点から多様性の包摂に向き合う
(引用)2007年に特別支援教育が法制化され、8年が経過しました。その間2012年には中央教育審議会から「共生社会の形成に向けたインクルーシブ教育システム構築のための特別支援教育の推進」の報告が出され、2016年4月1日には、いわゆる「障害者差別解消法」が施行されます。このような状況下、学校現場では、具体的にどのようにインクルーシブ教育を進めていけばいいのでしょうか。この難しくも希望のある問いに、編集代表…
(引用)障害者の暮らしはどう変わったか…自立生活センター活動の現場から考える。
改正JIS X 8341-3とWCAG 2.1・2.2の追加基準26個を、アクセシビリティエキスパートが全3回で徹底解説するウェビナー。第2回は操作可能の達成基準を扱う。
EU域内でWebサービス・アプリを提供する企業が対応すべきアクセシビリティ関連法制(EAA・WAD・雇用平等指令)と、WCAG基づく実装方法、EU主要国の罰則・執行事例を解説。AI画面開発におけるアクセシビリティ要件化の必要性も論じる。
エンターテインメント企業の職員と視覚障害・聴覚障害のある人が参加したグループインタビュー。同じ障害でも必要な配慮は個別的であること、告知段階の情報が参加判断を左右すること、事業者との建設的な対話の重要性を学ぶ。
そのほかの #色覚多様性 ピックアップ
色画用紙から考える、ものづくりとCUD
色画用紙を例にしたカラーユニバーサルデザイン学習会。大王製紙との対話を通じ、ものづくりとCUDの関係を考えるオンラインイベント。
UI・UX・CX・HCD・UD・アクセシビリティといった関連用語40個を5つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
色覚の多様性とカラーコントラスト。WCAG AA基準に沿った実装例と、テストの手法を示す。
加齢で水晶体が短波長の光を通しにくくなり、青系の色の見分けやすさに影響が出る仕組みを科学的に解説。色の違いが常に同じように見えるとは限らないこと、デザイン時は色以外の手がかりの必要性を指摘。
色による情報の区別に問題を指摘。満席・エラー・必須など、色だけでなく文字や形でも意味を伝えるデザイン方法を、告知画像・図表・フォームの例で解説する。
色覚多様性のある人のためのデザイン。色の見分けにくさがアクセシビリティに与える影響と対策を解説する。