Fluent UI 2のNavコンポーネントのガイダンス・動作・レイアウト・アクセシビリティ実装を詳解。Fluent UI Blazor 5との比較を交えながら、アクセシビリティを実装するためのポイントを提示。
シェアックリップ
シェアされたアックリップです。
そのほかの #デザインシステム ピックアップ
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
色調パレットをアクセシビリティ規則に基づいて自動修正するエンジンの実装。WCAG対比率を満たすよう色を調整し、OKLCH色空間を使って知覚的な色合い変化を最小限に抑える。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
プロジェクト管理ツール Pleasanter の 2027 年 1 月予定の UI テーマ改善について、CSS 変数削除やクラス名変更などの変更点をまとめた。
デジタル庁デザインシステムのReactコンポーネントをshadcn/uiレジストリで46個に拡充。導入方法と、独自デザイントークンに対応したクラス統合の実装上の工夫を解説する。
そのほかの #WAI-ARIA ピックアップ
カスタム作成した UI 要素がスクリーンリーダーに役割と状態を伝えていない WCAG 4.1.2 の失敗パターンを解説。ネイティブ HTML 要素の利用と正しい ARIA role 付与の重要性を説明
モーダルダイアログの開閉時のキーボードフォーカス管理について。フォーカスをダイアログ内に留める方法、Escapeキーでの閉じ方、クローズ後のフォーカス戻り先の実装パターンを解説している。
VIN入力フォームのアクセシビリティ実装について。ラベル、エラーメッセージの表示、live regionsによるスクリーンリーダー対応、フォーカス管理の具体的なコードパターンを解説している。
メールアドレス入力フィールドの目的を明示する方法について。type属性は形式を、autocomplete属性は具体的な目的を示すことで、フィールドの見た目と実際の機能の一貫性を保つ実装パターンを解説している。
カスタム要素を使ったタビングインターフェースの実装方法を紹介。ARIAロール、キーボード操作（矢印キー・Home/End・Enter/Space）、フラグメント識別子による初期状態設定など、アクセシビリティを考慮した設計を詳しく解説する。
AIが生成するアコーディオン実装がキーボード操作やスクリーンリーダー対応を見落とす理由と、aria-expanded属性で状態を正しく管理することの重要性を、実装例を示しながら解説する。見た目だけでなく状態を属性で持たせることが、アクセシビリティと実装精度の両立につながることを論じる。
そのほかの #UXデザイン ピックアップ
The Design + Accessibility Summit
イベント 海外 開催予定
デザイン専門家向けのオンラインサミット（第7回）。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
「誰もどれも取り残さない」は、どうつくる？｜PROJECT SOLITの実践
イベント 開催予定
ファッションを起点にインクルーシブデザインを実践する PROJECT SOLIT の代表による、社会の在り方を問い直すセッション。属性やカテゴリーではなく、人間の多元性から考えるアプローチと企業との共創事例を紹介。
ユニバーサルプレゼンテーションの実例から、情報設計における課題を指摘。多言語対応や装置があっても対象者に見えない・聞こえない・意味が通じない例（美術館サイトの外国語ラベル、視覚障害向け信号の多言語化、点字案内の視認性、電車アナウンスの聞き取りにくさ）を挙げ、情報が確実に届くための3つのチェックを紹介。
業務システムのマウス操作による手首の負担を、キーボード操作で解決した経験から、アクセシビリティの本質を考える。相手の困りごとに寄り添い、摩擦を減らす設計思想の重要性について述べる。
イベント会場の仮設柵の観察から、デザインと動線の関係を考察。柵は構造を支えるためのものだが、結果として歩行者の流れや進路にも影響する。設計意図と実際の使われ方のズレを通じて、ユニバーサルデザインの視点から再考。
色による情報の区別に問題を指摘。満席・エラー・必須など、色だけでなく文字や形でも意味を伝えるデザイン方法を、告知画像・図表・フォームの例で解説する。