Fluent UI 2を用いたアクセシビリティ実装の実践ガイド。キーボード操作、スクリーンリーダー対応、WCAG 2.1準拠の具体的実装方法を紹介する。
シェアックリップ
シェアされたアックリップです。
そのほかの #キーボード操作 ピックアップ
モバイル表示で幅広いテーブルがページ横スクロールを引き起こす問題。テーブルをスクロール可能なコンテナで包み、キーボード利用者が操作できる実装方法を説明。
固定フッターがキーボード操作のフォーカスを隠す問題の検証ツール。ResizeObserver で要素の高さを追跡し、WCAG 2.4.11 の達成基準を参考に改善方法を示す。
リソースカード内のリンクは『Open』だけでなく、各リンク先の内容を示すテキストを使うべき。MDNの推奨に基づく実装と手動テスト手順。
HTML/CSS/JavaScript でアコーディオン UI を実装する 6 種類の方法をアクセシビリティの観点から比較。button + ARIA や details + summary における、キーボード操作やスクリーンリーダー対応の具体的な違いを検証。
Windows 11/10のアクセシビリティ設定「マウスキー」を使うと、マウスが使えなくてもテンキーでポインター操作ができる。移動・クリック・ダブルクリック・ドラッグまでをカバーする設定方法と操作手順を解説する。
ホームページのリンクを別タブで開くかは、リンク先より操作状況を考慮して判断する。戻りやすいこと、別タブで開く場合は事前に分かることが重要で、PCとスマホでの確認が必須。
そのほかの #スクリーンリーダー ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
イベント 開催予定
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
スクリーンリーダーがHTMLを読み上げるまでのプロセスとAccessibility API Mappingについて、実技を交えて学ぶウェブ開発者向けのウェビナー。
NVDA日本語チームチャリティートーク2026
YouTube
スクリーンリーダーNVDAの開発を支援するチャリティーイベント。乗り換え時の困りごと、アドオン活用、AIによるスクリーンリーダー操作の可能性などを複数のセッションで紹介
CSSで生成されたアイコンはスクリーンリーダーに無視されるため、アイコンのみのボタンには必ず名前が必要。alternative-text構文で名前を供給する実装手法を説明。
スクリーンリーダーでExcelファイルを確認する課題を、視覚障害のある著者が解説。セル操作ができても内容把握が難しい場合がある理由、見た目の情報が伝わらない課題、作成側の工夫の必要性を論じる。
アクセサリー販売サイトのレイアウト変更を通じた、音声読み上げ対応とリーダー機能への適合事例。色別カテゴリー追加によるUX向上と、iPad・iPhone での検証プロセスを記載する。
そのほかの #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つの分類で整理して解説。コントラスト比やカラーユニバーサルデザイン、代替テキストなど実例で学べる。聾学校での経験から、音声に頼らない環境での視覚情報の重要性を示す。
Vaadin Button の Web Component 開発の 9 年以上の歴史をとおして、アクセシビリティに対応するための技術的課題と解決方法を描く。Shadow DOM 設計、フォーカス管理、tooltip の accessible 化など、進化の過程を追う。
色調パレットをアクセシビリティ規則に基づいて自動修正するエンジンの実装。WCAG対比率を満たすよう色を調整し、OKLCH色空間を使って知覚的な色合い変化を最小限に抑える。
デザインシステムがキーボード操作とフォーカス移動を一貫して管理するメカニズムを解説。フォーカストラップ・ARIA・イベントハンドリングの実装と、アプリ側のオーバーライドが破壊する事例を紹介。
レトロアーケード美学を保ちながら WCAG コントラスト要件を満たす色設計と、Flash of Unstyled Content を避ける実装方法を解説。CSS カスタムプロパティと同期スクリプトを組み合わせた構成。
プロジェクト管理ツール Pleasanter の 2027 年 1 月予定の UI テーマ改善について、CSS 変数削除やクラス名変更などの変更点をまとめた。