prefers-reduced-motion・prefers-color-scheme・prefers-contrast・forced-colors CSS メディアクエリを使い、JavaScriptなしでユーザーの支援技術・設定に対応したアクセシブルな体験を実装する方法。
シェアックリップ
シェアされたアックリップです。
そのほかの #UXデザイン ピックアップ
The Design + Accessibility Summit
デザイン専門家向けのオンラインサミット(第7回)。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
エシカルデザインの手法をインクルーシブ・アクティビティ・カードを使ったワークショップ。
非エンジニアがClaudeとGeminiを併用してWebアプリ開発した実践プロンプト集。アクセシビリティ要件の初期組み込みから、UI/UX調整、視認性強化、トラブル対処まで、実装プロセスと試行錯誤を解説。
CSS のネイティブ相対色構文(oklch、color-mix)を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
長文記事にナビゲーション機能を加える際、本文へのアクセスを阻害しない設計原則。キーボード操作・スクリーンリーダー対応・フォーカス表示など複数の利用方法を前提とした実装パターンと確認方法を解説している。
親が1人で車椅子ユーザーの子どもを雨の中で乗せるときの身体的負担を7場面に分けて可視化。カバーの着脱と安全な乗せ下ろしが同時に必要な課題を指摘し、設計改善の方向を提案。
そのほかの #認知アクセシビリティ ピックアップ
かんかくかびんってなあに?
身体に触れるモノの感触への過敏を扱うシリーズ図書。衣類や靴など、固さや素材感が苦手になる子どもの視点で説明する。
学校と境界知能
(引用)「うまくできない」の裏にある、境界知能の子どもの困りに気づくために
多様な学習スタイルや認知特性に対応する学びのユニバーサルデザイン(UDL)の理論と実践手法。発達障害を含む全ての子どもが自分に合った方法で学べる教育環境の実現を目指す研修会。
AIチャットの応答遅延時に、何も起きていない状態がキーボード・スクリーンリーダーユーザーに伝わらない問題を指摘。フォーカス消失や live region 更新の不備を具体的に説明し、待機・ストリーミング・スタール等の状態遷移を accessible name と live region で通知する実装例を解説。
発達障害の子どもが教室で自分の困難を隠して「良い子」を演じるマスキング現象の心理・認知メカニズムを解説。目に見える行動問題がない限り支援されない構造的バグと、学校環境の再構築によるインクルーシブ教育の実現を提言。
教室で活用できる支援道具5つを紹介する記事。バウンシーバンド、ザラザラ下じき、バランスクッション、騒音計、振動時計。特定の子への配慮ではなく全員に開く形で棚に置いておくことで、誰もが自発的に選べる環境をつくる実践例。
そのほかの #カラーコントラスト ピックアップ
CSS のネイティブ相対色構文(oklch、color-mix)を用いて、ダイナミックにコントラスト対応・wide-gamut 対応するカラートークン設計を解説。WCAG 要件を保ちながら 2026 年トレンドパレットを実装する方法を紹介。
ロゴやマークのコントラスト評価方法を提案する記事。ピクセル平均測定ではなく列単位での測定により、単語が完全に消える問題を検出する手法を解説。
WebAIM Million 2026年調査で明らかになった最も一般的な6つのWCAG違反について、なぜそれらが問題かを解説し、各々の修正コードを具体的に示す。
color-schemeプロパティでダークモードにおけるブラウザのネイティブUI(日付入力、セレクト、スクロールバー)の自動対応が可能。カスタムコンポーネント制作なしで実装できるテクニック。
WCAGコントラスト比を満たす色スキーム設計方法について解説。sRGB・HSL色空間の限界、相対輝度の計算式、OKLCH色空間を使ったCSS設計トークンで、アクセシブルな色システムを構築する方法を示す。
WordPress環境でのメール送信におけるアクセシビリティについて。確認メール・パスワードリセット等、ユーザーが受け取る全メッセージが読みやすく・ナビゲート可能である必要性を解説。コンテンツ・構造・デザイン・テスト実践を網羅した講座。