E-Commerce WCAG対応｜ECサイトで実装すべきアクセシビリティ要件

ECサイトにおけるWCAG対応とは、すべてのユーザーが商品を探し、比較し、カートへ追加し、購入手続きを完了できるように、アクセシビリティ要件を満たしたUIと実装を行うことです。ECサイトでは、商品検索、カテゴリ移動、商品一覧、商品詳細、カート、会員登録、ログイン、決済フォームなど、ユーザーが操作する画面が非常に多く存在します。そのため、一部の画面だけがアクセシブルでも、購入フロー全体としては不十分になる場合があります。

特にECサイトでは、アクセシビリティの問題がそのまま売上機会の損失につながります。商品検索フォームにラベルがない、商品画像に代替テキストがない、サイズ選択がキーボードで操作できない、カート追加後の通知がスクリーンリーダーに伝わらない、決済フォームのエラー内容が分かりにくいといった問題は、ユーザーの購入を妨げます。アクセシビリティ対応は、単なる法規制対応ではなく、ユーザーが安心して買い物できるEC体験を支える基盤です。

また、WCAG対応は、視覚障害、聴覚障害、運動機能の制約、色覚多様性、認知負荷、モバイル利用環境など、さまざまな利用状況を考慮する設計でもあります。ECサイトでは、年齢、デバイス、通信環境、操作方法が異なる幅広いユーザーが訪問します。そのため、アクセシビリティを高めることは、より多くのユーザーにとって使いやすいサイトを作ることにもつながります。

本記事では、ECサイトで実装すべきWCAG対応を、検索、ナビゲーション、商品一覧、商品画像、商品詳細、バリエーション選択、カート、チェックアウト、決済、会員登録、ログイン、モーダル、色覚対応、モバイル、スクリーンリーダー、エラー処理、テスト、継続改善の観点から体系的に解説します。

1. WCAG対応の重要性

ECサイトにおけるWCAG対応は、すべてのユーザーが平等に商品を閲覧し、比較し、購入できる状態を作るために重要です。アクセシビリティが不十分なECサイトでは、商品情報に到達できない、購入ボタンを操作できない、決済フォームを完了できないといった問題が発生します。これはユーザー体験の問題であると同時に、ビジネス上の損失にもつながります。

1.1 アクセシビリティ向上

アクセシビリティ向上とは、障害の有無や利用環境に関係なく、誰でもECサイトを使えるようにすることです。商品情報、価格、在庫、レビュー、配送情報、返品条件などは、視覚的に見えるだけでなく、スクリーンリーダーやキーボード操作でも理解できる必要があります。

ファイル名: accessible-product-heading.html / 使用言語: HTML

<main>  <h1>ワイヤレスイヤホン Pro</h1>  <section aria-labelledby="product-summary-title">    <h2 id="product-summary-title">商品概要</h2>    <p>ノイズキャンセリング対応のワイヤレスイヤホンです。</p>  </section> </main>

1.2 ユーザー層の拡大

WCAG対応を行うことで、より多くのユーザーがECサイトを利用しやすくなります。アクセシビリティは特定のユーザーだけのためではなく、スマートフォンで片手操作する人、暗い場所で画面を見る人、高齢者、小さな文字が読みづらい人、キーボード中心で操作する人にも効果があります。

ECサイトでは、利用者層が広いほどアクセシビリティの価値が高まります。商品情報を分かりやすく整理し、フォームを入力しやすくし、購入導線を明確にすることで、ユーザー層全体の利用しやすさが向上します。

1.3 法規制への対応

多くの国や地域では、Webアクセシビリティへの対応が法務・コンプライアンス上の重要テーマになっています。特にECサイトは商取引を行う場であるため、利用できないユーザーが生まれると、機会損失やクレーム、信頼低下につながる可能性があります。

法規制対応として考える場合でも、単にチェックリストを満たすだけでは不十分です。ユーザーが実際に商品を探し、購入を完了できるかを確認する必要があります。WCAG対応は、デザイン、実装、QA、運用を含めた継続的な品質管理として扱うことが重要です。

2. キーボード操作対応

ECサイトでは、すべての主要操作をキーボードだけで完了できる必要があります。商品検索、カテゴリ移動、商品選択、サイズ選択、カート追加、数量変更、決済フォーム入力などがキーボードで操作できない場合、ユーザーは購入フローを完了できません。

2.1 全機能のキーボード操作

全機能のキーボード操作とは、マウスを使わずにTab、Enter、Space、Arrow、EscなどのキーだけでECサイトの主要機能を操作できる状態を指します。特にボタン、リンク、フォーム、ドロップダウン、モーダル、数量変更UIは必ずキーボード対応が必要です。

ファイル名: keyboard-cart-button.html / 使用言語: HTML

<button type="button" id="add-to-cart">  カートに入れる </button>

標準のbutton要素を使えば、EnterキーやSpaceキーで自然に操作できます。クリック可能なdivでボタンを作ると、キーボード操作や支援技術対応が不足しやすくなります。

2.2 Tab順序の最適化

Tab順序は、画面の見た目と操作の流れに沿っている必要があります。商品ページで、商品名、価格、サイズ選択、数量、カートボタンの順に見えているなら、Tabキーの移動順序もその流れに合わせるべきです。順序が飛ぶと、ユーザーは現在位置を見失いやすくなります。

ファイル名: product-form-tab-order.html / 使用言語: HTML

<form class="product-form">  <fieldset>    <legend>サイズを選択</legend>    <label>      <input type="radio" name="size" value="s">      S    </label>    <label>      <input type="radio" name="size" value="m">      M    </label>  </fieldset>  <label for="quantity">数量</label>  <input id="quantity" type="number" min="1" value="1">  <button type="submit">カートに入れる</button> </form>

2.3 フォーカス状態の可視化

キーボード利用者にとって、現在どの要素を操作しているかが見えることは非常に重要です。フォーカスリングを消してしまうと、ユーザーは現在位置を把握できません。ECサイトでは、購入ボタン、サイズ選択、数量変更、フォーム入力、決済ボタンなど、重要な操作要素ほど明確なフォーカス表示が必要です。

ファイル名: focus-visible.css / 使用言語: CSS

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {  outline: 3px solid #2563eb;  outline-offset: 3px; }

3. 商品検索機能

商品検索はECサイトの中心機能です。検索フォームがアクセシブルでなければ、ユーザーは目的の商品を見つけられません。検索フォーム、オートコンプリート、検索結果通知まで含めて設計する必要があります。

3.1 検索フォームのラベル設定

検索フォームには、視覚的なプレースホルダーだけでなく、適切なラベルが必要です。プレースホルダーは入力を始めると消えるため、ラベルの代わりにはなりません。スクリーンリーダー利用者にも検索欄の目的が伝わるようにします。

ファイル名: search-form.html / 使用言語: HTML

<form role="search" action="/search">  <label for="product-search">商品を検索</label>  <input    id="product-search"    name="q"    type="search"    placeholder="商品名・カテゴリで検索"  >  <button type="submit">検索する</button> </form>

3.2 オートコンプリート対応

オートコンプリートは検索効率を高めますが、アクセシビリティ対応が不十分だと、候補が表示されてもスクリーンリーダーに伝わらなかったり、キーボードで選択できなかったりします。候補リストはArrowキーで移動し、Enterキーで選択できるようにすることが重要です。

ファイル名: search-autocomplete.html / 使用言語: HTML

<label for="search">商品検索</label> <input  id="search"  type="search"  aria-autocomplete="list"  aria-controls="search-suggestions"  aria-expanded="true" > <ul id="search-suggestions" role="listbox">  <li role="option">スニーカー</li>  <li role="option">スニーカー レディース</li>  <li role="option">スニーカー 防水</li> </ul>

3.3 検索結果の読み上げ対応

検索結果が更新された場合、スクリーンリーダー利用者にも結果件数や状態が伝わる必要があります。検索結果の件数をaria-live領域で通知すると、動的な更新を理解しやすくなります。

ファイル名: search-result-status.html / 使用言語: HTML

<p id="search-status" aria-live="polite">  32件の商品が見つかりました。 </p> <section aria-labelledby="search-result-title">  <h2 id="search-result-title">検索結果</h2> </section>

4. 商品カテゴリナビゲーション

カテゴリナビゲーションは、商品を探すための重要な導線です。カテゴリ階層が複雑なECサイトでは、構造が分かりにくいとユーザーが目的の商品に到達できません。視覚的なメニューだけでなく、HTML構造やARIA対応も重要です。

4.1 階層構造の明確化

カテゴリは、親カテゴリと子カテゴリの関係が分かるように構造化します。見た目だけで階層を表現するのではなく、リスト構造を使うことで支援技術にも関係性を伝えやすくなります。

ファイル名: category-navigation.html / 使用言語: HTML

<nav aria-label="商品カテゴリ">  <ul>    <li>      レディース      <ul>        <li><a href="/category/women/shoes">シューズ</a></li>        <li><a href="/category/women/bags">バッグ</a></li>      </ul>    </li>  </ul> </nav>

4.2 メニューのARIA対応

開閉式カテゴリメニューでは、開閉状態をaria-expandedで伝える必要があります。また、制御対象のメニューとボタンをaria-controlsで関連付けると、状態が理解しやすくなります。

ファイル名: category-menu-button.html / 使用言語: HTML

<button  type="button"  aria-expanded="false"  aria-controls="women-category-menu" >  レディースカテゴリ </button> <ul id="women-category-menu" hidden>  <li><a href="/category/women/tops">トップス</a></li>  <li><a href="/category/women/shoes">シューズ</a></li> </ul>

4.3 パンくずリストの実装

パンくずリストは、ユーザーが現在どのカテゴリにいるのかを理解するために重要です。ECサイトではカテゴリ階層が深くなりやすいため、パンくずリストがあると、ユーザーは上位カテゴリへ戻りやすくなります。

ファイル名: ecommerce-breadcrumb.html / 使用言語: HTML

<nav aria-label="パンくずリスト">  <ol>    <li><a href="/">ホーム</a></li>    <li><a href="/category">カテゴリ</a></li>    <li><a href="/category/shoes">シューズ</a></li>    <li aria-current="page">スニーカー</li>  </ol> </nav>

5. 商品一覧ページ

商品一覧ページでは、複数の商品カードが並びます。商品名、価格、画像、リンク、在庫、セール情報などを分かりやすく構造化し、キーボードやスクリーンリーダーでも理解できるようにする必要があります。

5.1 商品カードの構造化

商品カードは、画像、商品名、価格、リンク、ボタンを含む重要なUIです。見た目だけでカード全体をクリック可能にするのではなく、商品名リンクやボタンを明確にします。

ファイル名: product-card.html / 使用言語: HTML

<article class="product-card">  <img src="/images/sneaker.webp" alt="白いレザースニーカー">  <h2>    <a href="/products/white-sneaker">      白いレザースニーカー    </a>  </h2>  <p class="price">¥12,800</p>  <button type="button">    カートに入れる  </button> </article>

5.2 価格情報の明確化

価格はECサイトにおいて非常に重要な情報です。セール価格、通常価格、割引率、税込・税抜の区別が曖昧だと、ユーザーは購入判断をしにくくなります。視覚的な色や装飾だけでなく、テキストでも意味が分かるようにします。

ファイル名: product-price.html / 使用言語: HTML

<p>  <span class="sale-price">セール価格: ¥8,800</span>  <span class="original-price">通常価格: ¥12,800</span> </p>

5.3 商品リンクの識別性

商品リンクは、スクリーンリーダーやキーボード操作でも識別しやすくする必要があります。「詳細を見る」だけのリンクが複数並ぶと、どの商品へのリンクか分かりにくくなります。商品名をリンクにするか、リンク文言に商品名を含めます。

ファイル名: product-link.html / 使用言語: HTML

<a href="/products/noise-canceling-earbuds">  ノイズキャンセリングイヤホンの商品詳細を見る </a>

6. 商品画像対応

ECサイトでは画像が購買判断に大きく影響します。しかし、画像だけに情報を依存させると、画像を見られないユーザーに内容が伝わりません。商品画像、装飾画像、画像ギャラリーを適切に扱う必要があります。

6.1 alt属性の設定

商品画像には、商品を識別できる具体的な代替テキストを設定します。「画像」や「商品写真」だけでは不十分です。色、形、種類、特徴など、購入判断に必要な情報を簡潔に含めます。

ファイル名: product-image-alt.html / 使用言語: HTML

<img  src="/images/black-leather-bag.webp"  alt="黒いレザートートバッグの正面写真" >

6.2 装飾画像の適切な処理

装飾目的の画像は、スクリーンリーダーに読み上げさせる必要がありません。意味を持たない装飾画像にはalt=""を設定します。不要な読み上げを防ぐことで、ユーザーは重要な情報に集中できます。

ファイル名: decorative-image.html / 使用言語: HTML

<img src="/images/background-pattern.svg" alt="">

6.3 画像ギャラリー操作対応

商品画像ギャラリーでは、サムネイルの選択、前後移動、拡大表示などがキーボードで操作できる必要があります。選択中の画像状態も明確に示します。

ファイル名: product-gallery.html / 使用言語: HTML

<div class="product-gallery">  <img id="main-product-image" src="/images/shoe-front.webp" alt="スニーカー正面">  <button type="button" aria-controls="main-product-image">    正面画像を表示  </button>  <button type="button" aria-controls="main-product-image">    側面画像を表示  </button> </div>

7. 商品詳細ページ

商品詳細ページは、購入判断に必要な情報が集まる重要な画面です。見出し構造、価格、説明、仕様、レビュー、配送情報、返品条件を分かりやすく整理する必要があります。

7.1 見出し階層の最適化

商品詳細ページでは、商品名をh1にし、商品概要、仕様、レビュー、配送情報などをh2で整理します。見出し階層が正しいと、スクリーンリーダー利用者もページ構造を理解しやすくなります。

ファイル名: product-detail-headings.html / 使用言語: HTML

<main>  <h1>ノイズキャンセリングイヤホン Pro</h1>  <section>    <h2>商品説明</h2>    <p>長時間再生に対応したワイヤレスイヤホンです。</p>  </section>  <section>    <h2>レビュー</h2>  </section> </main>

7.2 商品情報の構造化

商品仕様は、表や定義リストを使って構造化します。サイズ、素材、重量、対応機種、保証期間などは、項目名と値の関係が分かるようにすると理解しやすくなります。

ファイル名: product-specification.html / 使用言語: HTML

<dl>  <dt>重量</dt>  <dd>約250g</dd>  <dt>素材</dt>  <dd>アルミニウム、ポリカーボネート</dd>  <dt>保証期間</dt>  <dd>1年間</dd> </dl>

7.3 レビュー情報のアクセシビリティ

レビューでは、星評価をアイコンだけで表現しないようにします。視覚的な星に加えて、テキストで評価値を伝える必要があります。

ファイル名: product-review-rating.html / 使用言語: HTML

<p aria-label="5点中4.5点の評価">  ★★★★☆  <span>4.5 / 5</span> </p>

8. 商品バリエーション選択

サイズ、カラー、素材、容量などのバリエーション選択は、ECサイトで頻繁に使われるUIです。見た目だけのカスタムボタンにすると、選択状態や操作方法が伝わりにくくなるため注意が必要です。

8.1 サイズ選択UI

サイズ選択は、ラジオボタンやボタングループとして実装します。選択肢が一つだけ選ばれる場合は、ラジオボタンの意味に近いUIになります。

ファイル名: size-selector.html / 使用言語: HTML

<fieldset>  <legend>サイズを選択</legend>  <label>    <input type="radio" name="size" value="s">    S  </label>  <label>    <input type="radio" name="size" value="m">    M  </label>  <label>    <input type="radio" name="size" value="l">    L  </label> </fieldset>

8.2 カラー選択UI

カラー選択では、色だけで選択肢を表現しないことが重要です。色覚多様性に配慮し、色名をテキストやaria-labelで伝えます。

ファイル名: color-selector.html / 使用言語: HTML

<fieldset>  <legend>カラーを選択</legend>  <label>    <input type="radio" name="color" value="black">    ブラック  </label>  <label>    <input type="radio" name="color" value="red">    レッド  </label> </fieldset>

8.3 選択状態の明示

選択状態は、色や枠線だけでなく、テキストや属性でも示します。支援技術が状態を理解できるように、標準フォーム要素を使うことが基本です。

9. カート機能

カート機能では、商品追加、数量変更、削除、合計金額確認など、多くの操作が発生します。操作後の状態変化を明確に伝えることが重要です。

9.1 商品追加通知

商品をカートに追加した後は、視覚的な通知だけでなく、スクリーンリーダーにも状態変化を伝えます。aria-liveを使うと、動的な通知を読み上げられます。

ファイル名: cart-live-region.html / 使用言語: HTML

<button type="button" id="add-to-cart">  カートに入れる </button> <p id="cart-status" aria-live="polite"></p>

ファイル名: cart-live-region.js / 使用言語: JavaScript

const status = document.querySelector("#cart-status"); document.querySelector("#add-to-cart").addEventListener("click", () => {  status.textContent = "商品をカートに追加しました。"; });

9.2 数量変更操作

数量変更は、キーボードで入力または増減できるようにします。現在数量、最小値、最大値を明確に設定します。

ファイル名: cart-quantity.html / 使用言語: HTML

<label for="quantity">数量</label> <input id="quantity" type="number" min="1" max="10" value="1">

9.3 削除操作の分かりやすさ

削除操作は誤操作を防ぐ必要があります。「削除」だけでなく、どの商品を削除するのか分かる文言にします。

ファイル名: cart-remove-button.html / 使用言語: HTML

<button type="button" aria-label="白いスニーカーをカートから削除">  削除 </button>

10. チェックアウト画面

チェックアウト画面は、ECサイトで最も重要な購入完了前の画面です。フォームが分かりにくい、エラーが理解できない、必須項目が不明確といった問題があると、購入離脱につながります。

10.1 入力フォームのラベル

すべての入力欄にはラベルを設定します。住所、氏名、電話番号、メールアドレス、配送方法など、入力目的が明確に伝わるようにします。

ファイル名: checkout-form-labels.html / 使用言語: HTML

<label for="full-name">氏名</label> <input id="full-name" name="fullName" autocomplete="name"> <label for="postal-code">郵便番号</label> <input id="postal-code" name="postalCode" autocomplete="postal-code">

10.2 必須項目の明示

必須項目は、色だけでなくテキストでも明示します。スクリーンリーダーにも伝わるようにrequiredや説明文を適切に使います。

ファイル名: required-field.html / 使用言語: HTML

<label for="email">  メールアドレス <span aria-hidden="true">必須</span> </label> <input id="email" type="email" required>

10.3 エラー表示の最適化

エラーは、どの項目に問題があり、どう修正すればよいかを具体的に伝えます。送信後にページ上部へエラー一覧を出し、各項目へリンクできるようにすると便利です。

ファイル名: checkout-error-message.html / 使用言語: HTML

<p id="email-error">  メールアドレスの形式が正しくありません。例: [email protected] </p> <input  id="email"  type="email"  aria-invalid="true"  aria-describedby="email-error" >

11. 決済フォーム

決済フォームは、ユーザーが最も不安を感じやすい入力画面です。カード番号、有効期限、セキュリティコードなど、入力形式が決まっている項目では、入力補助とエラー表示が重要になります。

11.1 入力補助機能

入力補助により、ユーザーのミスを減らせます。カード番号にはinputmode="numeric"を設定し、モバイルで数字キーボードが出るようにします。

ファイル名: payment-form.html / 使用言語: HTML

<label for="card-number">カード番号</label> <input  id="card-number"  name="cardNumber"  inputmode="numeric"  autocomplete="cc-number" >

11.2 エラーメッセージ設計

決済エラーは、ユーザーが不安になりやすいため、分かりやすく丁寧に伝えます。「エラー」だけではなく、修正方法を明示します。

11.3 フォーカス移動制御

エラー発生時は、最初のエラー項目へフォーカスを移動すると、ユーザーが修正しやすくなります。

ファイル名: payment-focus-error.js / 使用言語: JavaScript

function focusFirstInvalidField() {  const invalidField = document.querySelector("[aria-invalid='true']");  if (invalidField) {    invalidField.focus();  } }

12. 会員登録機能

会員登録フォームでは、入力項目の多さが離脱につながりやすくなります。必要最小限の項目にし、入力補助、パスワード支援、分かりやすいエラー表示を設計します。

12.1 入力しやすいフォーム設計

入力項目を必要最小限にすることで、ユーザーの負担を減らせます。初回登録ではメールアドレスとパスワードだけにし、住所などは購入時に入力する設計も有効です。

12.2 パスワード入力支援

パスワード条件は、入力前または入力中に分かるようにします。送信後に初めて条件違反を出すと、ユーザーに余計な負担をかけます。

ファイル名: password-help.html / 使用言語: HTML

<label for="password">パスワード</label> <input  id="password"  type="password"  aria-describedby="password-help" > <p id="password-help">  8文字以上で、英字と数字を含めてください。 </p>

12.3 バリデーション対応

バリデーションは、エラー内容と修正方法を明確にします。エラーは色だけでなく、テキストで伝える必要があります。

13. ログイン機能

ログイン画面は、多くのユーザーが繰り返し利用する画面です。シンプルで分かりやすく、キーボード操作とスクリーンリーダーに対応している必要があります。

13.1 フォームラベル最適化

ログインフォームでは、メールアドレスとパスワードのラベルを明確に設定します。プレースホルダーだけに依存しないようにします。

ファイル名: login-form.html / 使用言語: HTML

<form>  <label for="login-email">メールアドレス</label>  <input id="login-email" type="email" autocomplete="email">  <label for="login-password">パスワード</label>  <input id="login-password" type="password" autocomplete="current-password">  <button type="submit">ログインする</button> </form>

13.2 エラー状態の通知

ログイン失敗時は、エラー内容を明確に表示します。ただし、セキュリティ上、メールアドレスが存在するかどうかを詳細に出しすぎない配慮も必要です。

13.3 パスワード表示切替対応

パスワード表示切替ボタンは、現在の状態が分かるようにします。

ファイル名: password-toggle.html / 使用言語: HTML

<label for="password">パスワード</label> <input id="password" type="password"> <button type="button" aria-pressed="false">  パスワードを表示 </button>

14. モーダル・ポップアップ

ECサイトでは、クーポン、ログイン誘導、カート確認、画像拡大などでモーダルが使われます。モーダルはアクセシビリティ問題が起こりやすいため、慎重に実装する必要があります。

14.1 フォーカストラップ

モーダルを開いたら、フォーカスをモーダル内に移動し、Tabキー操作がモーダル外へ出ないようにします。閉じた後は、元のボタンへフォーカスを戻すことも重要です。

ファイル名: accessible-modal.html / 使用言語: HTML

<div role="dialog" aria-modal="true" aria-labelledby="coupon-title">  <h2 id="coupon-title">クーポンを利用しますか？</h2>  <p>この注文に10%オフクーポンを適用できます。</p>  <button type="button">適用する</button>  <button type="button">閉じる</button> </div>

14.2 Escキー対応

モーダルやポップアップは、Escキーで閉じられるようにします。キーボード利用者にとって、Escキーは閉じる操作として一般的です。

ファイル名: modal-escape.js / 使用言語: JavaScript

document.addEventListener("keydown", event => {  if (event.key === "Escape") {    closeModal();  } });

14.3 スクリーンリーダー対応

モーダルのタイトルと内容がスクリーンリーダーに伝わるように、aria-labelledbyやaria-describedbyを使います。

15. 色覚多様性への配慮

ECサイトでは、在庫状態、セール、エラー、成功、選択状態などを色で表現することが多くあります。しかし、色だけに依存すると、色の違いを識別しにくいユーザーに情報が伝わりません。

15.1 色だけに依存しない表現

セール価格、在庫切れ、エラーなどは、色だけでなくテキストやアイコンでも示します。

ファイル名: stock-status.html / 使用言語: HTML

<p class="stock-status">  在庫あり </p> <p class="stock-status stock-low">  残りわずか </p>

15.2 コントラスト比の確保

テキストと背景のコントラストが低いと、読みづらくなります。価格、ボタン、エラー、在庫表示など重要な情報は、十分なコントラストを確保します。

ファイル名: contrast-button.css / 使用言語: CSS

.primary-button {  background: #1d4ed8;  color: #ffffff; } .error-text {  color: #b91c1c;  font-weight: 700; }

15.3 ステータス表示の工夫

ステータスは、色、テキスト、アイコンを組み合わせて伝えると理解しやすくなります。

16. モバイルアクセシビリティ

ECサイトの多くはスマートフォンから利用されます。モバイルでは、画面サイズ、タップ操作、片手操作、通信環境、画面回転などを考慮する必要があります。

16.1 タップ領域の確保

ボタンやリンクのタップ領域が小さいと、誤操作が起こりやすくなります。特にカート追加、数量変更、決済ボタンなどは十分なサイズを確保します。

ファイル名: mobile-tap-area.css / 使用言語: CSS

button, .action-link {  min-height: 44px;  min-width: 44px;  padding: 12px 16px; }

16.2 レスポンシブ対応

モバイルでは、商品画像、価格、ボタン、フォームが画面幅に合わせて読みやすく配置される必要があります。

ファイル名: responsive-product-layout.css / 使用言語: CSS

.product-layout {  display: grid;  gap: 24px; } @media (min-width: 768px) {  .product-layout {    grid-template-columns: 1fr 1fr;  } }

16.3 画面回転対応

画面回転時にもレイアウトが崩れないようにします。固定幅や固定高さに依存しすぎない設計が重要です。

17. スクリーンリーダー対応

スクリーンリーダー対応では、ページ構造、ランドマーク、動的コンテンツ通知、ARIA属性を適切に設計します。ECサイトでは商品情報や購入状態の変化が多いため、読み上げ対応が重要です。

17.1 ARIA属性の活用

ARIA属性は、標準HTMLだけでは伝えきれない状態や関係性を補助するために使います。ただし、標準HTMLで表現できる場合は標準要素を優先します。

ファイル名: cart-button-aria.html / 使用言語: HTML

<button  type="button"  aria-label="白いスニーカーをカートに追加" >  カートに入れる </button>

17.2 ランドマーク設計

header、nav、main、footerなどのランドマークを使うと、スクリーンリーダー利用者がページ内を移動しやすくなります。

ファイル名: ecommerce-landmarks.html / 使用言語: HTML

<header>  <nav aria-label="メインナビゲーション"></nav> </header> <main>  <h1>商品一覧</h1> </main> <footer>  <nav aria-label="フッターナビゲーション"></nav> </footer>

17.3 動的コンテンツ通知

カート追加、検索結果更新、エラー発生などの動的変化は、aria-liveで通知します。

18. エラーハンドリング設計

ECサイトでは、フォーム入力、決済、配送先、ログインなどでエラーが発生します。エラーは、内容、原因、修正方法を分かりやすく伝える必要があります。

18.1 エラー内容の明確化

「エラーが発生しました」だけでは不十分です。どの項目で、何が問題で、どう修正すればよいかを伝えます。

18.2 修正方法の提示

エラー表示には、ユーザーが次に何をすればよいかを含めます。特に決済や会員登録では、修正方法が分からないと離脱につながります。

ファイル名: error-summary.html / 使用言語: HTML

<div role="alert" class="error-summary">  <h2>入力内容を確認してください</h2>  <ul>    <li><a href="#email">メールアドレスの形式が正しくありません。</a></li>    <li><a href="#postal-code">郵便番号を7桁で入力してください。</a></li>  </ul> </div>

18.3 読み上げ対応

エラー発生時は、スクリーンリーダーにも通知される必要があります。role="alert"やaria-liveを適切に使います。

19. WCAGテストと検証

WCAG対応は、実装しただけで完了ではありません。自動テスト、キーボード操作テスト、スクリーンリーダーテスト、実機テストを組み合わせて検証する必要があります。

19.1 自動テストツール活用

自動テストツールは、alt属性不足、ラベル不足、コントラスト問題、ARIAの誤用などを検出できます。ただし、自動テストだけでは実際の使いやすさまでは判断できません。

ファイル名: accessibility-test.spec.js / 使用言語: JavaScript

import { test, expect } from "@playwright/test"; import AxeBuilder from "@axe-core/playwright"; test("商品ページに重大なアクセシビリティ違反がない", async ({ page }) => {  await page.goto("/products/sample");  const results = await new AxeBuilder({ page }).analyze();  expect(results.violations).toEqual([]); });

19.2 キーボード操作テスト

Tabキー、Shift + Tab、Enter、Space、Esc、Arrowキーで主要操作ができるかを確認します。特にカート、チェックアウト、モーダル、バリエーション選択は重点的に確認します。

19.3 スクリーンリーダーテスト

スクリーンリーダーで、商品名、価格、選択状態、カート追加通知、エラー内容が理解できるかを確認します。視覚的に分かるだけでなく、音声でも意味が伝わることが重要です。

20. 継続的なアクセシビリティ改善

ECサイトは継続的に商品、キャンペーン、UI、フォーム、決済方法が変わります。そのため、アクセシビリティ対応も一度で終わりではなく、継続的に改善する必要があります。

20.1 デザインレビュー

新しいUIを作る段階で、色、コントラスト、フォーカス状態、操作導線、フォーム構造を確認します。デザイン段階で問題を見つける方が、実装後に修正するよりも効率的です。

20.2 アクセシビリティ監査

定期的にアクセシビリティ監査を行い、主要購入フローを確認します。トップページ、検索、商品一覧、商品詳細、カート、チェックアウト、決済完了までを一連の流れとして検証することが重要です。

20.3 WCAGアップデートへの対応

WCAGや関連ガイドラインは継続的に更新されます。ECサイトの運用チームは、デザインシステム、コンポーネント、テスト基準を定期的に見直し、新しい要件に対応できる体制を整える必要があります。

おわりに

ECサイトにおけるWCAG対応は、単なるアクセシビリティ施策ではなく、すべてのユーザーが安心して商品を探し、比較し、購入できるようにするための重要な品質基盤です。商品検索、カテゴリナビゲーション、商品一覧、商品詳細、カート、チェックアウト、決済フォームなど、購入フロー全体を通してアクセシブルに設計することが求められます。

特にECサイトでは、アクセシビリティの問題がそのまま購入離脱につながります。カート追加がスクリーンリーダーに伝わらない、サイズ選択がキーボードで操作できない、決済エラーの修正方法が分からないといった問題は、ユーザー体験だけでなく、売上や信頼性にも影響します。

WCAG対応を進めるには、標準HTML要素の活用、適切なラベル設計、キーボード操作対応、フォーカス管理、ARIA属性、代替テキスト、エラー表示、モバイル対応、テスト自動化を組み合わせる必要があります。デザイン、実装、QA、運用が連携し、継続的に改善することが重要です。

ECサイトでは、見た目の美しさや機能の多さだけでなく、誰でも使えること、迷わず購入できること、安心して決済できることがさらに重要になります。アクセシビリティをプロダクト品質の一部として扱うことで、より多くのユーザーに選ばれるECサイトを作ることができます。