成功
アクセシビリティ
Alignをカスタマイズし、Shopifyでストアコンテンツを追加する際に、アクセシビリティのガイダンスをご活用ください。
ShopifyでAlignをカスタマイズしてストアコンテンツを追加する際、アクセシブルなデザインを選択すると、障害のある方を含むより多くのお客様がオンラインストアを利用しやすくなります。
これらの推奨事項は、Web Content Accessibility Guidelines (WCAG)に基づいています。アクセシビリティは多くの要素に左右されるため、これらのガイドラインに従うだけでストアが完全にアクセシブルになるとは限りません。詳しいガイダンスについては、Shopifyのアクセシビリティに関するリソースをご覧ください。
テキストのアクセシビリティ
Section titled “テキストのアクセシビリティ”明確で読みやすいテキストは、視力の弱いお客様や、密度の高いコンテンツを読むのが難しいお客様の助けになります。
色のコントラスト
Section titled “色のコントラスト”テキストと背景の間に十分なコントラストを確保し、色覚異常のあるお客様や視力の弱いお客様を含め、お客様がコンテンツを識別できるようにします。オンラインのコントラスト比ツールで色の組み合わせを確認してください。
たとえば、コントラスト比2.4:1のテキストは一部のお客様にとって読みにくい場合がありますが、4.8:1の比率であれば多くのお客様にとって読みやすくなります。本文、見出し、リンク、フォームフィールド、画像上に配置したテキストを確認してください。
- 本文とボタンテキストには、少なくとも4.5:1のコントラスト比を使用します。
- 見出しや、24 px以上のその他の大きなテキストには、少なくとも3:1のコントラスト比を使用します。
- 画像、スライドショー、バナー、動画上のテキストには、適切な比率を確保します。大きなテキストには少なくとも3:1、小さなテキストには4.5:1が必要です。
- 入力欄の枠線やアイコンなど、テキスト以外の要素には少なくとも3:1のコントラスト比を使用します。
テキストの見出し
Section titled “テキストの見出し”Rich textエディターで見出しを追加する際は、見出しレベルを順番に使用します。支援技術は見出しを使ってページの構成を伝えるため、見出しレベル2から見出しレベル4へ飛ぶと混乱を招く可能性があります。
- レベルを飛ばさず、見出しレベルを順番に使用します。
テキストサイズと配置
Section titled “テキストサイズと配置”お客様が無理なく読めるテキストサイズを選び、単語と文字の間隔を一定に保ちます。両端揃えは単語間に不均一な空白が生じる可能性があるため、避けてください。
- 本文を少なくとも16 px相当に設定します。
- 両端揃えではなく、左揃えのテキストを使用します。
テキストリンク
Section titled “テキストリンク”色だけに頼らず、リンクを識別できるようにします。リンクに下線を付けるか、通常のテキストと明確に異なる別の視覚的区別を使用すると、色の変化を認識しにくいお客様の助けになります。
- テキストリンクに下線を付けるか、周囲のテキストと明確に異なる別の視覚的な差別化を行います。
画像の代替テキスト
Section titled “画像の代替テキスト”代替テキストを使用すると、目の不自由なお客様や視力の弱いお客様が、スクリーンリーダーを通じて画像の内容を理解できます。意味のある各画像に正確な代替テキストを追加してください。
Shopify adminで商品画像に代替テキストを追加できます。その他のテーマ画像に代替テキストを追加するには、テーマエディターを使用します。
目を閉じた人に画像を説明するように代替テキストを記述してください。ページとビジネスの文脈で重要な詳細を説明します。たとえば、旅行代理店では画像内の場所や風景を説明し、アウトドア用品店では表示されているバックパックのブランドや特徴に重点を置く場合があります。
旅行代理店の場合、「海の前にいる2人」では有用な詳細がほとんど伝わりません。「晴れた日にポルトガルのラゴスを旅する2人の友人が、プライア・ド・カミロの砂浜の入り江を眺めている」とすれば、より詳しく説明できます。
テーマ画像に代替テキストを追加する
Section titled “テーマ画像に代替テキストを追加する”- Shopify adminから、Online Store > Themesに移動します。
- 編集するAlignテーマを見つけ、Customizeをクリックします。
- テーマエディターのサイドバーで、画像を含むセクションを選択します。
- 画像のEditを選択します。
- ダイアログに代替テキストを入力し、Saveをクリックします。
- もう一度Saveをクリックして、テーマの変更を保存します。
スライドショーと動画のアクセシビリティ
Section titled “スライドショーと動画のアクセシビリティ”スライドショーや動画を追加する際は、視力の弱いお客様、耳が聞こえない、または聞こえにくいお客様、前庭障害の影響を受けやすいお客様に配慮してください。
一部のお客様はスクリーンリーダーの音声読み上げを使用しており、予期しない動画の音声や音楽によってページを利用しにくくなることがあります。クローズドキャプションは、耳が聞こえない、または聞こえにくいお客様が動画コンテンツにアクセスするのに役立ちます。動くコンテンツは、前庭障害のあるお客様にめまいを引き起こす可能性があります。
スライドショー
Section titled “スライドショー”- スライドショーを自動再生に設定しないでください。
- スライドショーが自動再生される場合は、お客様が一時停止または停止できる設定を提供します。
- 動画を自動再生に設定しないでください。
- 動画が自動再生される場合は、音声をミュートします。
- クローズドキャプションが常に表示されるよう、音声付きの動画全体を遮るものなく表示します。
- セリフのある動画には、ページ上または別ページへのリンクを通じて、テキストトランスクリプトを提供します。
- スライドショーに含まれる動画にも、これらのガイドラインを適用します。
キーボード操作への対応
Section titled “キーボード操作への対応”視覚障害や運動障害のあるお客様は、キーボードを使って移動やタスクの完了を行う場合があります。明確な視覚的フォーカスインジケーターにより、Emailフィールドなど、現在選択されているページ要素を示します。
- リンク、ボタン、フォームフィールドなど、すべてのインタラクティブ要素に、明確なキーボードフォーカスの視覚的インジケーターがあることを確認します。