harborandpine.example

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：キーボードフォーカスがCookieバナーから抜け出せない（WCAG 2.1.2）。
場所：1ページで1件（例：/）。

ブラウザが描画した、不合格の要素の1つ：
```html
Settings
```

なぜ重要なのか：フォーカスが閉じ込められると、キーボードのみの利用者やスクリーンリーダーの利用者はまったく買い物ができません（WCAG 2.1.2 キーボードトラップなし）。

変更が必要な点：
- CookieバナーまたはCookie同意バナーのアプリの設定に、アクセシビリティやフォーカストラップに関するオプションがないか確認するか、提供元に修正を依頼してください。
- モーダルがフォーカスを内部に保持してよいのは開いている間だけで、Escapeキーで閉じられ、フォーカスを元の位置に戻す必要があります。

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：キーボードで商品のオプションを選べない（WCAG 2.1.1）。
場所：1ページで1件（例：/products/trail-daypack）。

ブラウザが描画した、不合格の要素の1つ：
```html
<div class="size-option" data-fr="opt-1">S</div>
```

なぜ重要なのか：多くのスクリーンリーダー利用者を含め、キーボードのみの買い物客はこのステップから先に進めません（WCAG 2.1.1）。

変更が必要な点：
- オプションの選択欄は、表示ラベル付きのネイティブのラジオボタン（または<select>）で作り、ラベルをスウォッチとしてスタイル設定します。
- カスタム要素を使い続ける場合は、各オプションにtabindex="0"、role="radiogroup"の中でaria-checkedを伴うrole="radio"、矢印キーとSpaceキーの処理が必要です。ネイティブのラジオボタンなら、これらすべてが最初から備わっています。

変更の提案（テーマの商品フォーム（バリエーションの選択欄））：
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：ボタンには認識可能なテキストが存在しなければなりません（WCAG 4.1.2）。
場所：9ページで41件（例：/、/collections/all、/products/trail-daypack、/cart）。

ブラウザが描画した、不合格の要素の1つ：
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

なぜ重要なのか：WCAG 4.1.2では、すべてのコントロールに名前が求められます。名前のないボタンには、数量の増減ボタン、閉じるボタン、スライダーの矢印がよくあります。

変更が必要な点：
- 下の例にあるボタンを探します。
- ボタンの機能を示す表示テキスト、視覚的に非表示のテキスト、またはaria-labelを追加します（例：aria-label="Close"やaria-label="Increase quantity"）。

変更の提案（テーマのコード（表示されているマークアップで検索してください））：
```html
<button type="button" aria-label="[What this button does]">…</button>
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：画像には代替テキストがなければなりません（WCAG 1.1.1）。
場所：7ページで22件（例：/、/collections/all、/products/trail-daypack、/products/pine-wool-beanie）。

ブラウザが描画した、不合格の要素の1つ：
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

なぜ重要なのか：WCAG 1.1.1では、意味のある画像に代替テキストが求められます。代替テキストがないと、スクリーンリーダーの利用者は写真がどの商品を写しているのかを判断できません。

変更が必要な点：
- Shopifyの管理画面で「商品管理 > [商品] > メディア」を開き、各画像をクリックして「代替テキスト」を入力します。セクションの画像は、「オンラインストア > テーマ > カスタマイズ」を開き、セクションの設定で画像の代替テキストを設定します。
- 買い物客にとって重要な情報、つまり商品名、色、写っている角度を記述します（例：「キャンバストートバッグ、オリーブ、正面」）。
- 装飾目的の画像は、スクリーンリーダーが読み飛ばすように空のalt属性（alt=""）にします。

変更の提案（商品写真：Shopifyの管理画面 › 商品管理 › メディア › 代替テキスト。その他の画像：テーマのコード）：
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：フォーム要素にはラベルがなければなりません（WCAG 4.1.2）。
場所：6ページで7件（例：/products/trail-daypack、/cart、/products/pine-wool-beanie、/products/enamel-camp-mug）。

ブラウザが描画した、不合格の要素の1つ：
```html
<input type="number" value="1" min="1">
```

なぜ重要なのか：WCAG 1.3.1、3.3.2、4.1.2では、フォーム入力欄にラベルが求められます。よく問題になるのは、メールマガジンの登録欄や検索欄です。

変更が必要な点：
- 各入力欄に<label for="field-id">要素を付けるか、少なくともaria-labelを付けます。
- プレースホルダーテキストだけではラベルとみなされません。

変更の提案（テーマのコード（表示されているマークアップで検索してください））：
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：select要素にはアクセシブルな名前がなければなりません（WCAG 4.1.2）。
場所：1ページで1件（例：/collections/all）。

ブラウザが描画した、不合格の要素の1つ：
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

なぜ重要なのか：WCAG 4.1.2では、セレクトメニューにアクセシブルな名前が求められます。

変更が必要な点：
- select要素に関連付けた<label>か、aria-label="Sort by"のようなaria-labelを追加します。

変更の提案（テーマのコード（表示されているマークアップで検索してください））：
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：リンクには認識可能なテキストがなければなりません（WCAG 2.4.4、4.1.2）。
場所：9ページで36件（例：/、/collections/all、/products/trail-daypack、/cart）。

ブラウザが描画した、不合格の要素の1つ：
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

なぜ重要なのか：WCAG 2.4.4と4.1.2では、リンクにその目的を説明するアクセシブルな名前が求められます。

変更が必要な点：
- 下の例にあるリンクを探します。ほとんどは<a>タグ内のアイコンや画像です。
- リンク内に視覚的に非表示のテキストを追加するか、aria-label="Instagram"やaria-label="Cart"のようなaria-labelを追加します。
- リンクが画像を囲んでいる場合は、代わりにその画像に意味のある代替テキストを付けます。

変更の提案（テーマのコード（表示されているマークアップで検索してください））：
```html
<a href="/cart" aria-label="Cart">…</a>
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません（WCAG 1.4.3）。
場所：9ページで22件（例：/、/collections/all、/products/trail-daypack、/cart）。

ブラウザが描画した、不合格の要素の1つ：
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

なぜ重要なのか：WCAG 1.4.3では、通常のテキストで4.5:1以上、大きなテキストで3:1以上のコントラスト比が求められます。薄い色の価格、バッジ、バナーは、ロービジョンの人にとっても、明るい場所にいるすべての人にとっても読みにくくなります。

変更が必要な点：
- 下に一覧表示された不合格の要素を開き、不合格の概要に記載された前景色と背景色を控えます。
- 「オンラインストア > テーマ > カスタマイズ > テーマ設定 > 色」で、該当する配色のテキストの色を濃くするか背景を明るくして、比率を4.5:1以上にします。
- セールのバッジ、プレースホルダーテキスト、フッターのリンク、画像上のボタンには特に注意してください。

変更の提案（テーマ設定 › 色、またはテーマのCSSファイル）：
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：ページのすべてのコンテンツはlandmarkに含まれていなければなりません。
場所：9ページで18件（例：/、/collections/all、/products/trail-daypack、/cart）。

ブラウザが描画した、不合格の要素の1つ：
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

なぜ重要なのか：ランドマークがあると、スクリーンリーダーの利用者はページ内をすばやく移動できます。これはWCAG 1.3.1と2.4.1を補うベストプラクティスです。

変更が必要な点：
- ランドマークの外にあるコンテンツ（お知らせバー、ポップアップ、チャットウィジェット）を適切なランドマークで囲むか、<main>の中に配置します。

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。

harborandpine.exampleでShopifyストア（Online Store 2.0テーマ、Liquidテンプレート）を運営しています。アクセシビリティのテストでこの問題が見つかったので、テーマで修正したいと考えています。

問題：見出しのレベルは1つずつ増加させなければなりません。
場所：7ページで7件（例：/collections/all、/products/trail-daypack、/pages/about、/products/pine-wool-beanie）。

ブラウザが描画した、不合格の要素の1つ：
```html
<h3>Trail Daypack 22L</h3>
```

なぜ重要なのか：スクリーンリーダーの利用者は、見出しを使ってページ内を移動します。これはWCAG 1.3.1を補うベストプラクティスです。

変更が必要な点：
- 該当するセクションの見出しのレベルを、レベルを飛ばさずに順番どおりになるよう調整します。
- 変更するのはタグだけで、見た目のスタイルは変えません（サイズにはCSSのクラスを使います）。

変更の提案（テーマのコード（表示されているマークアップで検索してください））：
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

回答のルール：
- 正確な変更内容を修正前と修正後の形で示し、変更を加えるファイルまたは設定の名前を挙げてください。先に私のファイルを確認する必要がある場合は、貼り付けるよう依頼してください。
- 見た目のデザインと既存の動作はすべてそのまま維持してください。
- 商品名、価格、テキストを創作せず、私が後から記入できるプレースホルダーを使ってください。
- 最後に、私自身が修正を確認する方法を示してください。
- キーボードとスクリーンリーダーで確認する方法も含めてください。