Webサイトのユーザー体験・開発・戦略に関わる全員向けの総合ガイド。アクセシビリティを損なわずに革新的なデザインを実現する方法を解説。
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
研修資料の文字と背景の色の組み合わせを、WebAIM Contrast Checkerで一組ずつ測る方法を解説する。入力の手順と、コントラスト比をWCAG AAの通常文字の基準に照らして読む方法を、架空の文例で示す。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
テキストと背景のコントラスト比が基準を下回ったときに、色相と彩度を保ったまま明度だけを二分探索で調整して補正候補色を求める方法を、WCAG 2.2の計算式とJavaScriptの実装で解説する。
そのほかの #WAI-ARIA ピックアップ
Four form components hold every form in our app, and writing this post found the one bug in them
アプリ「Nakodo」のフォーム部品の設計を解説する記事。失敗の通知と成功の通知で role を使い分ける理由と、入力欄の補足(ヒント)が入力欄に関連付けられておらず、スクリーンリーダーで読まれない不具合を扱う。
WordPressのヒーロースライダーで、画像をWebPに変換するだけでなく、優先読み込み・遅延読み込み・レイアウト確保を組み合わせ、表示されていないスライドをaria-hiddenで読み上げ対象から外す手法を解説する記事。
WordPressのヒーロースライダーの画像を、PNGからWebPに変えて合計約7.8MBから約316KBへ軽くした手順を解説する。あわせて、非表示のスライドを aria-hidden で読み上げの対象から外す方法と、Playwright による自動確認を紹介する。
モーダルダイアログのフォーカス管理を解説する記事。フォーカスをダイアログ内に閉じ込める実装と、閉じたあとに元の要素へ戻す挙動を扱う。HTML の dialog 要素を使えば、背景の操作を止める処理を自前で書かずに済むとする。
Fluent UIのReact v9とWeb Componentsが、Shadow DOMやPortal、ダイアログでフォーカスやキーボード操作をどう扱っているかを、公式ドキュメントとソースで確かめながら論じる記事である。UIライブラリの設計判断が主題である。
Shadow DOM の内側にあるボタンなどの要素が、支援技術にどう伝わるかを扱う記事である。DOM・Accessibility Tree・プラットフォーム API の関係を仕様と Chrome での観察から整理し、カスタム要素に意味を持たせる設計の選択肢を示している。
そのほかの #ガイドライン ピックアップ
国土交通省の公開データで東京都の車椅子使用者対応トイレの情報を集計し、5施設の公式案内と照合した記事。利用時間の欄が埋まっていても当日使えるとは限らず、備考や公式カレンダーの確認が要ると示す。
Web Accessibility Directive 6th Anniversary: Session 6: How to use EU standards supporting WAD & EAA
Web Accessibility Directive と European Accessibility Act を支える EU 標準、特に更新版 EN 301549 の実装的な活用方法と非デジタル分野の新標準開発について語るセッション。
アクセシブルなUIコンポーネントライブラリをオープンソース化した発表。8つのコンポーネントについて、WCAG要件をテーマ別に文書化し、Gherkin形式のテストシナリオと自動テスト実装を含む。
WCAG 3.0のドラフト版を解説。WCAG 2.2との違い、適用範囲の拡大、conformanceモデルの変更、impact tags による細粒度の報告方法などを紹介。現時点ではWCAG 2.2の作業を優先すべき理由も示す。
インタラクティブリストがWebの標準パターンであるにもかかわらずプラットフォームでサポートされていない問題を指摘。アクセシビリティ関連の最新記事・ガイドライン・ツールをキュレーション。
デジタル庁ガイドブック第3章「非干渉」基準を解説。自動再生音声の制御、キーボードトラップ回避、光の点滅制限、自動コンテンツ切り替え禁止の4つの基準について、リリース前に必ず対応する必要性と改修方法を述べる。
そのほかの #海外動向 ピックアップ
Lunch and Learn Webinar Series: Accessible Events
イベント企画・運営におけるアクセシビリティ実装を学ぶウェビナー。障害のある人を含む多様な参加者をインクルーシブに受け入れるための設計・支援技術について解説する。
Global Accessibility Summit (GAS)
障害のある若者が主導する国際的なインクルージョンサミット。カイロで開催され、世界から障害者や支援者が集結し、インクルーシブな社会実現を目指す。
Sight Tech Global 2026
視覚障害者向けの支援技術に特化したオンラインカンファレンス。Amazon・Googleなどのテック企業による最新のアクセシビリティ技術と事例が紹介される。
国内外のインクルーシブダンス振付家による共同創作作品のショーケース。韓国、カンボジア、イギリスからの振付家と日本の実践者が協働し、障害の有無や国境を越えた身体表現の可能性を探る。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
視覚障害のある人向けのテック番組「Double Tap」の回。Skyがプレミアリーグの試合に音声解説と生字幕を加えることや、スマートフォン版Sky Goで音声解説付きのライブ番組が見られない問題を扱う。
そのほかの #UXデザイン ピックアップ
(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
Kyoto UI自由研究室 #1 (2026/11/13 19:00〜)
UI・UX・アクセシビリティに関する気づきや試験を持ち寄る勉強会。完成度不問で、途中経過や失敗事例の共有も歓迎する。
アクセシビリティは実装後に属性を足しても解決しない、という連載の最終回である。情報設計やフォーカス戦略、ダイアログの振る舞いは設計の前提であり、後から変えると画面遷移や状態管理まで見直す必要が生じると論じる。
The Design + Accessibility Summit
デザイン専門家向けのオンラインサミット(第7回)。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
加齢による目や指の変化を前提に、シニア層のパズルゲーマー向けのUIを考える記事。小さなボタン・低コントラストの灰色の文字・急かすタイマーが利用者を遠ざけるとし、大きなタップ領域と濃いコントラストが、ゲームを誰にでも遊びやすくすると述べる。
「誰もどれも取り残さない」は、どうつくる?|PROJECT SOLITの実践
ファッションを起点にインクルーシブデザインを実践する PROJECT SOLIT の代表による、社会の在り方を問い直すセッション。属性やカテゴリーではなく、人間の多元性から考えるアプローチと企業との共創事例を紹介。