Shopify ストアへのアクセシビリティ請求が実際に指摘していること。

この記事は米国のお客様に販売しているストア向けです。日本から米国へ販売している場合も同じことが当てはまります。

短い一覧

警告書（demand letter）を100通読むと、出てくる項目はいつも同じです。スキャンで見つけているからで、スキャンは数えられるものしか見つけられません。おおよそ多い順に並べます。

1. 代替テキスト（alt）のない画像。 商品写真も、バナーも、すべてです。最も多く挙げられる不備です。
2. 名前のないリンク。 色や金属のスウォッチ、画像のリンク、「続きを読む」、SNS のアイコン。スクリーンリーダーにとっては、どれも「リンク」という言葉だけで、そのあとには何もありません。
3. 名前のないボタン。 カートのアイコン、検索のアイコン、ハンバーガーメニュー、ポップアップの閉じるボタン。
4. ラベルのない入力欄。 検索ボックス、メールの登録フォーム、数量の入力欄。
5. コントラスト不足。 白地に灰色の文字、そして写真の上に重ねたすべての文字。
6. キーボードの行き止まりと、見えないフォーカス。 タブで入れるのに出られないメニューやカートドロワー、あるいはテーマが消してしまったフォーカスの枠線。
7. メニューをスキップするリンクがない、ランドマーク（ページの区切り）がない。 キーボードで操作する人は、どのページでもヘッダー全体をタブで通過しなければなりません。
8. タップするには小さすぎる操作要素。 24ピクセル未満のスウォッチやアイコン。
9. アクセシビリティ方針がない。 コードの不備ではありませんが、ないことは気づかれます。

Shopify のテーマにそれが残る理由

Shopify がこの分野に弱いからではありません。主要なテーマは、まともな状態で配布されています。不備は後から、3つのところから入ってきます。

• カスタマイズ。 スウォッチ、バッジ、独自のセクション、そして誰かが解説記事を見て追加した「クイック追加」ボタン。そのたびに、名前のない操作要素が生まれます。
• アプリ。 レビュー、お気に入り、ポップアップ、チャット、サイズガイド。どれも自分のコードと、自分の不備を、すべてのページに差し込みます。
• コンテンツ。 ある日の午後に、2,000枚の商品画像の代替テキスト（alt）を書ききる人はいません。だから欄は空のままか、ファイル名が入ります。

それは誰のコードか。 ほとんどの Shopify のプランでは、チェックアウトは Shopify のコードで、変更できません。チェックアウトより前は、すべてあなたのものです。テーマ、セクション、アプリ、コンテンツ。請求はその両方を名指しします。弁護士にはどちらがどちらか分かる必要があり、それは診断で分かります。

私たちの助言お金を払っているアプリの提供元すべてに、アクセシビリティ方針を送ってほしいとメールしてください。1日で返ってくるところは、たいてい問題ありません。返事がないところが、最初にテストすべきアプリです。

今夜できる確認

1. 無料診断を実行。 ストアのアドレスを貼り付けると、13項目の自動チェックの結果が件数付きで出ます。1分ほどで終わります。
2. マウスから手を離す。 商品ページで Tab キーを何度も押してください。今どこにいるか分かりますか。カートに追加するボタンまでたどり着けますか。カートを開いて、また出られますか。
3. スマートフォンのスクリーンリーダーを使う。 iPhone なら VoiceOver、Android なら TalkBack。コレクションページを開いて、商品をスワイプしていきます。「リンク」とだけ読み上げて、そのあとに何も続かない箇所を探してください。
4. 200パーセントまで拡大する。 重なったり、消えたり、動かなくなったりするものはありませんか。
5. 商品画像を5枚開いて、代替テキスト（alt）を読む。 Shopify の管理画面では、画像ごとに入力欄があります。空欄は、空欄のままということです。

私たちの助言スマートフォンでのテストは、ホームページではなく、いちばん売れている商品ページとそのコレクションページで行ってください。請求で名指しされる可能性が最も高いページであり、スキャンもそこを見るからです。そしてカートドロワーを開いた状態でも試してください。キーボードの行き止まりは、そこにあります。

最初の2つで問題が見つかれば、自動チェックでも見つかります。これで一覧ができます。何も見つからなければ、多くのストアより進んでいます。あとは、診断で行う手作業の確認です。

何をすれば直るか

テーマのテンプレートで、すべてのリンクとボタンに名前を付けること。すべての入力欄にラベルを付けること。すべての画像に代替テキスト（alt）を、一度書いてまとめてアップロードすること。写真の上の文字のコントラストを見直すこと。メニューをスキップするリンクとランドマーク（ページの区切り）を入れること。これは小さな修正です。そのうえで、キーボードとスクリーンリーダーによる再テストを行い、何をしたか、問題をどこに知らせればよいかを書いたアクセシビリティ方針のページを用意します。オーバーレイ型ツールは決して使いません。請求が指摘するコードを、何も変えないからです。

私たちの助言まず商品カードのテンプレートを直してください。すべてのコレクションページで繰り返されるので、一度の修正で数百件の指摘がまとめて片づきます。最初の事例のストアでは、そのテンプレートの1行で、名前のないリンク490個がゼロになりました。