ウェブアクセシビリティを無料で学べる資料まとめ（10年分）
こんにちは。伊原 力也（@magi1125）と申します。業務アプリケーションのデザイナー、デザインチームのマネージャー、アクセシビリティ関連のコンサルタントなどをやっています。
ウェブアクセシビリティを普及啓発する活動を始めて10年が経ちました。おかげさまで興味を持ってくれる人はかなり増えたと感じています。しかし、人が増えると声は届きにくくなります。「アクセシビリティをどこから学び始めていいかわからない」という意見も目にするようになってきました。
また、私はこれまでにアクセシビリティに関する書籍を何冊か書いていますが、専門書ってちょっと高いので、興味があるぐらいの段階で本を買うのはちょっと……という気持ちもわかります。
ということで、これまで自分が発信したり関わったりしたコンテンツのうち、ウェブアクセシビリティの理解の助けになりそうものをベストアルバム的に一度まとめてみることにしました。
この記事にあるコンテンツは、すでにウェブ上で公開されているもので、すべて無料です（当時のイベント企画・運営の方々、および共演の皆様に感謝と敬意を表します）。このまとめが、アクセシビリティを学び、実践しようとする皆さんの後押しになれば幸いです。
なお、私はaccrefsという、ウェブアクセシビリティ資料まとめサイトも運営しています（最近大幅にアップデートしました！）。より多くの資料に出会えますので、あわせて参照ください。
概要・取り組む理由
障害の有無にかかわらず誰もがネットを利用できるよう覚えておきたい「ウェブアクセシビリティ」とは？
ウェブサイトの運営側や制作側ではない一般の方向けに、ウェブアクセシビリティについての概要を説明した記事です。なるべく平易な表現で伝わるよう努めています。
Webアクセシビリティの概要
書籍『Webアプリケーションアクセシビリティ』の「第1章 Webアクセシビリティとは」を元にした講演です。アクセシビリティの概念、ユーザーのさまざまな利用状況、ガイドライン、アクセシビリティに取り組む理由について解説します。
あなたの価値を高めるWebアクセシビリティ
CSS Niteでのアクセシビリティ特集回「Webアクセシビリティの学校【特別授業】」での基調講演です。アクセシビリティの概念、ガイドラインの内容、取り組む意義などに触れています。ウェブ制作者が多く集まるイベントなので、制作側の視点で話しています。
イベントのフォローアップページには質疑応答もあります。
なぜ企業はWebアクセシビリティに取り組むのか？
ウェブアクセシビリティ基盤委員会のセミナーでの講演です。アクセシビリティの概要や、公的規格である「JIS X 8341-3」、企業がアクセシビリティに取り組む理由、取り組み開始のプロセスなどに触れています。企業や自治体のウェブ担当者が多く参加するイベントのため、ウェブサイト制作を発注する側の視点を交えて話しています。
デザインプロセス全般
『誰もが使える』デザインを生み出すために
ウェブアクセシビリティ向上には、サイト設計やデザイン時点での考慮が重要です。フロントエンド実装より手前の、ナビゲーションやコンテンツの設計、ビジュアルデザインの時点での考慮ポイントについて、具体例を交えつつ解説しています。
この講演に関する情報をまとめたレポート記事もあります。
実はできている!? Webアクセシビリティ
書籍『デザイニングWebアクセシビリティ』の内容をもとに、受託ウェブ制作会社向けに実施した講演です。
アクセシビリティの概要やよくある誤解について触れた後、実装→デザイン→設計→要件という形でだんだん根本へと遡っていく構成になっています。
また、「実は特別なことではない」ということを示すために、書籍とは反対に「（いつも通りの）良い事例」を先に出す形で紹介しています。
すぐに実践できるアクセシビリティ向上・改善の手引き vol.1
ノーコードデザインツールのSTUDIOを使用してウェブサイトを制作する際に、アクセシビリティ観点で何をどう改善すべきかを解説しています。コントラストやライティングやマークアップの課題を見つけて改善する様子を、STUDIOの操作デモを交えつつ伝えています。
ナビゲーションやコンテンツの設計
デザイニングWebアクセシビリティの「4章 ナビゲーション設計」「7章 コンテンツ設計」
Web担当者Forumでの連載です。フロントエンド実装より前に考慮すべきポイントとして、書籍『デザイニングWebアクセシビリティ』から、「4章 ナビゲーション設計」と「7章 コンテンツ設計」の内容を公開しています。
全体から詳細に向かって書いているので、以下の順で読んでいただくのがおすすめです。
4章 ナビゲーション設計
7章 コンテンツ設計
ビジュアルデザイン
デザイニングWebアクセシビリティの「8章 ビジュアルデザイン」
電子書籍版の『デザイニングWebアクセシビリティ』のお試し版として、「8章 ビジュアルデザイン」をまるごと無料で読めます。視覚的なデザインにおける問題と解決アプローチを、具体例とともに解説しています。
以下が「8章 ビジュアルデザイン」の内容です。
概要と流れ
8-1 見た目に頼っている
8-2 コントラストが低い
8-3 どこが押せるかわからない
8-4 テキストブロックが読みづらい
8-5 文字が画像になっている
8-6 フォーカスが見えない
8-7 小さく密集したものが押せない
8-8 スタイルに一貫性がない
8-9 閃光で発作が起きる
8-10 拡大すると問題が起きる
WCAG2.0 / 2.1とCUDの整理、スクリーンメディアにおけるCUD
アクセシビリティを担保した配色を考えるときに、「アクセシビリティガイドラインとカラーユニバーサルデザイン、どっちをどう考えたら良い？」と聞かれることが多くあります。その質問に対して、私なりの整理をまとめてみた講演です。
Adobe Colorで始めるUIのカラーユニバーサルデザイン
AdobeMAX 2020での、Adobe Colorを用いたカラーユニバーサルデザインの実践についての講演です。前半はカラーユニバーサルデザイン機構の伊賀さんによる解説があり、後半は私がUIデザイン上の配色の検討プロセスについて話しています。
リンク先のページは英語になっていますが、講演の動画は日本語です。
インタラクション設計、フロントエンド実装
多様なユーザーニーズに応えるフロントエンドデザインパターン〜ベーシック編〜
書籍「インクルーシブHTML + CSS & JavaScript」の内容をもとに、ウェブサイトによくある「ボタン」「ナビゲーション」「ブログ記事」をフロントエンド実装としてアクセシブルにする方法について解説する講演です。
イベントのフォローアップページには質疑応答もあります。
多様なユーザーニーズに応えるフロントエンドデザインパターン〜エッセンス編〜
書籍「インクルーシブHTML + CSS & JavaScript」の内容をもとに、ウェブサイトによくある「入力欄とラベル」「エラー表示」をフロントエンド実装としてアクセシブルにする方法について解説する講演です。
多様なユーザーニーズに応えるフロントエンドデザインパターン
書籍「インクルーシブHTML + CSS & JavaScript」の内容をもとに、ウェブサイトによくある「商品リスト」「ソート機能」をフロントエンド実装としてアクセシブルにする方法について解説する講演です。
また、多様なニーズに応えるUIをプロトタイピングするための「インクルーシブ・プロトタイピング」という技法についても紹介しています。
この講演に基づく取材記事もあり、アクセシブルにするための議論を疑似体験できる構成になっています。
キーボード操作のデザイン
Adobe XDにキーボード操作をプロトタイピングできる機能が搭載されたことをきっかけに企画した講演です（ただし講演内容はAdobe XDに依存しておらず、普遍的なものです）。キーボードのみでの操作を考慮した設計方針について、具体例を交えながら解説しています。
チェック・試験
春だ！既存プロダクトのWebアクセシビリティ改善ことはじめ
ウェブサービス提供会社において、サービスのアクセシビリティをチェックして改善していく一連の取り組みについて解説しています。以下の3部構成でになっています。
改善とリリースのプロセス解説
ガイドラインをもとに実際のウェブサイトをチェックするデモ
1部と2部は書き起こしテキストもあります。
もしあなたが『アクセシビリティ試験』をやることになったら
アクセシビリティチェックについて、実際のウェブサイトをチェックしていくデモとともに解説している講演です。前半の動画では「1. 制作時のざっくりチェック」「2. チェックリストに基づくチェック」までを扱い、後半の「続」の動画では「3. アクセシビリティ試験」のやり方を説明しています。
障害当事者の利用状況の理解
アクセシビリティセミナー2019
ウェブアクセシビリティ基盤委員会で開催したセミナーです（私は企画と一部の登壇で関わりました）。2部構成になっています。
前半では「障害当事者のWebの利用方法を知る」と題し、諸熊さんにはスクリーンリーダーを利用する状況でのデモを、伊敷さんには拡大鏡と色反転を使用した状況でのデモを実施していただきました。
後半は「なぜ企業はWebアクセシビリティに取り組むのか？」と題し、私からは企業がWebアクセシビリティに取り組む意義について紹介し、諸熊さんからはコーポレートサイトのリニューアル事例を、伊敷さんからは障害者専門のクラウドソーシングサービスの事例を紹介いただきました。
以下は特にご覧いただきたい、前半の「障害当事者のWebの利用方法を知る」の講演内容の動画です（4パートに分割されています）。
ユーザーと一緒に進めるアクセシビリティ 〜1年でアクセシビリティを組織に浸透させたnoteの取り組み〜
自分の講演ではないのですが、内容に関わっているのと、すごく知ってもらいたい内容なので、例外的に取り上げます。
note社の仙田さんによる講演です。障害当事者へのユーザーインタビューにおける試行錯誤や、ユーザーと直接対話することによるポジティブな効果などを、具体例とともに紹介しています。
講演内容に関連する記事もあります。
サービス改善事例
東京都新型コロナ対策サイトのアクセシビリティ改善を語る
東京都 新型コロナウイルス感染症対策サイトにおけるアクセシビリティ上の課題と、改善アプローチについて解説している講演です。多くのコントリビューターとともに、短期間で集中的に改善していった経緯を追っています。
noteアクセシビリティ勉強会 〜画像編〜
note社で実施した社内勉強会です。ウェブサービスのUI上にある画像の代替テキストについて、基礎的な考え方から、サービスの現状の課題までをクイズ形式で学んでいく講演です。
本勉強会を紹介する記事では、開催背景などが説明されています。
noteアクセシビリティ勉強会〜虚空編〜
note社で実施した社内勉強会です。「虚空ボタン」という、見た目には存在しているボタンが、キーボードで操作できなかったりスクリーンリーダーに伝わらなかったりする問題への対応方法を解説しています。
本勉強会を紹介する記事では、開催背景などが説明されています。
ユビーAI受診相談でほんとうに起きていた怖い話
Ubie社で実施した社内勉強会です。「症状検索エンジン ユビー」のサービス上に生じていた、実装上のアクセシビリティ課題について、傾向と対策を解説しています。
本勉強会を紹介する記事では、開催背景などが説明されています。
社内での普及啓発
freeeのアクセシビリティ、いまとこれから
freee社に入社して最初の3ヶ月間で実施した、アクセシビリティの普及啓発の取り組みについて紹介している講演です。社内LT、輪読会、サイトやサービスのチェック、障害当事者によるレビューなどを実施しています。
講演内容の書き起こしテキストもあります。
freeeが挑戦するインクルーシブデザイン
アクセシビリティチェック、デザインシステム、ユーザーリサーチといったアプローチを組み合わせて、ウェブサービスにおけるインクルーシブデザインの取り組みについて解説した講演です。後半には質疑応答もあります。
講演内容の書き起こしを含むレポート記事もあります。
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
複数のサービス提供会社において普及啓発を行う中で見えてきた「進捗が良くなる良いパターン」と「足踏みになりがちなアンチパターン」について解説している講演です。
余談ですが、この内容が書籍『Webアプリケーションアクセシビリティ』の「第7章 アクセシビリティの組織導入」のベースになっています。
アクセシビリティを組織で向上させる──社内外の認知・効果測定から、新規開発への組み込みまで
書籍『Webアプリケーションアクセシビリティ』に紙幅の都合で収められなかった原稿を再構成し、gihyo.jpで連載したものです。第7章「アクセシビリティの組織導入」の続編として、さらに取り組みを広げていくためのノウハウをまとめています。
アクセシビリティの効果測定〜測りにくそうなものを測る〜
前述のgihyo.jpでの連載のうち、「第5回 アクセシビリティを7つの視点で効果測定し、実績を証明する」をもとにした講演です。アクセシビリティ改善のプロセスを分解して、設計品質と主観品質という2軸にマッピングした上で、個々の変化を測定するというアプローチを解説しています。
業界研究
伊原さんと話すアクセシビリティ
2019年現在のWeb業界のアクセシビリティとエンジニアの状況、アクセシビリティ対応を訴求することについて、そしてアクセシビリティとユーザーについてなどを、ピクセルグリッドのスタッフの方々と私でお話しました。
3回の連載になっています。CodeGridの有料記事でしたが、ご厚意で無料公開いただいています。
Disabilityとデザイン
デザインにおいて『障害と対峙する』という文脈で耳にするさまざまな概念（バリアフリー、ユニバーサルデザイン、アクセシブルデザイン、インクルーシブデザイン、情報アクセシビリティなど）の立ち位置の違い、およびUXデザイン、人間中心設計、情報設計、UIデザインあたりとの関係性について考察した講演です。
電子書籍版「デザイニングWebアクセシビリティ」制作秘話
電子書籍フォーマットの「EPUB」は、XHTMLやCSSといったウェブ技術でできています。ゆえに電子書籍も比較的簡単に作れるだろうと思って取り組んでみたものの、さまざまな苦労がありました。実際の電子書籍の制作を進める中で、どういった点に気をつけるべきか、逆にウェブ制作の現場で培われたナレッジを活かせる場所はあるか、などを考察しています。
質疑応答
Re:『誰もが使える』デザインを生み出すために
前述の、デザインプロセスに関する講演「『誰もが使える』デザインを生み出すために」のあとに開催された、アクセシビリティに関する質問にひたすら答える回です。懇親会も含めると、20問ぐらい答えているみたいです。
イベントのレポートページに質疑応答のサマリが掲載されています。
有志により文字起こしも用意いただきました。
懇親会で質疑応答を続けた記録もあります。
まとめのまとめ：書籍の紹介
ここまでご覧いただきありがとうございました。最後に書籍の紹介です。これまで紹介してきた資料の中身は、以下の書籍のかたちでまとまっています。書籍というフォーマットはやはり便利でして、気になったことを調べるための辞書的な感じで手元にあると、より捗るのではないかと思います。
書籍『デザイニングWebアクセシビリティ』をもとにしたSchooの録画授業もあります。こちらも、授業を見つつ本を読むという形がおすすめです。
これからも、アクセシビリティ向上の取り組みを行い、それをまとめて公開するというサイクルを続けていきます。今後ともよろしくお願いします！