✨

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

2021/09/04に公開

Shopify

apps

tech

この記事について

この記事は、Accessibility best practices for Shopify appsの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

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

アプリを作成するときは、コンテンツへのアクセスを維持するのに役立つデザインを選択してください。アクセシブルなアプリは、assistive technologyに依存する人々を含むすべての人が使用できるように設計されています。アプリのアクセシビリティは、販売者と顧客に包括的な体験を提供するために不可欠です。

Shopify アプリのアクセシビリティのベストプラクティスは、Web コンテンツアクセシビリティガイドライン（WCAG）を念頭に置いて作成されました。

アクセシビリティテスト

次のようなツールを使用して、アプリのアクセシビリティをテストできます。

アクセシビリティの原則

アプリを作成するときは、WCAG2.0 ガイドラインの主な原則に注目してください。

知覚可能：情報および UI コンポーネントは、ユーザーが知覚できる方法でユーザーに提示可能である必要があります。
操作可能：UI コンポーネントとナビゲーションが操作可能である必要があります。
理解できる：UI の情報と操作は理解できる必要があります。
堅牢：コンテンツは、支援技術を含むさまざまなユーザーエージェントが確実に解釈できるように、十分に明確である必要があります。

次のセクションでは、販売者と顧客がアプリを操作する方法に関するアクセシビリティのベストプラクティスのリストを示します。

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

視覚障害または運動障害のある販売者および顧客は、キーボードを使用してオンラインでタスクをナビゲートおよび完了することができます。これらのユーザーは、視覚的なインジケーターを使用して、キーボードの焦点が Web ページのどこにあるかを伝えます。アプリでは、すべてのリンク、ボタン、ドロップダウンナビゲーション、およびフォームコントロールをキーボードを使用して制御できるようにする必要があります。

キーボードのサポート

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

ジェスチャーサポート

ピンチしてズームするなどのズームジェスチャは常に使用できます。
3D モデルのナビゲートなど、複数の指や複雑なジェスチャを必要とする機能は、シングルタップまたはクリックで利用できる必要があります。

ページ構造

次のセクションでは、アプリのページ構造の特定の要素に関するベストプラクティスを示します。

グローバル

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

見出し

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

ナビゲーション領域は、navHTML 要素でラップされています。
aria-currentは、リンクをトラバースするときに現在のページを伝達するために使用されます。
role =” menu”またはrole =” menuitem”はナビゲーションには使用されません。

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

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

製品情報

製品画像には、説明的な代替テキストが含まれています。
セール価格と通常価格は、視覚的にもスクリーンリーダーのマークアップを使用することによっても異なる方法でマークされます。アプリでは、通常価格と販売価格を区別するために、視覚的に非表示のテキストを使用する必要があります。
さまざまなバリエーションが選択されたときにアプリが製品の価格と在庫状況を動的に変更する場合は、その変更をスクリーンリーダーにも伝える必要があります。
aria-liveは、UI の動的な変更を伝達するために使用されます。

コントロール

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

テーブル

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

フォーム

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

フォームエラー

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

メディア

メディアは、気を散らすもの、混乱させるもの、または予期しないものになる可能性があります。アプリ内のすべてのメディアは、次のベストプラクティスに従う必要があります。

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

画像とアイコン

すべてのimg要素にはalt属性が必要です。 alt属性がない場合、スクリーンリーダーは画像ファイルの名前とパスをアナウンスします。
製品またはコンテンツの画像には、スクリーンリーダーユーザー向けの画像を説明するaltテキストが含まれています。
装飾画像は、alt属性に空の値を使用します。 <img src = "…" alt = "">を使用して、スクリーンリーダーから画像とアイコンを非表示にします。

ビデオ

クローズドキャプションが利用可能です。
説明的な音声が利用可能です。
スライドショーのビデオを含め、自動再生ビデオが必要な場合、サウンドはミュートされます。
音声付きの動画は視覚的に妨げられません。
スペースキーを使用して、ビデオを一時停止および再生できます。

オーディオ

トランスクリプトが利用可能です。
自動再生オーディオは一時停止できます。

色とコントラスト

アプリの UI に色を追加するときは、色覚異常の人やその他の視覚障害のある販売者や顧客がすべてのテキストにアクセスできることを確認してください。これらの商人や顧客は、あるものを別のものと視覚的に区別するために適切な色のコントラストに依存しています。

online contrast ratio toolを使用して、アプリのさまざまな部分のコントラストを確認できます。アプリのコンテンツは、次のベストプラクティスに準拠している必要があります。

24 ピクセル（通常）または 18.5 ピクセル（太字）未満のテキストのコントラスト比は、背景に対して 4.5：1 です。
24 ピクセル（通常）または 18.5 ピクセル（太字）以上のテキストのコントラスト比は、背景に対して 3.0：1 です。
アイコンのコントラスト比は、背景に対して 3.0：1 です。
入力要素の境界線のコントラスト比は、背景に対して 3.0：1 です。
情報を伝えるために使用される指標は色だけではありません。

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

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

ドロワーとモーダル

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

スライドショー

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

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

タッチスクリーンやモバイル機器では、お客様が簡単に向きを変えたり、ターゲットをタップしてコンテンツを操作できるようにすることが重要です。

主要なコントロールやリンクのタッチターゲットは、少なくとも 44×44 ピクセルである必要があります。主要なタッチターゲットには、以下のようなコントロールやリンクが含まれます。

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

次のステップ

アクセシビリティに関する Polaris ガイドラインを確認します。
キーボードのアクセシビリティを考慮してアプリを設計する方法を学びます。

Shopify アプリのご紹介

Discussion

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