Fluent UI 2 のドロップダウンコンポーネントのアクセシビリティ設計を解説。単一・複数選択に対応したコンテンツ設計の考え方と実装方法を紹介。
シェアックリップ
シェアされたアックリップです。
そのほかの #WAI-ARIA ピックアップ
ストリーム型のAI生成UIにおいて、キャンセル操作時にフォーカスを失い、古い状態の通知がスクリーンリーダーで宣言される問題を分析。WAI-ARIAのライブリージョンとフォーカス管理の実装パターンと、デバッグ手法を具体的に解説している。
エラーメッセージは何が失敗したかを具体的に示し、理由と回復方法を明示する。『Invalid input』のような曖昧な表現ではなく、実行可能な指示が必要。
React でメールフォームを実装する際に、フォーカス管理とアクセシビリティを両立させる方法。フォーム状態(読み込み中、成功、エラー)の変化を WAI-ARIA で通知しながら、キーボード操作とスクリーンリーダーに対応。エラー時のフォーカス復帰の実装方法を解説。
セマンティック HTML がスクリーンリーダーや支援技術でいかに機能するか、ランドマーク・見出し・フォーム要素の正しい使用の重要性を解説する。
Accessible Toast Messages: What Developers and Designers Need to Know | Accessible Web Webinar
UIのトースト通知(バナー・ステータス更新)をスクリーンリーダーに正しく読ませるための実装ガイダンス。重複通知や通知漏れを避けるための開発とデザインのポイント。
カスタム作成した UI 要素がスクリーンリーダーに役割と状態を伝えていない WCAG 4.1.2 の失敗パターンを解説。ネイティブ HTML 要素の利用と正しい ARIA role 付与の重要性を説明
そのほかの #UXデザイン ピックアップ
Kyoto UI自由研究室 #1 (2026/11/13 19:00〜)
UI・UX・アクセシビリティに関する気づきや試験を持ち寄る勉強会。完成度不問で、途中経過や失敗事例の共有も歓迎する。
The Design + Accessibility Summit
デザイン専門家向けのオンラインサミット(第7回)。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
「誰もどれも取り残さない」は、どうつくる?|PROJECT SOLITの実践
ファッションを起点にインクルーシブデザインを実践する PROJECT SOLIT の代表による、社会の在り方を問い直すセッション。属性やカテゴリーではなく、人間の多元性から考えるアプローチと企業との共創事例を紹介。
加齢で水晶体が短波長の光を通しにくくなり、青系の色の見分けやすさに影響が出る仕組みを科学的に解説。色の違いが常に同じように見えるとは限らないこと、デザイン時は色以外の手がかりの必要性を指摘。
視覚障害で見えにくくなった著者が、生成AI(Claude)の助けを借りてアクセシブルなスライド動画作成ツール「UDスライド動画工房」を開発。音声に合わせて自動的にスライド長を決める設計で、大きなフォント・高コントラスト・キーボード操作のみで対応。
ユニバーサルプレゼンテーションの実例から、情報設計における課題を指摘。多言語対応や装置があっても対象者に見えない・聞こえない・意味が通じない例(美術館サイトの外国語ラベル、視覚障害向け信号の多言語化、点字案内の視認性、電車アナウンスの聞き取りにくさ)を挙げ、情報が確実に届くための3つのチェックを紹介。