(引用)アクセシビリティを、デザインの基本に。 本書は、年齢や障害の有無、利用環境にかかわらず、あらゆるユーザーが必要な情報や体験を得られるよう、「アクセシビリティ」をデザインの初期段階から組み込むための考え方と実践を学べるハンドブックです。 日本でもデジタル庁がウェブアクセシビリティの導入を推進し、「誰一人取り残されない、人に優しいデジタル化」が目指されています。アクセシビリティは、一部の人のための特別…
シェアックリップ
シェアされたアックリップです。
そのほかの #WCAG ピックアップ
【名古屋開催】第13回 ウェブアクセシビリティ勉強会
アクセシビリティの実装・検証について、スクリーンリーダーやキーボード操作などの支援技術を実際に体験し、WCAG達成基準を確認するワークショップ形式の参加型勉強会。
イスラエルの障害者平等権規則と規格 IS 5568 AA(WCAG 2.1 AA 準拠)への適合を、ブラウザ上で動く JavaScript により自動的に確かめる方法を解説する記事。代替テキスト・見出し構造・コントラスト・言語と文字方向の確認項目を示す。
スマートフォンなどで押し間違えやすいボタンの大きさを扱った記事である。操作対象は 24×24 CSS px 以上にし、主要な操作では 44×44 CSS px を目安にすると説明する。アイコンの大きさは変えず、押せる範囲に余白を足す方法を示す。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
AIがアクセシビリティをレビューできる範囲は、ソースコードだけを読むか、実行中のブラウザーやaxe-coreの結果まで受け取れるかによって変わると整理する。WCAG適合と自動テストの合格は同じではないことも説明する。
ドキュメントサイトに、AI で静止画から生成した短い動きの映像を載せるときの決まりを挙げた記事である。音声付きの自動再生を避け、一時停止の手段を置き、生成したものだと明示し、動きを言葉で説明する文を添えることを扱う。
そのほかの #UXデザイン ピックアップ
Kyoto UI自由研究室 #1 (2026/11/13 19:00〜)
UI・UX・アクセシビリティに関する気づきや試験を持ち寄る勉強会。完成度不問で、途中経過や失敗事例の共有も歓迎する。
アクセシビリティは実装後に属性を足しても解決しない、という連載の最終回である。情報設計やフォーカス戦略、ダイアログの振る舞いは設計の前提であり、後から変えると画面遷移や状態管理まで見直す必要が生じると論じる。
The Design + Accessibility Summit
デザイン専門家向けのオンラインサミット(第7回)。アクセシビリティの実装をマスターしたいデザイナーを対象とした、4日間の集中的なナレッジシェアと最新事例の紹介。
加齢による目や指の変化を前提に、シニア層のパズルゲーマー向けのUIを考える記事。小さなボタン・低コントラストの灰色の文字・急かすタイマーが利用者を遠ざけるとし、大きなタップ領域と濃いコントラストが、ゲームを誰にでも遊びやすくすると述べる。
「誰もどれも取り残さない」は、どうつくる?|PROJECT SOLITの実践
ファッションを起点にインクルーシブデザインを実践する PROJECT SOLIT の代表による、社会の在り方を問い直すセッション。属性やカテゴリーではなく、人間の多元性から考えるアプローチと企業との共創事例を紹介。
GoogleのGuided Vision(視覚支援AI機能)について、AIが答える前に撮影条件を改善する設計の重要性を述べている。視覚障害者向けのリアルタイム視覚支援だけでなく、AIが不足情報を取り直せる対話経路の構築、アクセシビリティ領域での間違え方の設計まで含めた考察。
そのほかの #ユニバーサルデザイン ピックアップ
多様な学習スタイルや認知特性に対応する学びのユニバーサルデザイン(UDL)の理論と実践手法。発達障害を含む全ての子どもが自分に合った方法で学べる教育環境の実現を目指す研修会。
くまもと授業のユニバーサルデザイン研究会(UD熊本)第54回学習会
授業デザインのユニバーサルデザイン化に関する研究・学習会。全ての児童生徒にアクセスしやすい授業設計の実践的知識と事例共有の場。
NO LOOK PARK
アイマスク装用で視力を使わない状態でゲーム・駄菓子選び・書道などを楽しむイベント。視覚障害者と晴眼者がともに企画・実施。
成田空港が障害のある人の参加により改善を重ねてきたユニバーサルデザイン推進の考え方と具体的な取り組み事例について、経営計画側とUD推進側の講演者が解説するセミナー。
知的な遅れを伴う自閉症のある5歳の息子が、家族のスマートフォンを直感的に操作して動画アプリにたどり着いた出来事から、筆者がユニバーサルデザインの考え方を読み直す随筆である。筆者は特別支援学校の教員である。
ツルハと多摩美術大学の共同研究「スローショッピング」を手がかりに、地方スーパー向けの7つの設計を提案している。商品選びや会計で迷う人、店員に頼みにくい人の壁にも目を向け、案内表示や接客の手順を挙げている。
そのほかの #認知アクセシビリティ ピックアップ
かんかくかびんってなあに?
身体に触れるモノの感触への過敏を扱うシリーズ図書。衣類や靴など、固さや素材感が苦手になる子どもの視点で説明する。
多様な学習スタイルや認知特性に対応する学びのユニバーサルデザイン(UDL)の理論と実践手法。発達障害を含む全ての子どもが自分に合った方法で学べる教育環境の実現を目指す研修会。
会員登録フォームで自動入力が効くかを1分で確かめる方法を解説する記事。入力欄に autocomplete の値を付けて入力目的を伝える意味を、WCAG 達成基準1.3.5(入力目的の特定)の解説をもとに示す。
字幕や画面読み上げへの対応など、学習ニーズの異なる学生がデジタル教材を使えるようにするための方法を紹介する記事。見出しで構造を示す、複数の方法で情報に触れられるようにする、一度に負荷をかけない、学生や教員の声を聞いて改善する、の4点を挙げる。
会員登録フォームの入力欄に autocomplete 属性を付けて、入力の目的を伝える方法を解説する記事。名前・メールアドレス・郵便番号などをブラウザが自動入力できるようにし、WCAG 1.3.5 と認知の困りごとのある人の入力の負担に結びつける。
WCAG 2.2の達成基準3.2.4「一貫した識別性」を、デザインとコーディングの両面から解説する記事である。同じ機能のボタンやアイコンには、どのページでも同じ名前と見た目を使うことを求める基準である。
そのほかの #カラーコントラスト ピックアップ
専門家のいないチームが取り組めるよう、WCAG 2.2の87項目から実害の多い7項目を絞った記事。キーボード操作、ラベル、代替テキスト、コントラスト、見出し、色以外の手がかり、フォーカスの表示を扱う。
ダークモードでもWCAG 2.1のコントラスト基準(1.4.3・1.4.11)はテーマごとに適用されると説明し、純黒の背景や鮮やかな色が基準を外しやすいことや、prefers-color-schemeのテストが漏れやすいことを扱う記事。
AIで作ったWordPressのページを公開前に確認する項目を紹介する記事。文字と背景の差、代替テキスト、見出しの順序、キーボード操作、エラーの伝え方の5項目を挙げ、自動ツールに任せる検査と人が操作する検査を分ける方法を示す。
Windowsのハイコントラストモードなどで有効になるforced-colorsでは、ブラウザが背景色や影をOSの固定パレットに置き換えるか消す。見た目だけで作ったボタンが背景と区別できなくなる仕組みを、実際の不具合の経緯とともに説明する。
筆者のサイト5頁を、キーボードだけでの操作、入力欄の名前、文字の濃さ、見出しの順の4点でWCAG 2.2に照らして数えた実測記録。
色だけで情報を伝えないことと、WCAG AA のコントラスト比(通常の文字は4.5:1、大きな文字は3:1)を満たす必要性を、React と Tailwind CSS の実装例で解説する。