目の見えないお客様ができないことは、見ているだけでは分かりません。
テーマの作りが良く、商品は数千点。それでも、たった一つの部品のせいで、スクリーンリーダーで買い物をするお客様にはコレクションページ全体が使えない状態でした。
実際のストア(匿名):ニューヨークのファインジュエリー店 · アクセシビリティ誰からも苦情が来ていないストアでした。
警告書(demand letter)も苦情も届いていません。すでにお付き合いのある小売のお客様で、ストアは完成しているように見えました。いつもどおり3ページで診断しました。ホームページ、コレクションページ1つ、商品ページ1つ。まずキーボードで、次にスクリーンリーダーで確認します。
11項目が合格。2項目が不合格。原因はどちらも同じ場所でした。
テーマの作りは、平均よりかなり良いものでした。すべての画像に説明があり、すべてのボタンと入力欄に名前があり、704箇所で背景に対して文字が読める状態で、アクセシビリティ方針もすでに公開されていました。
2つの不合格は、どちらも同じ部品が原因でした。商品カードに並ぶ金属のスウォッチです。スウォッチはそれぞれ名前のないリンクで、幅は20ピクセル。指やポインタに必要な最小の24ピクセルを下回っていました。あるコレクションページには、それが490個ありました。スクリーンリーダーにとって、そのページは「リンク」という言葉が490回続くだけで、お客様はゴールドとローズゴールドとシルバーを区別できませんでした。
| 項目 | 計測 | 結果 |
|---|---|---|
| すべての写真に説明がある | 533枚の画像 | 合格 |
| ボタンに動作が書かれている | 62個のボタン | 合格 |
| 入力欄に何を入力するか書かれている | 42個の入力欄 | 合格 |
| 背景に対して文字が読める | 704箇所 | 合格 |
| ページに言語が指定されている | 3ページ | 合格 |
| キーボードでメニューをスキップできる | 3ページ | 合格 |
| スマートフォンでピンチで拡大できる | 3ページ | 合格 |
| スクリーンリーダーでセクション間を移動できる | 3ページ | 合格 |
| タブの移動順がページの並びどおり | 3ページ | 合格 |
| 各ページに中身の分かるタイトルがある | 3ページ | 合格 |
| アクセシビリティ方針へのリンクがある | サイト全体 | 合格 |
| リンクに行き先が書かれている | 1,125本のリンク | 526件 不合格 |
| ボタンがタップできる大きさ | すべての操作要素 | 不合格 |
テンプレートの、たった1行。
すべてのスウォッチは、商品カードのテンプレートが作っています。そこに1行加えるだけで、それぞれに名前が付きます。商品名と金属名です。これでスクリーンリーダーは「ハギー フープピアス、ローズゴールド ヴェルメイユ、リンク。」と読み上げます。作業は半日。あとでスクリーンリーダーによる再テストまで行った時間を含みます。
機械には決められないことが2つ、決められることが1つ。
ソフトウェアは名前を数え、ピクセルを測ることはできます。けれども、キーボードで操作するお客様が今ページのどこにいるか分かるかどうか、大きな画像に重ねた文字がどんな場合でも読めるかどうかまでは分かりません。この2つは推測で合格にせず、確認完了の前に人がテストする「要確認」として残しました。
3つ目はスウォッチの大きさそのものです。最小は24ピクセルで、これも同じテンプレートで決まります。
良かった点も、はっきり書きます。
警告書が指摘する項目の多くは、このストアではすでにできていました。画像の説明、ラベルの付いたフォーム、読みやすい文字、公開済みのアクセシビリティ方針です。本来もっと当たり前であってよいことですが、実際には多くありません。だから私たちは、不合格と同じくらいはっきり報告書に書きます。うまくいっている部分を知ることも、経営者には必要だからです。
スクリーンリーダーで買い物できるページと、記録。
すべてのスウォッチが自分の名前を伝えるコレクションページ。何をテストして何が見つかったかを書いた、日付入りの報告書。そして、次にキーボードとスクリーンリーダーで確認する項目の短いリスト。490個は、診断が数えた名前のないリンク526本の一部です。3ページで計測した結果であって、ストア全体についての主張ではありません。