Jun & Co.Shopify · Klaviyo · ADAアクセシビリティ
ジュエリーストアを運営している方へ

目の見えないお客様ができないことは、見ているだけでは分かりません。

テーマの作りが良く、商品は数千点。それでも、たった一つの部品のせいで、スクリーンリーダーで買い物をするお客様にはコレクションページ全体が使えない状態でした。

実際のストア(匿名):ニューヨークのファインジュエリー店 · アクセシビリティ
133ページで実施した項目
11合格
490名前のないスウォッチ
半日再テストまで含めた修正時間
相談に来たとき

誰からも苦情が来ていないストアでした。

警告書(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つは推測で合格にせず、確認完了の前に人がテストする「要確認」として残しました。

3つ目はスウォッチの大きさそのものです。最小は24ピクセルで、これも同じテンプレートで決まります。

ほかに気づいたこと

良かった点も、はっきり書きます。

警告書が指摘する項目の多くは、このストアではすでにできていました。画像の説明、ラベルの付いたフォーム、読みやすい文字、公開済みのアクセシビリティ方針です。本来もっと当たり前であってよいことですが、実際には多くありません。だから私たちは、不合格と同じくらいはっきり報告書に書きます。うまくいっている部分を知ることも、経営者には必要だからです。

今の状態

スクリーンリーダーで買い物できるページと、記録。

すべてのスウォッチが自分の名前を伝えるコレクションページ。何をテストして何が見つかったかを書いた、日付入りの報告書。そして、次にキーボードとスクリーンリーダーで確認する項目の短いリスト。490個は、診断が数えた名前のないリンク526本の一部です。3ページで計測した結果であって、ストア全体についての主張ではありません。

心当たりはありませんか?

$297の診断から始める