アクセシビリティ簡易診断

ページ上のすべてに名前が必要

ページを見るとき、レイアウトは何も言わずに多くを伝えています。入力欄の横の虫眼鏡アイコンは「ここで検索」の意味です。大きな太字は「新しいセクションの始まり」の意味です。スクリーンリーダー、点字ディスプレイ、音声操作を使う人には、そのどれも届きません。そうしたソフトウェアにはレイアウトが見えません。HTMLを読み、すべての要素に二つのことを求めます。それが何か、そして何という名前か、です。

<img>はalt属性で、フォーム項目は<label>で、セクションは見出しで答えます。答えがないと、ソフトウェアは「画像」「編集テキスト」「リンク」と読み上げて次へ進むだけで、誰の役にも立ちません。Web Content Accessibility Guidelines（WCAG）はこの考え方を検証可能なルールにしたもので、そのかなりの部分はプログラムで確認できます。

診断する項目と、それぞれの減点

ページは100点から始まります。見つかった問題ごとに点数が引かれ、繰り返し出る問題ほど上限まで多く引かれます。

hidden、aria-hidden="true"、インラインのdisplay:noneで隠された要素と、role="presentation"が付いた画像は診断の対象外です。

評価の読み方

残った点数が文字の評価になります。90点以上はA、80点以上はB、65点以上はC、50点以上はD、それ未満はFです。赤の項目は障壁、つまり作業を最後までできなくしてしまう種類の問題です。黄色の項目は、止めはしないものの手間を増やします。各項目の下には、関係する要素を最大8つ、ファイルパス、項目名、id、クラスを添えたタグとして表示するので、テンプレートの中で検索できます。

よく出る項目の直し方

代替テキストのない画像

目の見える読者に画像が伝えている内容を書きます：<img src="team.jpg" alt="Five engineers around a whiteboard">。装飾だけの画像ならalt=""と書きます。空の値は支援ソフトウェアに画像を飛ばすよう伝えるもので、属性を書かないこととは違います。

ラベルのない入力欄

<label for="email">Email</label> <input id="email" type="email">。プレースホルダーはラベルになりません。最初の1文字を打った瞬間に消えるからです。

アイコンだけのリンクやボタン

<button aria-label="Open menu">…</button>とするか、中のアイコン画像にaltを付けます。

見出しレベルの飛び

レベルは文書の構成で決め（セクションにはh2、その中はh3）、大きさはCSSで指定します。

ズームの禁止

viewportタグを<meta name="viewport" content="width=device-width, initial-scale=1">まで削ります。

この診断に見えないもの

当サーバーは受け取ったHTMLを読むだけでJavaScriptは実行しないので、フレームワークが読み込み後に挿入するものは調べられません。スタイルシートもダウンロードしません。そのため、コントラストを測れるのは、文字色と背景色の両方がstyle属性に書かれている箇所だけです。それ以外はコントラスト比計算ツールで色を確認してください。1ページをさらに深く調べるには、スクリーンリーダープレビューで読み上げを聞き、タブ順をたどってみてください。