テーマのアクセシビリティー

テーマをカスタマイズするときは、オンラインストアにアクセスしやすくするためのデザインとコンテンツの選択を行うことをお勧めします。アクセスしやすいウェブサイトは、障害を持つ人々を含むすべての人が利用できるように設計されています。オンラインストアのアクセシビリティーは、お客様に包括的な体験を提供する上で不可欠です。

以下のガイドラインは、ウェブコンテンツ・アクセシビリティー・ガイドライン (WCAG)を念頭に置いて作成されました。アクセスしやすいウェブサイトの作成には考慮すべき多くの要素があるため、下記ガイドラインに従うだけでオンラインストアが完全にアクセスしやすくなる保証はありません。ウェブアクセシビリティーについての詳細は、WCAGのウェブサイトをご覧いただくか、下記のリソース一覧をご覧ください。

テキストのアクセシビリティー

視覚障害のあるお客様や隙間のない文字列を読むのが難しいお客様にとって、オンラインストアのテキストが読みやすいことは重要です。

色のコントラスト

オンラインストアの色を編集するときは、色盲や視覚障害のあるお客様がすべてのテキストにアクセスしやすいようにしてください。これらのお客様は、視覚的な区別をするために適切な色のコントラストに頼っています。オンラインのコントラスト比ツールを使用して、ストアのさまざまな部分のコントラストを確認することができます。

下の例では、テキストの背景に対するコントラスト比が2.4:1であるため、一部のお客様には読みにくいものです。

明るいグレーのテキストと白い背景のブロック。

次の例では、テキストに4.8:1のコントラスト比があり、多くのお客様にとって読みやすいものです。

暗いグレーのテキストと白い背景のブロック。

本文、見出し、リンク、フォームフィールドなど、すべてのテキストのコントラストをテストします。次のガイドラインを使用してください。

  • 本文テキストとボタンテキストの色には、背景に対して少なくとも4.5:1のコントラスト比があります。
  • 見出しやその他の大きなテキスト(フォントサイズ24ピクセル以上)の色は、背景に対して少なくとも3:1のコントラスト比があります。
  • スライドショー、バナー、ビデオなど、画像上のすべてのテキストの色には、背景に対して十分なコントラスト比があります。大きなテキスト (フォントサイズ24ピクセル以上) の場合、最小コントラストは3:1です。小さいテキストの場合、最小コントラストは4.5:1です。
  • 入力の罫線やアイコンなどのテキスト以外の要素の色は、背景とのコントラスト比が少なくとも3:1です。

テキスト見出し

リッチテキストエディタでページに見出しを追加するときは、順番 (1〜6) に並べることが重要です。見出しは、ページコンテンツがどのように編成されているかを伝えるために、支援技術によって使用されます。見出しレベル2に見出しレベル4を続けるなど、レベルをスキップすると、ユーザーが混乱する可能性があります。次のガイドラインを使用してください。

  • 見出しは順に使用し、レベルをスキップしません。

テキストサイズとアラインメント

テーマのタイポグラフィ設定を編集するときは、お客様が快適に読めるようテキストのサイズが十分あることを確認してください。

また、テキストを読みやすくするために単語と文字の間隔を一定にする必要があります。以下の例はテキストのアラインメントが均等割付なため、単語間に一貫性のない間隔が作り出されています。

テキストのブロックが均等割付されています。テキストの各行は、端から端までを埋めるために単語の間隔を広げて納めます。

次の例はテキストの配置が左揃えで、単語間に一貫した間隔が作り出されています。

テキストのブロックが左揃えされています。各単語間に一貫した間隔があります。

テキストのサイズと配置をカスタマイズするときは、次のガイドラインを使用してください。

  • 本文の最小フォントサイズは16 px相当にします。
  • テキストのアラインメントは均等割付されません。均等割付されたテキストは、単語の間に一貫性のない間隔を作り出します。

テキストリンク

テキストにリンクを追加するときは、すべてのお客様がそのリンクを識別できるようにしてください。一部のお客様は色を見るのに問題があるため、リンクと通常のテキストを区別するために色の変更だけに頼ることはできません。次の例では、私たちの物語を見つけるテキストに下線が引かれ、テキストがリンクであることを伝えるために色の変化に依存しないようにしています。

「私たちの物語を見つける。そして私たちのブランドを形にする人々に会う」という歓迎メッセージ。「私たちの物語を見つける」というテキストは、それがリンクであることを伝えるために文字が赤色で、下線が引かれています。

テーマのスタイルシートを編集する場合は、テキストリンクのスタイルを削除しないようにしてください。次のガイドラインを使用してください。

  • テキストリンクには下線が引かれているか、通常のテキストとは別の視覚的な区別があります。

画像の代替テキスト

オンラインストアに画像を追加する場合は、視覚障害や低視力のお客様が画像を利用できるようにすることが重要です。これを行うには、各画像を正確に説明する代替テキストを追加します。スクリーンリーダーを使用しているお客様には、オンラインストアの画像コンテンツを伝えるために代替テキストを使用します。

管理画面から商品画像に代替テキストを追加することができます。テーマエディターからテーマの他の画像にaltテキストを追加できます。

alt属性を画像に追加するときは、目を閉じている人に画像を説明しているつもりになるのが良い方法です。それらの人が画像を想像するのを手伝います。画像を説明する方法は、ウェブページのコンテキストにも依存します。たとえば、あなたの事業が旅行代理店であるかアウトドア用品店であるかで、画像の説明が変わります。次の画像について考えてみましょう。

バックパックを背負った2人の友人が、互いに腕をまわして海を眺めています。

旅行代理店の場合は、2人の友人が旅行している国や地域、そして彼らが見ている海や海岸の名前に言及します。一方、アウトドア用品店の場合は、2つの友人のバックパックのブランドや機能に焦点を当てます。

旅行代理店の場合、不十分なalt属性の例は「海の前の2人」です。良いalt属性の例は「ポルトガルのラゴスを旅している2人の友人が、晴れた日にプライア・ド・カミーロの砂の入り江を眺めている」です。

スライドショーとビデオのアクセシビリティー

オンラインストアにビデオを追加するときは、低視力、聴覚障害、難聴、または前庭障害の影響を受けやすいお客様のニーズを考慮してください。

一部のお客様は、ウェブページのコンテンツを音読するスクリーンリーダーのテキスト音声化機能に頼っています。ビデオや音楽からのオーディオの追加は、予想がされていない場合には特に、体験を難しくする可能性があります。聴覚障害や難聴のお客様のためにビデオに字幕を付け、コンテンツにアクセスできるようにすることをお勧めします。

前庭障害のあるお客様は、動くコンテンツでめまいを感じることがあります。このため、スライドショーや動画を自動的に再生しないことが重要です。

スライドショー

オンラインストアにスライドショーを追加するときは、次のガイドラインを使用してください。

  • スライドショーは自動的に再生しません。
  • スライドショーを自動的に再生する場合は、お客様がスライドショーを一時停止または停止するために使用できる設定を含みます。

ビデオ

オンラインストアにビデオを追加するときは、次のガイドラインを使用してください。

  • ビデオは自動的に再生しません。
  • ビデオを自動的に再生する場合は、音声をミュートにします。
  • オーディオを含むビデオの場合、ビデオは完全に表示され、他のページ要素によって遮られることはありません。これにより、字幕が引き続き表示されます。
  • 対話を含むビデオでは、文字起こしの利用が可能です。これらは、ページまたは別のページへのリンクに含まれています。

このガイドラインは、スライドショーに含まれるビデオにも適用されます。

キーボードのサポート

視覚や運動障害のあるお客様は、オンラインでタスクを操作して完了するためにキーボードを使用する場合があります。これらのお客様は、キーボードのフォーカスがウェブページ上のどこにあるかを伝える視覚的なインジケーターを使用しています。次の例では、メールフィールドに視覚的なフォーカスインジケーターがあります。

オンラインストアの顧客ログイン画面に、メールとパスワードのフォームフィールドを表示しています。「メール」フィールドが青色の輪郭線で囲まれています。

テーマのスタイルシートを編集する場合は、ページ要素からキーボードのフォーカススタイルを削除しないようにしてください。次のガイドラインを使用してください。

  • すべてのインタラクティブなページ要素には、キーボードフォーカスがあるときの明確な視覚的インジケーターがあります。これらの要素には、リンク、ボタン、およびフォームフィールドが含まれます。

リソース

この記事で説明するトピックのウェブアクセシビリティーの詳細情報は、以下のリソースを参照してください。

色のコントラストのリソース

  • Colors with Good Contrast、Web Accessibility Initiativeの記事
  • Contrast Ratio、2色の間にあるコントラスト比を見つけるために使用できるオンラインツール
  • Color Contrast Analyzer、Paciello Groupが開発したダウンロード用コントラスト比アプリケーション

テキストのリソース

代替テキストのリソース

スライドショーとビデオのリソース

キーボードのサポートのリソース

Shopifyで販売を開始する準備はできていますか?

無料体験を試す