トースト通知のアクセシビリティ問題を指摘し、ARIAライブリージョンの実装方法や認知アクセシビリティの視点から改善策を提案した技術記事だ。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
状態管理のバグがキーボード操作とスクリーンリーダーユーザーに異なる影響をもたらす仕組みと、デバッグの順序を解説。実装時に状態遷移表を作成することの重要性を示す。
CSSのreading-flowプロパティを使い、flexboxやgridで視覚順序が変わった際のフォーカス順序と視覚の乖離を解決。キーボード操作とスクリーンリーダー対応を同時に実現する方法を解説。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
CSSグリッドで構築した比較表が値を省略したときに起きる構造的問題を実演。スクリーンリーダーと自動抽出ツール、AIが誤ったデータを読み込む事例から、セマンティックなテーブル構造の重要性を論じている。
Reactでのローディング状態設計において、スピナーだけでなくaria-live・aria-busyを活用し、ユーザーに進行状況を正確に伝える方法を、実装パターンと検証方法とともに解説。
スクリーンリーダーユーザーの実際の使用経験に基づき、デザイン選択がアクセシビリティにどう影響するかを解説。フォーカストラップやARIAの不適切な使用が視覚障害のあるユーザーの日常にもたらす課題を取り上げるウェビナー。
そのほかの #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つを紹介する記事。バウンシーバンド、ザラザラ下じき、バランスクッション、騒音計、振動時計。特定の子への配慮ではなく全員に開く形で棚に置いておくことで、誰もが自発的に選べる環境をつくる実践例。