テーマのアクセシビリティ
テーマをカスタマイズする際には、オンラインストアのアクセシビリティを維持できるようにデザインやコンテンツを選択してください。アクセシブルなウェブサイトとは、障がいのある人を含む誰もが使用できるようにデザインされたサイトのことです。オンラインストアでアクセシビリティを考慮した選択を行うことで、すべてのお客様にインクルーシブな体験を提供できます。
以下のガイドラインは、ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) を念頭に置いて作成されています。アクセシブルなウェブサイトを作成する際に考慮すべき要素は多岐にわたるため、以下のガイドラインに従うだけでは、オンラインストアが完全にアクセシブルであることは保証されません。ウェブアクセシビリティの詳細については、WCAG のウェブサイトにアクセスするか、以下に記載されている参考資料をご覧ください。
テキストのアクセシビリティ
オンラインストアのテキストは、視覚障がいのあるお客様や、テキストが密集したブロックを読むのが困難なお客様にとって、読みやすいものであることが重要です。
色のコントラスト
オンラインストアの色を編集する際は、色覚に障がいのあるお客様やその他の視覚障がいのあるお客様がすべてのテキストにアクセスできるようにしてください。これらのお客様は、十分な色のコントラストを頼りに、あるものを別のものと視覚的に区別します。オンラインのコントラスト比ツールを使用して、ストアのさまざまな部分のコントラストを確認できます。
以下の例では、テキストと背景のコントラスト比が 2.4:1 であり、一部のお客様にとっては読みにくくなっています。
次の例では、テキストのコントラスト比が 4.8:1 であり、多くのお客様にとって読みやすくなっています。
本文テキスト、見出し、リンク、フォームフィールドなど、すべてのテキストについて、以下のガイドラインに従ってコントラストをテストしてください。
- 本文テキストとボタンテキストの色は、背景に対して少なくとも 4.5:1 のコントラスト比を確保します。
- 見出しやその他の大きなテキスト (フォントサイズが 24 px 以上) の色は、背景に対して少なくとも 3:1 のコントラスト比を確保します。
- スライドショー、バナー、ビデオなど、画像上のすべてのテキストの色は、背景に対して十分なコントラスト比を確保します。大きなテキスト (フォントサイズが 24 px 以上) の場合、コントラストは少なくとも 3:1 です。小さいテキストの場合、コントラストは少なくとも 4.5:1 です。
- 入力枠線やアイコンなど、テキスト以外の要素の色は、背景に対して少なくとも 3:1 のコントラスト比を確保します。
テキストの見出し
リッチテキストエディタでページに見出しを追加する場合、見出しを順番通り (1〜6) に設定することが重要です。支援技術では、見出しを使用してページのコンテンツがどのように構成されているかを伝えます。見出しレベル 2 の次に見出しレベル 4 を使用するなど、レベルを飛ばすと、ユーザーが混乱する可能性があります。以下のガイドラインを参考にしてください。
- 見出しは連続した順序で使用し、レベルをスキップしません。
テキストのサイズと配置
テーマのタイポグラフィ設定を編集する際は、お客様がテキストを快適に読めるように、十分な大きさに設定してください。
また、テキストを読みやすくするために、単語や文字の間隔を均等にする必要があります。以下の例では、テキストが両端揃えに設定されており、これにより単語間の間隔が不均一になっています。
次の例では、テキストが左揃えに設定されており、これにより単語間の間隔が均一になります。
テキストのサイズと配置をカスタマイズする際は、以下のガイドラインに従ってください。
- 本文の最小フォントサイズは 16 px 相当です。
- テキストの配置は両端揃えにしません。両端揃えのテキストでは、単語間の間隔が不均一になります。
テキストリンク
テキストリンクには下線を引くか、通常のテキストと比較して視覚的に区別できる別のスタイルを設定する必要があります。色を識別しにくいお客様もいるため、色の変更のみに頼ってリンクと通常のテキストを区別することはできません。
テキストリンクは同じタブで開くようにしてください。新しいタブやウィンドウで開くリンクは、特に以前のウィンドウが見えなくなるモバイル環境で、混乱を招く可能性があります。また、画面拡大機能を使用するお客様や技術にあまり詳しくないお客様などにとって、包括的なものではありません。
テーマのスタイルシートを編集する場合は、テキストリンクのスタイルを削除しないようにしてください。以下のガイドラインに従ってください。
- テキストリンクには、お客様が通常のテキストと区別できるように、下線が引かれているか、色以外の視覚的な識別子が設定されています。
- テキストリンクは、クリックすると同じタブで開きます。
画像の代替テキスト
オンラインストアに画像を追加する際は、目の不自由なお客様や弱視のお客様もアクセスできるようにすることが重要です。そのためには、各画像を正確に説明する代替テキストを追加してください。スクリーンリーダーを使用するお客様は、この代替テキストによってオンラインストア上の画像の内容を理解します。
管理画面から商品画像に代替テキストを追加できます。テーマエディタからテーマ内の他の画像に代替テキストを追加できます。
画像に代替テキストを追加する際は、目を閉じている人にその画像を説明していると想定するのが良い方法です。相手が頭の中に画像を思い描けるように手助けをしてください。画像の記述方法は、ウェブページのコンテキストによっても異なります。たとえば、ビジネスが旅行代理店である場合と、アウトドア用品店である場合とでは、画像の記述方法が異なることがあります。次の画像を例に考えてみましょう。
旅行代理店の場合、2人の友人が旅行している国や地域、そして彼らが見ている海の名前に言及するとよいでしょう。一方、アウトドア用品店の場合は、2人の友人が背負っているバックパックのブランドや機能に焦点を当てるとよいでしょう。
ビジネスが旅行代理店の場合、不適切な代替テキストの例として、「海の前にいる2人」が挙げられます。同じ代理店の場合、適切な代替テキストの例は、「ポルトガルのラゴスを旅行中の2人の友人が、晴れた日にプライア・ド・カミロの砂浜の入り江を眺めている」となります。
スライドショーと動画のアクセシビリティ
オンラインストアに動画を追加する際は、弱視のお客様、聴覚に障碍のあるお客様や難聴のお客様、あるいは前庭疾患にかかりやすいお客様のニーズを考慮するようにしてください。
こうしたお客様の中には、ウェブページのコンテンツを読み上げるスクリーンリーダーのテキスト読み上げ機能に頼っている方がいます。特に予期しないタイミングで動画や音楽の音声が加わると、この体験が困難になることがあります。聴覚に障碍のあるお客様や難聴のお客様がコンテンツにアクセスできるよう、動画にクローズドキャプションを追加することをおすすめします。
前庭疾患のあるお客様は、動くコンテンツでめまいを感じることがあります。このため、スライドショーや動画が自動再生されないようにし、お客様がコントロールボタンでスライドショーを操作できるようにすることが重要です。
スライドショー
オンラインストアにスライドショーを追加する場合は、以下のガイドラインに従ってください。
- スライドショーは自動で再生されません。
- スライドショーが自動で再生される場合、お客様が一時停止、進行、停止できるスライドショーのコントロールが含まれています。
動画
オンラインストアに動画を追加する場合は、以下のガイドラインに従ってください。
- 動画は自動で再生されません。
- 動画が自動で再生される場合、音声はミュートされています。
- 音声を含む動画の場合、他のページ要素によって隠されることなく、動画全体が表示されるようにします。これにより、クローズドキャプションが常に見えるようになります。
- 会話を含む動画の場合、テキストの文字起こしを利用できるようにします。文字起こしは、ページ上に含めるか、別のページへのリンクとして提供します。
これらのガイドラインは、スライドショー内の動画にも適用されます。
キーボードのサポート
視覚や運動機能に障碍のあるお客様は、キーボードを使用してオンラインでナビゲートしたりタスクを完了したりする場合があります。このようなお客様は、ウェブページ上でキーボードのフォーカスがどこにあるかを示す視覚的なインジケーターを頼りにします。以下の例では、メールフィールドに視覚的なフォーカスインジケーターが表示されています。
テーマのスタイルシートを編集する場合、どのページ要素からもキーボードのフォーカススタイルを削除しないようにしてください。以下のガイドラインに従ってください。
- すべてのインタラクティブなページ要素には、キーボードフォーカスが当たったときに明確な視覚的インジケーターが表示されます。これらの要素には、リンク、ボタン、フォームフィールドが含まれます。
関連資料
この記事で説明したトピックに関するウェブアクセシビリティの詳細については、以下の関連資料を参照してください。
色のコントラストに関する関連資料
- Web Accessibility Initiativeの記事、Colors with Good Contrast
- 2色間のコントラスト比を調べることができるオンラインツール、Contrast Ratio
- Paciello Groupが開発したダウンロード用コントラスト比アプリケーション、Color Contrast Analyzer
テキストに関する関連資料
- Smashing Magazineの記事、16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake
- Web AIMの記事、Text alignment
- Web AIMの記事、Link Appearance
- 「Using Headings for Content Structure」(Web AIM の記事)
代替テキストのリソース
- 「Text to Speech」(Web Accessibility Initiative の記事)
- 「Alternative Text」(Web AIM の記事)
- 「Considerations when writing alt text」(Medium の記事)。
スライドショーと動画のリソース
- 「A Primer to Vestibular Disorders」(The A11Y Project の記事)
- 「Text to Speech」(Web Accessibility Initiative の記事)
- 「Video Captions」(Web Accessibility Initiative の記事)
- 「Use automatic captioning」(YouTube ヘルプの記事)
- 「Captions and subtitles」(Vimeo ヘルプセンターの記事)
- 「Carousel usability」(Nielsen Norman Group の記事)
キーボードサポートのリソース
- 「Keyboard Compatibility」(Web Accessibility Initiative の記事)
- 「Introduction to Focus」(Google Developers の記事)