Shopify の Prestige テーマを、13項目のアクセシビリティ診断にかけました。

この記事は米国のお客様に販売しているストア向けです。ADA は米国の法律で、米国向けストアフロントに適用されます。

何を、どこで実行したか

Shopify Theme Store に掲載されている Prestige のデモストア prestige-theme-allure.myshopify.com で、2026年9月7日に実行しました。対象は3ページです。トップページ、Sale コレクションページ、商品ページ「Le Nouveau Cartable Navy」を実際のブラウザでパソコン幅で開き、商品ページはスマートフォン幅でもう一度開いています。実行時間は16秒でした。以下の数値は、その日にブラウザが実際に数えたものです。

無料の Storefront Check（無料ストア診断） と同じ診断です。これは準拠の証明でも認定でもありません。13項目を数えた結果です。

結果の全項目

13項目中 9項目が合格です。不合格4件の件数自体は多くありません。129枚のうち4枚の画像に説明がなく、263個のうち19個の操作要素がタップするには小さく、314箇所のうち12箇所の文字が必要な比率に届いていません。判断保留になった項目はありません。このほかに、写真やグラデーションの上に載っている文字が73箇所あります。機械にはコントラストを測れない箇所で、人が見るために保留しています。

Prestige が良くできている点

この3ページにある87個のボタンには、すべてスクリーンリーダーが読める名前があります。168本のリンクはすべて行き先が分かります。6個の入力欄にはすべてラベルがあります。スキップリンクは機能します。ランドマークもあり、タブの移動順は変更されておらず、ピンチでの拡大も無効化されておらず、各ページに中身の分かるタイトルがあります。

これは点数より大事なことです。警告書で最も多く挙げられる不備は、名前のないリンク、名前のないボタン、ラベルのない入力欄ですが、このテーマは最初からそのどれも抱えていません。ページ上でいちばん小さい操作要素であるカルーセルのドットにも、きちんと名前が付いています。それぞれ「Go to item 1」「Go to item 2」と読み上げられます。

テーマ側の問題は3件

数値の裏側を確かめるため、私たちも同じ3ページを開きました。

• セール価格が薄すぎます。商品ページのセール価格は、ストアの背景色 #efefef の上に赤 #e32c2b、約17.8ピクセルで表示されます。コントラスト比は 3.91対1 です。このサイズの文字には 4.5対1 が必要です。売っている商品の価格そのものが、届いていません。
• カルーセルのドットが6ピクセルです。測定したドット型の操作要素は、いずれも6ピクセル四方でした。WCAG 2.2 AA が求めるのは24ピクセルです。商品ページのスマートフォン幅の実行では、大きさに関する不合格10件はすべてこのドットで、ほかにはありませんでした。名前は正しく付いているのに、指ではほとんど当たりません。
• 動画のサムネイル画像に説明がありません。テーマが動画を表示する箇所では、video 要素の中に静止画像が置かれていますが、alt 属性が一切ありません。3ページそれぞれで1件ずつ見つかりました。誰かがアップロードしたものではなく、テーマ側のマークアップです。

私たちの助言まずドットから直してください。ルール1つで、テーマ内のすべてのカルーセルに効きます。.tap-area に最小の幅と高さ24ピクセルを与えるか、6ピクセルのドットを24ピクセル分の余白を持つボタンで包んでください。見た目はドットのままにできます。デザインを変える必要はありません。指が探す範囲だけを変えます。

私たちの助言セール価格は、適当に濃い赤を選ばないでください。テーマのセール色を、ご自身のページ背景に対して 4.5対1 になるまで落とし、実際に販売しているページで確認します。選んだカラースキームによって背景が変わるためです。

読み込み中に見えたこと

見落としやすいので、1つだけ書いておきます。Prestige はヘッダーを大きな画像の上に重ねられます。その画像がまだ届いていない間、ヘッダーは白い文字をページの地色の上に描きます。その数秒間、メニューは薄いグレーの上の白文字になり、コントラスト比は 1.14対1 です。画像が表示されれば、同じ文字は白地に濃い色となり、問題ありません。

読み込み中に見た機械は、これを不合格として数えます。電波の悪い駐車場にいるお客様も同じものを見ます。慌てる話ではありませんが、画像が描画されるまではヘッダーに不透明な背景を持たせる理由にはなります。

どのテーマも代わりにできないこと

デモストアにはアクセシビリティ方針がありません。方針を同梱しているテーマもありません。方針とは、ストアをどうテストしているか、分かっている不具合は何か、困ったときにどこへ連絡すればよいかを書いたページです。このリストの中で最も費用がかからず、そして警告書をメールでの問い合わせに変えてくれることが最も多い項目です。

私たちの助言方針は診断の後に書いてください。先に書いてはいけません。ストアの実態より多くを約束する方針は、方針がないより悪い結果を招きます。書き方の参考には junand.co/ja/accessibility をご覧ください。

この結果が、あなたのストアについて語らないこと

デモストアはショールームです。画像は129枚ですが、実際のジュエリーストアには数百枚あります。リンクは168本ですが、直近に数えた運用中のストアは1,125本ありました。セールコレクションの商品は7点で、アプリも、サイズ表も、素材のスウォッチもなく、3年かけてセクションを足し続けた人もいません。

運用中の Prestige ストアで不合格になるもののほとんどは、テーマを入れた後に追加されたものです。説明を付けずにアップロードした商品写真。ラベルのないポップアップを表示するアプリ。写真の上に白い文字を置いたカスタムセクション。「リンク」としか読み上げられないカラースウォッチ。

テーマの点数が、あなたのストアの点数ではない理由。デモストアでの13項目中9項目という結果は、土台がまずまずで、テーマ側に直すべき点が3つあることを示しています。上限については何も示していません。あなたのストアにとって意味のある数字は、あなたのストアで数えた数字だけです。

Prestige をお使いなら、まずこの4点を

• セール価格。テーマのセール色をそのまま使っていると、値引き中の商品ページはすべて同じ薄い価格表示になります。CSS の値1つです。
• ストア内のすべてのカルーセル。ドットは、トップの大画像でも、レビューでも、商品画像でも、関連商品でも、どこに出ても6ピクセルです。
• 商品写真。Prestige は代替テキスト（alt）を書いてくれません。アップロードした画像1枚ごとに、何が写っているかの説明が必要です。
• 写真の上に置いた文字。デモストアの時点で、画像の上に載っている文字が73箇所あり、機械では測れません。運用中のストアでは、さらに増えます。

4点とも1分ほどで確認できます。無料診断にストアのアドレスを貼り付ければ、こちらで数えます。

次回

今回のもう1本は Impulse です。同じ方法で、同じ3種類のページを診断します。そのあとは Symmetry、Sense、Craft と続きます。テーマが合格した項目も含めて、毎回すべての結果を公開します。