Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。
↑私が10年以上利用している会計ソフト！
アクセシビリティとは？
「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。
「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするのがユーザビリティの向上と考えればいいかと思います。
Webアクセシビリティについては、Webクリエイターボックスでも過去に何度か記事にしたことがあるので、そちらもあわせて読んでみてください。
- Webアクセシビリティは、誰がどう必要としているのか？
- 色覚障がい者に配慮したWebサイトの作り方
- 目が不自由な人のネット利用に関する8つの迷信
- アクセシビリティを考えたドロップダウンメニューを実装する
Webアクセシビリティのチェックツール
スクリーンリーダー
スクリーンリーダーとは、コンピューターの画面を読み上げるソフトウェアです。目の不自由な方、画面が見えづらい方がパソコンを操作する時に、情報を音声で読み上げて操作を補助するものです。
日本語版ではこちらのの二つが人気なもよう。ただし両方共Windows用です。
MacにはVoiceOverが標準搭載されています。 ⌘ + F5 で起動可能。日本語がプリインストールされていない場合はシステム環境設定 ＞ 音声入力と読み上げ ＞ テキスト読み上げ ＞ システムの声 から日本語を選択します。画面の一部のテキストを読み上げてもらいたい時は、テキストを選択後、右クリック（二本指タップ または control + クリック ）で「スピーチ」を選択すると読み上げてくれます。
実際に使われているツールを使って、どのように読み上げられるのかチェックするのが一番いい方法ですね。
a11y.css
a11y.cssはアクセシビリティに関するエラーやアドバイスを表示してくれるCSS。左側から種類や言語（フランス語か英語のみ）を選択し、「Generate bookmarklet」ボタンをクリックするとブックマークレットが生成されます。下の「a11y.css」をブックマークバーにドラッグするとブックマークレットの登録完了。お好みのサイトを表示して登録したブックマークレットをクリックすると、左下にエラーや警告の数が表示され、その箇所が赤いラインで囲まれます。そこにカーソルをあわせると上からニョキっとメッセージが表示されます。視覚的にエラーのある部分を教えてくれる便利なツールです。
ちなみに a11y とは accessibility の略語として知られ、11は略した文字の数となっています。誰が思いついたんでしょうねw
REVENGE.CSS
REVENGE.CSSも同じくアクセシビリティのチェックができるブックマークレット。「REVENGE.CSS」ボタンをブックマークバーにドラッグして登録。「role属性がないよ！」「空の要素があるよ。なんで？」なんてメッセージが表示されます。
色のシミュレータ
色のシミュレータはiPhoneやiPadで、様々な色覚特性を持つ人の色の見え方を体験するための色覚シミュレーションアプリです。C:一般型、P:1型、D:2型、T:3型に対応。初めてこのアプリを立ちあげた時は、かなり衝撃的でした。目の前の世界がこんな風に見えるんだな…！と。冷蔵庫の中や家から見える景色を映しては、その違いに驚いていました。Webサイトだけでなく、身近な物の見え方がわかるので、ぜひ一度利用してみて欲しいです。
Photoshopの校正設定
Photoshopでは ビュー ＞ 校正設定 から「P型（1型）色覚」または「D型（2型）色覚」での見え方をシミュレートしてくれます。設定しておけば ⌘ + Y で色の切り替え可能。デザイン段階で色差を確認しながら作業をすすめられるので、覚えておきましょう！
colorable
colorableは背景色と文字色のコントラストのチェックできるサイト。7以上でAAA（良い）、3以下でFail（悪い）をマークします。AAAを目指して調整しましょう。
Contrast Ratio
Contrast Ratioも同様にオンラインで色のコントラストをチェックできます。真ん中の円の色が緑だとOK。
Check My Colours
Check My Coloursでは入力したWebサイトで使われている配色のコントラストをチェックできます。要素ごとにチェックできるので、具体的にどこが悪いのかがすぐにわかります。
アクセシビリティ関連の書籍
コーディングWebアクセシビリティ
コーディングWebアクセシビリティ
そして「アクセシビリティの要は慣習である」ことを説明している箇所での以下の言葉がグッときました。
「クリエイティビティ」はできの悪いデザイナーに任せましょう。ここは人と違うことをやる場所ではないのです。慣習があるならば、それを使います。
― Mark Boulton
ジョークもうまいこと日本人にわかるように訳されていて、所々クスッときちゃいましたよ。翻訳者さんに拍手！
こちらの本の原本であるApps For All
A Web for Everyone（英語）
A Web for Everyone
The ustwo™ Pixel Perfect Precision Handbook 2 日本語版
Webデザインをする上で注意すべき基本的なポイントやテクニックを紹介している無料電子書籍「The ustwo™ Pixel Perfect Precision Handbook 2 日本語版」。PDFでは全163ページ。その中でアクセシビリティについては40ページほど紹介されています。小難しい文章ではなく、実例をイラストで解説していて、気軽に読めると思います。アクセシビリティの他、ユーザビリティ、PhotoshopやIllustratorでの制作テクニックも掲載。ダウンロード箇所がわかりにくいのですが、ページ下部の「PPP™日本語版は以下のリンクから無償でダウンロードいただけます。」の部分からiBooks用ファイルやPDFがダウンロードできます。
英語版はこちらからダウンロードできます。
アクセシビリティ関連サイト
W3C Webコンテンツ・アクセシビリティ・ガイドライン
まずはここから！W3CのWebコンテンツ・アクセシビリティ・ガイドライン 日本語訳版です。原文のWeb Content Accessibility Guidelinesにも目を通しておくとよさそう。
WAI-ARIA
WAI-ARIAとは、W3C内部の専門グループで、Webアクセシビリティの研究や仕様を検討している委員会：WAI（Web Accessibility Initiative）が制定したリッチなインターネットアプリケーションのアクセシビリティに関する仕様書：ARIA（Accessible Rich Internet Applications）のことです。HTMLの要素に役割や状態を指示し、スクリーンリーダーなどでの動作を支援します。原文はAccessible Rich Internet Applications (WAI-ARIA) 1.1で読めます。
Website Usability Info
ブログ Website Usability Infoでは、タイトルにユーザビリティとありますが、アクセシビリティに関する記事も豊富に公開しています。ひとつの記事がそこまで長くないので、サクサク読み進められますよ。（過去に遡り、全記事読みました///）
Simply Accessible（英語）
Simply Accessibleは北米にあるアクセシビリティを重視したWebサイトの制作会社。「Angular.jsとアクセシビリティ」「無限スクロールとアクセシビリティ」など、流行りのトレンドも取り入れてアクセシビリティについてわかりやすく解説しています。デザインもすっきり可愛らしくて素敵ですね。
We are Colorblind（英語）
We are Colorblindは色の識別が困難なデザイナーさんが作った、色覚認識の違いについて書かれたブログ。実例としてカラーピッカーやボードゲーム、グラフがいかに見えづらいか、そしてその改善策などが多数紹介されています。
ミツエーリンクス アクセシビリティBlog
国内のWebサイト・映像制作会社のミツエーリンクスでは、アクセシビリティに関するブログを公開しています。主にアクセシビリティ関連のイベントや、そこで紹介された情報や事例など。
HTMLにおけるimg要素のalt属性
タイトルのとおりですが、HTMLにおけるimg要素のalt属性について書かれています。原文HTML Standardを簡単に翻訳された記事。原文サイトではコード例も豊富に紹介されているので、あわせて読んでおきましょう。
既存サイトをアクセシビリティに対応させるよりも、制作段階から考えながら実装していく方がはるかに効率がいいですよね。これからもWebアクセシビリティについて意識しながらサイトを作っていこうと思います！みなさんのオススメ書籍やサイトも教えてください！
私が以前市町のサイトを制作したときは、miチェッカーを使用しました。
文字サイズ、音声リーダーチェック、画像コントラスト等一括でチェックできるので便利でしたよ。
でもmacには対応してなかったかも