アクセシビリティ
Theme Storeの要件を目安に、キーボード操作・支援技術・視認性の基本を満たすテーマを作れる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、キーボード操作・支援技術（読み上げソフトなど）・視認性の基本を満たすテーマを作れるようになります。
受託では、Theme Storeの要件に具体的な数値があるので、それを目安にすると説明しやすくなります。
セマンティクスとは
HTMLの要素を、意味どおりに使うことです。
見出しの階層、nav / main / footer、ボタンとリンクの使い分けが基本です。
`div`にクリックを付けません。
<html lang="{{ request.locale.iso_code }}">も忘れないようにします。
フォーカスとキーボード、ARIAの基本
:focus-visible（キーボードで選んだ要素の枠）を消しません。
スキップリンクを置き、ドロワーやモーダルではフォーカストラップ（Tabが中で循環する仕組み）とEscで閉じる動きを付けます。
フォーカス順はDOM順です。
ARIAは、アコーディオン（aria-expanded）、タブ（role="tablist"）、バリエーション選択（fieldset / legend）、ライブリージョン（カート追加の通知）で使います。
視認性の目安
本文のコントラスト比は4.5:1（大きい文字とアイコンは3:1）です。
テーマ設定で色を自由にできる分、既定値で担保します。prefers-reduced-motion（動きを減らす設定）のときは、アニメーションを抑えます。
タッチ領域は、24×24px以上にします。
どうテストするか
キーボードだけで、購入完了まで進めるかを試します。
axe DevToolsで検査し、スクリーンリーダー（読み上げソフト）で商品名と価格が読まれるかを確かめます。
キーボードで買えるか、読み上げで分かるかは「特別対応」ではなく、購入の基本です。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。