🥇

【Shopify.dev和訳】Themes/Best practices/Accessibility

2021/09/18に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Best practices/Accessibilityの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Shopify テーマのアクセシビリティのベストプラクティス

テーマを作成する際には、コンテンツがアクセス可能になるようなデザインを選択してください。アクセシブルなテーマとは、アクセシビリティ技術に頼っている人も含めて、誰もが使えるように設計されたものです。テーマのアクセシビリティは、マーチャントと顧客に包括的な体験を提供するために不可欠です。

Shopify テーマのアクセシビリティのベストプラクティスは、Web Content Accessibility Guidelines (WCAG) を念頭に置いて作成されています。

アクセシビリティテスト

以下のようなツールを使って、テーマのアクセシビリティをテストすることができます。

開発中のテーマに継続的インテグレーション(CI)プロセスを使用している場合は、テーマコードの変更がアクセシビリティスコアに大きなマイナスの影響を与えないことを確認するために CI チェックを追加できます。これは Shopify が開発した GitHub アクションである Shopify Lighthouse CI GitHub アクションを使って行うことができます。このアクションは、テーマのコードをベンチマークショップにアップロードし、テーマのアクセシビリティを測定して計算します。

アクセシビリティの原則

テーマを作成する際には、WCAG 2.0 ガイドラインの大原則を重視してください。

知覚可能であること: 情報や UI コンポーネントは、ユーザーが知覚できる方法で表示されなければならない。
操作可能であること: UI コンポーネントとナビゲーションは操作可能でなければならない。
理解可能であること: 情報や UI の操作が理解可能であること。
堅牢であること: コンテンツは、支援技術を含む多様なユーザーエージェントが確実に解釈できるように、十分に明確でなければなりません。

以下のセクションでは、マーチャントと顧客がテーマに接する際のアクセシビリティのベストプラクティスを紹介します。

キーボードとジェスチャーのコントロール

視覚や運動機能に障害のあるマーチャントやカスタマーは、オンラインでのナビゲーションやタスクの完了にキーボードを使用することがあります。このようなユーザーは、キーボードのフォーカスがウェブページ上のどこにあるかを視覚的に示すインジケーターに頼っています。テーマでは、すべてのリンク、ボタン、ドロップダウンナビゲーション、フォームコントロールをキーボードで操作できるようにする必要があります。

キーボード対応

アクティブな要素にフォーカスインジケータが表示され、一貫性があります。マウスでもキーボードでも、アクティブな要素にはフォーカスインジケータが表示されています。
キーボードのフォーカスの順番は、DOM の順番と一致していなければなりません。フォーカスは上から下へ、左から右へと移動しなければならない。
キーボードを使用する場合、フォーカススタイルはデスクトップに表示されます。
あなたのテーマは、マウスのホバーアクションに依存せず、表示やアクセスが可能である。
テーマの移動に Tab キーや Shift + Tab キーを使用できる。
テーマの一部にフォーカスが当たっても、コンテキストが急に変わることはありません。例えば、キーボードを使ってナビゲートする場合、コントロールがフォーカスを受けたときに、フォーカスが他のものに切り替わってはいけません。

ジェスチャー対応

Pinch to Zoom などのズームジェスチャーは常に利用可能です。
3D モデルの操作など、複数の指や複雑なジェスチャーを必要とする機能は、1 回のタップやクリックで利用できるようにする必要があります。

ページ構造

テーマは、有効な HTML を使って構築する必要があります。生成された HTML は、W3 HTML チェッカーを使って検証することができます。以下のセクションでは、ページ構造の特定の要素に関するベストプラクティスを提供します。

グローバル

html 要素にページ lang 属性を設定し、スクリーンリーダーがコンテンツを正しいアクセントや方言で発音できるようにしています。
ビューポートのズームが有効になっています。テーマは maximum-scale と user-scalable="no" 属性を使用すべきではありません。
ヘッダーなどの一般的なコンテンツをスキップしてページコンテンツにすばやくアクセスできるように、スキップリンクが利用可能で、フォーカスされたときに表示される。テーマは、メインコンテンツがフォーカスされるように、コンテナに tabindex="-1" を含めるべきです。
コンテンツの流れは直線的です。あなたのテーマは、0 または -1 以外の tabindex 属性値と autofocus 属性を使用していません。正の tabindex 値の使用とオートフォーカスは、特定のフォーカス順序を強制することでユーザーから力を奪います。ユーザーが有機的にページコンテンツを発見できるようにしましょう。

見出し

HTML の見出し要素は、見出しマークアップを使用します。テーマでは、ページ上のコンテンツの構成を伝えるために見出しタグ（h1 ～ h6）を使用します。
見出しタグは順番に使用されます。テーマは、デザインのために見出しを使うのではなく、ページ上のコンテンツの論理的な順序を設定するために使うべきです。
h1 要素は、ページのメイントピックを特定するために使用されます。

ドロップダウンメニューのナビゲーション

aria-expanded は、折りたたみ可能なナビゲーションの状態を伝えるために使用される。
aria-controls は、ドロップダウンメニューが制御する視覚的に隠されたコンテナがあることを支援技術に伝えるために使用されます。
aria-current は、ナビゲーションアイテムを移動する際に、現在の場所やページを伝えるために使用されます。
Enter キーと Space キーでドロップダウンメニューを開くことができます。テーマでは、ランチャーコントロールにフォーカスを当てる必要があります。Tab キーを押すと、ドロップダウンメニューの最初の項目にフォーカスが移動します。
Esc キーは、ドロップダウンメニューを折りたたみ、ランチャーコントロールにフォーカスを戻すことができます。

製品情報

商品画像には説明用の alt テキストが含まれています。
セール価格と通常価格は、視覚的にも、スクリーンリーダー用のマークアップを使用しても、異なって表示されます。テーマでは、通常価格と販売価格を見分けるために、視覚的に隠せるテキストを使用する必要があります。
異なるバリエーションが選択されたときに、テーマが製品の価格と在庫を動的に変更する場合は、その変更をスクリーンリーダーにも伝える必要があります。
aria-live は、UI の動的な変更を伝えるために使用されます。

コントロール

a 要素はリンクに使用されます。テーマでは、ナビゲーション、新しいページの読み込み、キーボードのフォーカスをある要素から別の要素に移す際にリンクを使用する必要があります。
button 要素は、モーダルウィンドウの起動やデータテーブルのソートなど、画面上のアクションに使用します。
リンクの目的地は、テキストだけで明確でなければなりません。
新しいウィンドウを開くリンクは、警告を含みます。リンクをクリックすると新しいウィンドウが開くことを、スクリーンリーダーや目の不自由なキーボードのみのユーザーが理解できるように、テーマには代替テキストを含む視覚的なアイコンを含める必要があります。

テーブル

table 要素はテーブルデータに使用されます。
caption 要素は、支援技術でテーブルが読まれていることを識別するために使用されます。
th 要素は、scope 属性を持つヘッダーに使用されます。
scope="col" 要素は列のヘッダーに、scope="row" は行のヘッダーに使用されます。

フォーム

すべてのフォームフィールドはラベルを含みます。フィールドのラベルには、aria-label、.visuallyhidden 要素、フローティングラベル、または可視ラベルを使用できます。フォームの入力とコントロールには、その目的を明確に示す名前を付けます。
フォーム入力には、テーマ設定のフォームラベルを含め、for 属性を持つラベルを使用します。
必須入力には required 属性があります。
フィールドには、autocomplete 属性を使用します。オートコンプリートは、ブラウザに保存されているデータを使用して、フォームフィールドへの入力を支援します。

フォームのエラー

フィードバックメッセージに重点を置いています。フォームを入力または送信した結果、エラーが発生した場合は、可能な限り、できるだけ早くスクリーン・リーダーに伝えます。
エラーメッセージは明確で説明的です。
aria-describedby 属性は、エラーテキストコンテナを参照する input 要素に適用されます。
通知、エラーメッセージ、成功メッセージは声に出して伝えます。重要な情報は aria-live を使ってスクリーンリーダーにアナウンスされます。

メディア

メディアは、気を散らしたり、混乱させたり、予期せぬことを引き起こす可能性があります。テーマ内のすべてのメディアは、以下のベストプラクティスに従うべきです。

メディアは自動再生しないでください。
メディアのコントロールは、ネイティブの HTML 要素を使用してマークアップします。テーマには、ボタンにはトグル状態、スライダーには範囲入力があることを確認してください。
メディアは Space キーで一時停止できるようにします。

画像とアイコン

すべての img 要素には alt 属性が必要です。alt 属性がないと、スクリーンリーダーは画像ファイルの名前とパスを表示します。
製品やコンテンツの画像には、スクリーンリーダーのユーザー向けに画像を説明する alt テキストが付いています。
装飾的な画像では、alt 属性に空の値を使用します。画像やアイコンをスクリーン・リーダーから隠すには、<img src="..." alt="">を使用してください。

ビデオ

クローズドキャプションが利用できます。
説明的な音声も利用できます。
スライドショーのビデオなど、自動再生のビデオが必要な場合、音声はミュートされます。
音声付きのビデオは、視覚的な障害になりません。
スペースキーで動画の一時停止と再生ができます。

音声について

テープ起こしができます。
自動再生される音声を一時停止することができます。

色とコントラスト

テーマに色を追加する際には、色覚障害やその他の視覚障害を持つマーチャントやカスタマーがすべてのテキストにアクセスできるようにしてください。このようなお客様は、適切な色のコントラストによって、あるものと別のものを視覚的に区別しています。

オンラインのコントラスト比ツールを使って、ストアのさまざまな部分のコントラストをチェックすることができます。テーマ内のコンテンツは、以下のベストプラクティスを遵守してください。

24 ピクセル（regular）または 18.5 ピクセル（bold）未満のテキストは、背景とのコントラスト比が 4.5:1 になります。
24 ピクセル（regular）または 18.5 ピクセル（bold）以上のテキストは、背景とのコントラスト比が 3.0:1 になります。
アイコンは、背景とのコントラスト比が 3.0:1 になります。
入力要素の境界線は、背景とのコントラスト比が 3.0:1 になります。
情報を伝えるための指標は色だけではありません。

ダイナミックコンポーネント

スライドショー、予測検索、モーダルウィンドウ、タブなどの動的コンポーネントは、複雑で操作が難しい場合があります。スクリーンリーダーが解釈できるような要素を使用したり、コンテキストを提供したり、キーボード機能を備えたりしてください。

ドロワーとモーダル

ドロワーやモーダルが開かれると、フォーカスはドロワーやモーダルのラベルを付けた要素に移動します。
キーボードでの操作は、開いているドロワーやモーダルの中で行われます。
Esc キーは、ドロワーやモーダルを閉じるためにサポートされており、キーボードのフォーカスはランチャー要素に戻ります。
モーダルを識別するために使用されるロールは dialog です。

スライドショー

スライドショーで自動的に再生されるコンテンツは、一時停止または停止することができます。
スライドショーのコンテンツは、「次へ」「前へ」ボタンでアクセスできます。

タッチスクリーンとモバイルデバイス

タッチスクリーンやモバイル機器の場合、マーチャントや顧客が簡単に向きを変え、ターゲットをタップしてコンテンツを操作できるようにすることが主な考慮点となります。

主なコントロールやリンクのタッチターゲットは、最低でも 44x44 ピクセルの大きさが必要です。主要なタッチターゲットには、以下のようなコントロールやリンクが含まれます。

メインメニューのリンク（第 1 階層、第 3 階層を問わない）
コンタクトフォーム、コメントフォーム、検索、カートに入れるなど、あらゆるフォームの送信ボタン
カートやハンバーガーメニュー用のメニューボタン
モーダルのクローズボタン
商品ページのバリエーションやオプション（カラー、サイズ、数量など）

Shopify アプリのご紹介

Discussion

ログインするとコメントできます