⭐️

【Polaris和訳】Foundations/Accessibility

2021/10/25に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Foundations/Accessibilityの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

アクセシビリティ

すべての人にとってより良いコマースを実現するためには、高品質な製品を作ることに深く配慮する必要があります。高品質な製品は、以下のような素晴らしいユーザーエクスペリエンス（UX）を備えていなければなりません。

美しく、機能的なデザイン
一貫性のある便利なコピー
ユニバーサルデザインと包括性の原則

誰にとっても使いやすい

Shopify 製品とパートナー製品は、誰にとっても使いやすく、便利であることが重要です。

すべての人とは、かなり大きなグループです。私たちのマーチャント、その顧客、開発者パートナー、私たちの従業員、そして技術コミュニティ全体を含みます。また、障害を持つコミュニティのすべてのメンバーも含まれます。

障がいは、移動、視覚、聴覚、コミュニケーション、学習、理解、情報処理などに影響を与えます。そのため、さまざまなニーズや経験をサポートするために、製品をどのように設計・開発するかを検討することが重要です。

米国では、成人の 4 人に 1 人が少なくとも 1 つの障害を持っていると言われています（出典：CDC）。カナダでは 22％、世界では 7 人に 1 人と言われています（出典：Statistics Canada, World Bank)

インクルーシブな体験の構築

弊社のコンポーネントを使用することは、Shopify の製品を構築する際にアクセシビリティと一貫性を向上させる方法です。

このスタイルガイドのコンポーネントライブラリには、アプリケーション間で使用できるコードが含まれています。
このコンポーネントコードには、アクセシブルなマークアップが含まれています。
コードは再利用される単一のコンポーネントに含まれているため、更新やバグの修正が容易です。

一度に作ってどこでも使えるというモデルは、これらのコンポーネントを作ったデザイナーや開発者のアクセシビリティに関する知識が、Shopify と私たちのパートナーのすべてに利用可能であることを意味します。これにより、マーチャントは一貫した体験を得ることができ、それをアクセシブルな製品に活用することができます。

コンポーネントには、多くのアクセシビリティ機能が無料で搭載されています。しかし、コンポーネントが予期せぬアクセシビリティの障害を生まない方法で統合されていることを確認することが重要です。コンポーネントの使用方法によっては、設計および実装上の検討事項が増える可能性があります。統合後、ユーザーのタスクフローを必ずテストしてください。

マーチャントワークフローをサポートするためのフォーカス管理

マーチャントの入力なしにプログラムで新しいコンテンツにフォーカスを移さないでください。モーダルやポップオーバーなど、オーバーレイを表示するためにコントロールを使用する Polaris コンポーネントは、フォーカスを自動的に管理します。

操作

マーチャントがページ内の他の場所に移動するリンクを有効にした場合、そのコンテンツにフォーカスを移動する。
マーチャントがオーバーレイにアクセスしなければならないとき、フォーカスをオーバーレイに移動させる。
マーチャントがフォームを送信してエラーが発生した場合、エラーメッセージにフォーカスを移す。

禁止事項

コンテンツがバックグラウンドで更新されているときにフォーカスを移動させる
ユーザーがページの他の場所でアクティブに作業しているときにフォーカスを移動させる

マーチャントの了解を得ずにフォーカスを管理すべき唯一のケースは、マーチャントが現在のワークフローを継続できないために中断する必要がある場合です。

非標準的なインタラクションの制限

マーチャントは、ブラウザ、プラットフォーム、および支援技術のデフォルトに従った方法でコントロールやコンテンツとやり取りすることを期待しています。非標準的な機能を導入することで、マーチャントはタスクを達成するためのより良い方法を得ることができますが、障害が生じる可能性もあります。

例えば、キーボードに依存しているマーチャントは、ボタンが「ender/return」キーまたは「space」キーで作動することを期待するでしょう。もし、ボタンが異なるキーで使用できるようにプログラムされている場合、マーチャントはその使用方法を説明する必要があります。

非標準のコントロールやインタラクションを使用するカスタム機能を設計または構築する前に、まずネイティブ機能を使用して目標を達成できるかどうかを検討してください。

非標準的なインタラクションが必要な場合。

プラットフォーム上でカスタム機能を設計、構築、テストするためのガイドラインやベストプラクティスに慎重に従う。
カスタム機能を使用するための明確な指示をマーチャントに与える。
タスクを達成するための追加の標準的な方法を提供する。

支援技術サポート

当社のコンポーネントは、自動および手動の技術でアクセシビリティをテストしています。マーチャントは、最新の支援技術を使用して、当社のコンポーネントで構築された機能にアクセスできることを期待してください。これには以下のようなネイティブおよびサードパーティのツールが含まれます。

スクリーンリーダー
音声認識プログラム
弱視や色覚異常のサポート
代替キーボード
スイッチデバイス
読みやすさのためのツール

コーディング標準

Polaris のコンポーネントは、HTML、CSS、および JavaScript のウェブ標準から始まります。Accessible Rich Internet Applications (WAI-ARIA or ARIA) 仕様の機能は、ネイティブの HTML では利用できない機能を構築するために使用されます。

代替テキスト

スクリーン・リーダーや音声読み上げプログラムなどの支援技術に頼っている方のために、情報や動作を伝えるためのアイコンや画像（ボタンやリンクなど）に代替テキストを使用しています。

ウェブコンテンツアクセシビリティガイドライン（WCAG）への対応

Polaris は、WCAG 2.1 レベル A およびレベル AA の成功基準を目標としており、すべての人に非常に使いやすい体験を提供することを目指しています。

より詳細な情報は、以下のリソースをご覧ください。

フィードバック

アクセシブルでインクルーシブな体験を構築することは、時に難しいことです。このスタイルガイドに誤りがあった場合は、GitHub の issue を作成して、より良いものにするためにご協力ください。

Shopify アプリのご紹介

Discussion

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