リニューアルしたサイトが「アクセシビリティ対応済み」として納品されました。検査ツールにかけると全項目が緑、報告書にも指摘ゼロと書かれています。
ところが、実際に読み上げソフトで社長挨拶のページを聞いてみると、こう読まれます。「画像。画像。画像。イメージ ゼロイチ ピーエヌジー。」——チェックは通っているのに、目が見えない人には何も伝わっていません。
これは手抜きの結果とは限りません。自動チェックが測っているものと、発注側が期待しているものが最初からずれているために起きます。
ツールが見ているのは「有無」だけ
一般的なアクセシビリティ検査ツールが alt について判定しているのは、「その画像に読み上げ用の名前が付いているか」だけです。付いている名前が画像の内容を説明しているかどうかは見ていません。
つまり、次のようなものはすべて合格します。
| 実際に書かれている alt | 自動チェック | 読み上げたときに伝わるもの |
|---|---|---|
画像 | 通る | 何もない |
IMG_2847.png | 通る | ファイル名 |
バナー | 通る | 何かの帯があること |
| 同じ説明が10枚に付いている | 通る | 区別がつかない |
チェックが緑であることは、altが書かれていることの証明であって、altが役に立っていることの証明ではありません。 検収でここを取り違えると、対応したはずのものが実際には対応していない状態が残ります。
なぜツールは品質を測らないのか
これは技術的にできないからではなく、意図的な設計です。
GitHub が自社のアクセシビリティ検査の取り組みについて公開した記事で、その理由がはっきり書かれています。品質を判定するルールは誤検知を避けられません。そして誤検知を出すルールは、開発チームに切られます。 一度切られたルールは二度と戻りません。だから多くのツールは、確実に判定できる「有無」だけを見る作りになっています。
裏を返すと、品質の判定はツールの外に置かれているということです。誰かが決めて、誰かが見るしかありません。制作会社が自主的にやっている場合もありますが、契約や仕様に書かれていなければ、やらなくても違反ではありません。
機械でも拾える「明らかに駄目なalt」はある
品質全体は測れなくても、明らかに機能していないaltには型があります。GitHub が公開したプラグインは、次の4つを検出対象にしています。
- 無い — alt属性そのものが付いていない
- 曖昧 — 「画像」「写真」「バナー」のような、内容を説明していない語だけ
- 重複 — 別々の画像に同じ説明が繰り返し使われている
- プレースホルダ —
IMG_2847.png、untitled、ここに代替テキストのような書きかけ
この4つは、人が目視しなくても機械的に拾えます。検収でこの4つを潰すだけで、冒頭のような「全部が画像と読まれる」状態はほぼ無くなります。
より踏み込んだ品質の判定には言語モデルを使う構成も用意されていますが、こちらは既定では動きません。有効化には設定とトークンが必要です。また、画像URLには署名付きの一時トークンやセッション識別子が入っていることがあるため、モデルに渡す前にクエリ部分を落とす処理が入っています。検査のために社外へURLを送ることが、それ自体で情報を漏らす経路になり得るという設計上の判断です。自社サイトで同種の仕組みを入れる場合も、この点は同じように考える必要があります。
発注側が仕様に書くべきこと
「アクセシビリティに配慮すること」とだけ書かれた仕様は、検収の基準になりません。書くべきは、画像を3つに分けて、それぞれの扱いを決めることです。
- 装飾のための画像（背景の飾り、区切り線、意味のないアイコン）。これは説明を書くほうが邪魔になります。
alt=""として読み上げから外すのが正解です。「全部の画像にaltを付ける」という指示は、ここで害になります。 - 情報を持つ画像（図解、グラフ、写真、スクリーンショット）。画像が見えなかったときに失われる情報を、文章で補うのが役割です。何が写っているかの羅列ではなく、その画像がそのページで果たしている役目を書きます。
- 操作のための画像（アイコンだけのボタン、画像リンク）。ここで書くのは見た目ではなく押したら何が起きるかです。虫めがねのアイコンなら「虫めがね」ではなく「検索」と書きます。
この3分類を仕様に入れておくと、検収の会話が「altが付いているか」から「分類が合っているか」に変わります。後者は目視で確認できます。
アクセシビリティ対応が法的にどこまで求められるかについては誤解が多く、アクセシビリティ義務化の誤解に整理しています。対応の全体像はWebアクセシビリティの基本を参照してください。自動チェックをCIに組み込む場合の考え方はアクセシビリティ検査の自動化にあります。
SEOのためだけに書かれたaltは、たいてい駄目になる
もうひとつ、発注側が知っておくと得をする点があります。
altは検索エンジンも読むため、キーワードを入れる目的で書かれることがあります。その結果できあがるのが「東京 ホームページ制作 格安 デザイン 会社」のような、人間が聞いても意味の取れない文字列です。
これは自動チェックを通りますし、順位に劇的な影響を与えるわけでもありません。ただ、読み上げで聞かされる側にとっては雑音でしかないので、本来の目的からは外れています。alt に何を書くかを決めるとき、判断の基準は「この画像が見えない人に、いま何を伝える必要があるか」だけで足ります。結果としてキーワードが自然に入るなら問題ありません。
次にやること
まず、自社サイトのトップページと、いちばん見られているページを1枚ずつ開いて、画像を右クリックして alt を確認してください。 ブラウザの検証機能を使わなくても、画像を非表示にする拡張機能や、読み上げ機能を一度動かすだけで状態は分かります。「画像」「img」ばかりが並ぶなら、報告書が緑でも対応は終わっていません。
そのうえで、次に発注する制作の仕様書に、上の3分類だけを書き足してください。 詳細なガイドラインを作る必要はありません。装飾は空にする、情報は失われる情報を書く、操作は結果を書く。この線引きが仕様に入っているだけで、納品物の質は変わります。
サイトのアクセシビリティ診断、リニューアル時の検収基準の設計、既存サイトの改善については、グリームハブのHP制作・リニューアル相談で承っています。サイトの規模と現在の状態によって進め方が変わるため、個別にご相談ください。お問い合わせからどうぞ。
