誰もが利用しやすいECサイト作りのためのアクセシビリティ対策

ウェブアクセシビリティとは、すべての人がWEBサイトの情報やサービスへアクセスできるように設計することです。更に詳しく知りたい方はまずこちらの記事をご参照ください。

ウェブアクセシビリティ 対応しないと発生するリスクや対策のポイントを紹介

アクセシビリティとは？Webサイトにおける重要性とおさえるべきポイントを解説

日本のインターネットショッピングの利用は、2020年3月以降から急速に増加し全年代的に上昇しています。年代問わずECサイトを利用しており20代よりも50代以降の人の方が利用率が多いことからシニア層がECサイト利用に積極的であることがわかります。

なので、ECサイトでウェブアクセシビリティの品質を向上させることは、売上アップへの大きな施策として有効になるでしょう。

インターネットショッピングの利用状況

出典：総務省「令和03年 情報通信白書」

年代別インターネットショッピング利用状況

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122400.html

大手ECサイトのアクセシビリティ対応度を検証ツール「lighthouse」で検証・比較してみました。

あくまでテストツールでの結果なので、人的にアクセシビリティテスターによるチェックをした場合、新たな課題が発見される場合もあります。

※2024年7月現在

Lighthouseで主要3ページを対象に大手ECサイトを検証した結果（達成率表記：%）

商品詳細の検証で検出されたアクセシビリティ対応が必要な項目の数

※商品により多少結果に差があります。

アクセシビリティ検証で検出された項目（一部検出されたアラート）

• リンクやボタンにアクセス先の名称がない
• 画像にaltの記述がない
• キーボード操作時のフォーカスが正確ではない
• リスト構造が適切にマークアップできていない
• コントラスト比率が不十分
• aria属性の役割が一致していない、もしくは記述がない
• ズームを無効にしているため支援技術でズームできない
• フォーム要素に適切なラベル指定がされていない
• 要素の役割にあったARIAランドマークを適切に指定できていない
• リンクと識別しずらいテキストカラー
• リンクのサイズが小さすぎて、リンクと認識できない

HTMLのマークアップ方法で改善できる項目がほとんどで、機械的に検出可能なので確実にクリアしていきましょう。

前項の比較表でわかるように、以前はアクセシビリティガイドラインに準拠できていないサイトが多くありましたが、徐々に準拠されたサービスが増えてきました。なので競合サイトと比較されないためにも、どんなユーザーでも問題なくアクセスして利用できるようにウェブアクセシビリティ対応が必要です。

ECサイトでもしっかりと対応を行えば、サイト利用を見送っていたユーザーにも機会を与えることができるようになります。

アクセシビリティガイドラインに準拠するためには様々な考慮が必要ですが、今回はECサイト特有の操作に関するアクセシビリティ対応についてご紹介いたします。

「WCAG2.0/レベルA準拠」

• 知覚可能
  • 非テキストコンテンツやへ代替テキストを指定
  • コントラスト比率が基準値であること
  • 色識別ができなくても操作可能
  • テキスト情報が正しく識別可能
• 操作可能
  • キーボード操作ができること
  • 操作タイミング調整可能
  • 発作の防止（点滅や閃光の制御）
  • ナビゲーション可能
• 理解可能
  • 読みやすさ
  • 操作後の関係性が予測できる
  • 入力支援（フォームなどのエラー特定・解決提案）
• 堅牢（けんろう）
  • スクリーンリーダー機能で音声読み取りができること（名前・役割・値を正しく表記する）
  • 支援技術との互換性を最大化する

出典：JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）

普段何気なく利用しているインターネットショッピングですが、ECサイトで商品を選んで商品を購入するまでには多くのプロセスが含まれています。

主に下記7つの工程があります。

ECサイトを利用する流れ

• 商品検索（または広告などから直接商品詳細へ）
• 検索結果～商品一覧表示
• 商品一覧ソート
• 商品詳細の情報表示
• 欲しい商品を決める～商品のサイズや色を変更して個数を選択
• 商品をカートに入れる
• 決済情報入力～支払完了（画面遷移が行われる）

各7つのプロセスで必要なウェブアクセシビリティ対応と実装方法を紹介していきます。

商品検索

• 入力フォーム

<!-- role属性を使用してフォームの役割を明確にし、aria-labelでその目的を説明 -->
<form role="search" aria-label="商品検索">
    <div class="search-wrapper">
        <!-- ラベルを提供し、スクリーンリーダーユーザーに情報を伝える -->
        <label for="search-input">検索キーワード</label>
        <!-- 適切な入力タイプと属性を使用し、必須項目であることを示す -->
        <input type="search" id="search-input" name="search_query" 
            placeholder="例：りんご　みかん" 
            aria-required="true" required>
        <!-- テキストが無ければ、aria-labelを使用して、その機能を説明 -->
        <button type="submit">検索を実行</button>
    </div>
</form>

<!-- 追加の改善ポイント:
1. JavaScriptでのフォームバリデーションとエラー処理の実装
2. 検索結果数のアナウンス機能の追加
3. キーボードナビゲーションの確認と最適化
-->

検索結果～商品一覧表示

• 検索結果の正しいフォーカス、Tab操作
• アイテムの情報

<!-- aタグなどのリンク要素があれば正しくフォーカスして、キーボード操作可能です。 -->
<li>
  <!-- 商品の完全な説明を提供 -->
  <a href="#">
    <!-- 商品画像、alt属性で簡潔な説明※要素内に商品名があればOK -->
    <img src="headphones.jpg" alt="" width="100" height="100">
    <!-- 商品情報のコンテナ -->
    <div class="product-info">
      <h3 class="product-name">ワイヤレスヘッドホン</h3>
      <p class="product-price">15,000円</p>
      <p class="product-color">色: ブラック</p>
    </div>
  </a>
</li>

• ソート機能操作

<!-- 検索結果の制御セクション：結果サマリーとソート機能を含む -->
<div class="results-controls">
    <!-- ソート機能 -->
    <div class="sort-controls">
        <!-- ソートセレクトのラベル。for属性でセレクトと関連付け -->
        <label for="sort-select">並べ替え</label>
        <!-- ソートオプションのセレクト。aria-labelで追加の説明を提供 -->
        <select id="sort-select">
            <option value="relevance">関連性</option>
            <option value="date">日付</option>
            <option value="price">価格</option>
        </select>
    </div>
</div>

<!-- 入力時の確認ポイント
入力時に予測できない変化を起こさないようにすること、下記のような挙動にならないようにしましょう。
1. セレクトボックスをキーボード上下キーで移動すると、セレクトボックスが閉じてしまう
2. ラジオボタンやチェックボックスの選択で、ポップアップウィンドウを開いてしまう
3. フォームの最後の項目を入力すると、自動的に送信されてしまう
など
-->

商品詳細の情報表示

• 文字の装飾による表現
  • SALEなどの値引き表示で価格に打ち消し線を引き隣に新価格を提示する場合、スクリーンリーダーでは打ち消された金額も読まれてしまうため価格を誤解してしまいます。ラベルをつけて金額の説明を付与するとよいでしょう。

• • アイコンのみによるボタン表現
    • 「お気に入り」「カートに入れる」「次の画像、前の画像」などの操作をアイコン表現する場合はラベルを指定すれば、スクリーンリーダーのユーザーには伝わりますが、視覚的にも識別しやすいデザインや一貫した識別性を持っている必要があります。 例えば、虫眼鏡アイコンが「検索」と「拡大」両方に使用されていたりすると識別性が低下してしまします。
  • 商品画像のスライドショーなど自動で切り替わるコンテンツがある場合
    • 動き続けてしまうと操作の妨げになる場合があるため、一時停止、停止、非表示の機能を設置する必要があります。

欲しい商品を決める～商品のサイズや色を変更して個数を選択

• プルダウン操作、Tab移動
  • キーボート操作はlabel要素やselect要素を適切にマークアップすれば問題なくTabキー&矢印キーでの操作が可能です。
  • エラー文は実装環境に合わせて適切なテキストを記載します。

<form id="product-form">
    <!-- fieldsetでグループ化 -->
    <fieldset>
        <legend>商品オプション</legend>
        <!-- 色選択のラベル -->
        <label for="color-select">色を選択</label>
        <!-- 色選択のプルダウンメニュー。-->
        <select id="color-select" required>
            <option value="">選択してください</option>
            <option value="red">赤</option>
            <option value="blue">青</option>
            <option value="green">緑</option>
        </select>
        <!-- 色選択エラーメッセージ、requiredで必須としている。 -->
        <span id="color-error" class="error-message">色を選択してください</span>

        <!-- サイズ選択のラベル -->
        <label for="size-select">サイズを選択:</label>
        <!-- サイズ選択のプルダウンメニュー。aria-label属性でスクリーンリーダーに説明 -->
        <select id="size-select" aria-label="サイズを選択" required>
            <option value="">選択してください</option>
            <option value="small">小</option>
            <option value="medium">中</option>
            <option value="large">大</option>
        </select>
        <!-- サイズ選択エラーメッセージ、aria-requiredで必須としている -->
        <span id="size-error" class="error-message">サイズを選択してください</span>
    </fieldset>
    <!-- カートに追加ボタン -->
    <button type="submit">カートに追加</button>
</form>

商品をカートに入れる

• 商品情報とボタンの配置
  • 「カートに入れる」や「決済」ボタンを商品詳細テキストや注意事項などの重要なテキストよりも前に配置しないようにする。視覚的に情報を取得できない場合は、読み飛ばしてしまい重要な情報を取得できないまま購入に至ってしまう可能性があります。商品情報が全て終わった後にボタンを配置する必要があります。

決済情報入力～支払完了

• 入力フォームのバリデーション
  • 視覚的表現のみに頼った表現などしてしまうと伝わらない場合があるので、バリデーション設定とその表示は視覚的表現を含みつつ指示や説明がテキストやスクリーンリーダーでも伝わるように対応が必要です。
• 「aria-live」を使った通知方法について※注意
  • スクリーンリーダーでエラーを伝達する上で有効ですが、支援技術と競合してノイズになる可能性があるので、適切な場面で使用するように注意が必要。
    • 「頻繁に更新されるコンテンツ」や「重要ではないアラート」
    • assertiveを使用すると即座にエラーが出るので、極力使用しない

<!-- aria-live="polite": 更新が発生したとき、スクリーンリーダーが適切なタイミングで通知します -->
<!-- 他の内容が完了した後にユーザーに通知される -->
<span id="color-error" class="error-message" aria-live="polite">色を選択してください</span>

<!-- aria-live="assertive": 更新が発生したとき、スクリーンリーダーが即座に通知します -->
<!-- 重要な情報をユーザーに直ちに伝える場合に使用 -->
<span id="size-error" class="error-message" aria-live="assertive">色を選択してください</span>

<!-- aria-live="off": 更新が発生してもスクリーンリーダーに通知しません -->
<!-- ユーザーに通知する必要がない場合に使用 -->
<span id="error-off" class="error-message" aria-live="off">エラーテキスト</span>

• 購入までのSTEPを分かりやすくする
  • テキスト情報で誘導する場合、「ページ下部のボタンを押してください」などと特定しにくい表記はしないで「ページ下部の”送信する”ボタンを押してください」のようにする
• 入力操作の制限時間
  • 操作の妨げになる場合があるため基本的に制限時間を設けてはいけません。もしどうしても制限を設けなくてはならない場合は下記のような対応が必要です
    • 「制限時間がある」ことや「延長・解除できる」ことをユーザーに事前に通知する
    • 制限時間をユーザーが延長または一時停止できるようにする

これまでに紹介したECサイトのアクセシビリティ対応をもとにエンジニアが直接実装したり、すでに対応できるCMSやフレームワークを選定するのもいいと思います。

機械的にアクセシビリティ調査をすることはスクリーンリーダーが認識できない項目や実装の見逃しを防ぐ点において重要な工程ですが、実際にサービスを利用して誰でも使いやすいサービスにアップデートしていく意識がとても重要です。

ECサイトをアクセシビリティに対応させることによってSEO対策やマーケティング面においても有効なので他のECサイトと差別化するためにも積極的に対応をしてきましょう。

株式会社デパートでは、アクセシビリティ簡易診断から適合レベルに合わせた改善ポイントまで、充実したサポート体制を提供していますので、ぜひご相談ください。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています