アクセシビリティに配慮したShopifyテーマを作成する

みなさんはクライアントのためにShopifyテーマを構築するとき、アクセシビリティに注力しているでしょうか？

答えがNoであるなら、オンラインショッピングを求めている多くの人々のためにユーザビリティを向上させるという機会を著しく失っていることになります。

Shopifyはデザイナーの方がアクセシビリティに強く取り組み、Web業界におけるその重要性を理解するとともに、毎日のワークフローにアクセシビリティのテストを組み込めるようにお手伝いをしたいと考えています。この記事では、クライアントのネットショップをすべての人に開かれた世界一のものにするためのいくつかの簡単な方法をご紹介します。

Webアクセシビリティの重要性

a11yとも表記されることのあるアクセシビリティは、障害を持っているかどうかに関係なくすべてのユーザーが使いやすいWebサイトやネットショップを構築するために、デザイン＆コードを戦略的に使用することを指します。

National Eye Institute、Microsoft、コーネル大学がおこなった調査によると、アクセシビリティ上の問題は想像以上に一般的な広がりをもっています。下記は米国内だけでの数字になります。

・2.3%の人は文字の読み書きが困難

・男性の8％が色盲を抱えている

・成人の7％は細かい手作業が困難

・3.6%が聴覚障害を持つと報告されている

しかしこれらの数字は、自覚症状がある人たちの報告に拠るものです。いろいろな状況によって、多くのユーザーが視覚、聴覚、操作の面で困難をおぼえることが考えられます。こうしたユーザーがコンテンツに簡単にアクセスして利用できるようにサイトを構築することは、開発者の重要な仕事です。

またアクセシビリティは急速にWebでの必須事項となりつつあります。Shopifyのマーチャントであるかどうかに関係なく、あなたのクライアントの多くは、Webサイトのアクセシビリティについて何らかの法的基準がある環境で仕事をしているでしょうし、多くの人たちがその基準に向かっています。

そうした理由から、開発者はアクセシビリティに取り組む際にしばしばWCAG2.0を参照します。これはアクセシビリティの高いWebサイトを構築するための国際的な基準です。このWCAGの基準に沿ったWebサイトを作ることで、同時に多くの法的管轄内のアクセシビリティ法に準拠することになります。

プロジェクトを先に進める前に、こうしたアクセシビリティの要件を調査して理解することが大切です。地理的な規制については、W3Cの地域ポリシーのページも参照してください。

ワークフローにアクセシビリティをどう組み込むか

開発期間中にアクセシビリティに注力しない理由としてよく引かれるのが、スケジュール通りの進行に影響を及ぼしかねないというものです。多くの人にとって、アクセシビリティは既存の安定したワークフローに付け加える追加ステップの1つに過ぎません。

しかし、おこなった変更が機能するかどうかチェックするためには、ネットショップを開発しながら実際に触ってみることが欠かせません。これはアクセシビリティに関する調整をする際にはなおのこと重要です。変更点のテストやデモによって、問題点や新たな機会に対してフラグを立てることができます。

既存のワークフローにアクセシビリティチェックを組み込む方法や役立つツールを、以下でご紹介します。

1. キーボードナビゲーションのテスト

キーボードナビゲーションのテストは、アクセシビリティ評価のためにワークフローに組み込む方法としてもっとも簡単で干渉性が低く、低予算で可能です。

基本的に、タブキーだけでウェブサイトを移動できるかどうかを確認するテストとなります。これにより、キーボードを使って特定の場所に移動するナビゲーション性の高さを検証することができます。また、マウスに触ることなくインタラクティブな要素やモーダルが操作できることを確認する点においても役立ちます。

このテストでは、どの要素にフォーカスが当たっているか明白にすることも求められます。ほとんどのブラウザでは、フォーカスされている要素 （:focus）にデフォルトのCSSスタイル（ブルーのアウトラインのシャドウなど）があてられています。ただし、この:focusのステートはCSSで上書き可能なので、上書きされるときに完全に取り除かれることなく、むしろ既存のテーマやスタイルを強調するように配慮することが重要です。

商品をカートに入れたりチェックアウトするなどの特定のアクションが、自分のサイトで達成できるか試してみてください。

2. スクリーンリーダーのテスト

スクリーンリーダーは、表示されているウェブページのテキストを視覚に障害のあるユーザーが理解するのを助けるプログラムです。ユーザーが追うページ内の要素を音声で読み上げます。

スクリーンリーダーとキーボードナビゲーションのテストを同時におこないがちですが、そうしないことをお勧めします。スクリプトリーダーがオンになっているときだけ機能するキーボードのアクションもあるので、テストの結果に影響してくるのです。

スクリーンリーダー向けのブラウザでテストすることが重要です。サポートしていないブラウザでテストしても、実際にユーザーが遭遇するわけではない問題に無駄に時間を取られることになります。いままでに経験がない場合は、以下のスクリーンリーダーをテストに使うと良いでしょう。

・VoiceOver (Mac/iOS Safari)

・JAWS (Internet Explorer)

・NVDA (Windows FireFox)

・ChromeVox (Google Chrome)

3. 自動アクセシビリティテスト

自動化されたテストを利用する場合でも、アクセシビリティの評価のためにマニュアルプロセスは必要となりますが、ワークフローをできる限り簡素化したい場合にはいくつか自動化のオプションがあります。

自動アクセシビリティテストをcode-linterに似たものと考えてみてください。あなたのJavaScriptがlintingをパスしたからといって、あなたの望む動作をするとは限りません。同じ発想が自動テストツールにも当てはまります。ツールによって一般的なミスを防ぐことができますが、マニュアルで仮説を検証することなしには、アクセシビリティの高いページを作ることはできません。

自動テストツールを導入する際には、マニュアルのチェックほど正確な結果は出せないということを覚えておいてください。

いくつか自動ツールがあるのでチェックしてみましょう。

・Accessibility Developer Tools …Chrome開発ツールの中に、アクセシビリティ検証機能とサイドパネルを付加する拡張機能です。

・Addy Osmani’s a11y tools…これは一連のコマンドラインのアクセシビリティツールで、ローカルまはたリモートのURLを検証し、改良可能な場所を特定します。

・aXe: The Accessibility Engine…テスト用フレームワークまたは指定のブラウザ内で、アクセシビリティの検証を自動でおこなうオープンソースのJavaScriptライブラリです。

・HTML＿CodeSniffer…JavaScriptベースのブックマークレットで、簡単なアクセシビリティの検証を実行します。カラーコントラストや推奨マークアップなどをチェックでき、使用中のどのウェブページでも実行できます。

・Tenon.io…あなたのサイトやAPIを使ったコードでアクセシビリティチェックを実行する有料サブスクリプションサービスで、既存のCMSを使ったワークフローで実行可能です。

4. ユーザーテスト

アクセシビリティ評価の最善はといえばユーザーテストです。

アクセシビリティの検証が細かいものであり、それを頻繁に実施したとしても、実際に障害を持った人がウェブサイトを使用するのと同じようにテストすることはできません。しかし、多くの開発者やクライアントは、ユーザーのアクセシビリティテストにかける予算がないか、もしくは予算を使うことに消極的です。

もしユーザーテストが可能なのであれば、サイト、アプリ、プロダクトをユーザーにテストしてもらことで、アクセシビリティの観点から非常に有益な情報が得られるでしょう。ローンチする前に、障害を持った人がみなさんの作ったものをどう使うのか深く理解することができます。

アクセシビリティとShopifyテーマ

アクセシビリティの重要性をここまでお伝えしてきたので、次はアクセシビリティの原則を、Shopifyテーマの開発時にどのように適用していったらいいのか、それを見ていきましょう。

開発という観点では、Webサイトのアクセシビリティの基盤はHTMLです。サイト上にあるコンテンツの種類をユーザーにより正しく知らせるためには、適切な場所にセマンティックなマークアップと解説的なタグが配置されていることを確かめる必要があります。Shopifyストアの場合、同じ原則がLiquidの簡単な変更にも適用されます。

以下に記した影響力の大きい要素は、アクセシビリティの最適化の成果で、Shopifyテーマストアでわたしたちがテーマのアクセシビリティについてテストとリサーチをしている間に確認したものです。

1. 画像とaltテキスト

ウェブページでユーザーに関連のある情報を含んだグラフィカルな要素（商品画像など）は、フォールバックとしてアクセス可能なテキストを持つべきです。画像の場合、これはalt属性となります。

altテキストは、スクリーンリーダーに頼るユーザーがページ上のコンテンツを理解するために非常に重要です。これを効果的に書くことにより、altテキストは、jpgファイルを示すランダムなURLではなく、画像がもたらすコンテクストと意味をスクリーンリーダーに提供します。

altテキストを検討する段階では、ユーザーにとって明確・簡潔で文脈がわかる利便性の高い記述になるよう心がけましょう。たとえば、青いスエードシューズの商品画像があるなら、altテキストは「青いスエードのシューズ」または「青いスエードのシューズの商品画像」となります。

Shopifyはこのプロセスを促進するために自動で商品やコレクションのaltテキストを生成します。とくに商品画像の場合、Shopifyは商品名を自動でaltテキストとして使用します。

またaltテキストは、テーマの設定からアップロードされる画像（ヒーローイメージやスライドショー）にも適用すべきです。たとえば、スライドショーを使用するときに前後の文脈から設定できる機能がない場合、altテキストを定義するために、デフォルトではslide_heading となっている画像内のaltテキスト設定を追加することができます。

バックグラウンド画像のような、テーマのコアコンテンツとは関係のない装飾的な要素の場合は、altタグをブランクにしておくことにも注意が必要です。こうすることで、ショッピングをするうえでユーザーにとって関連性のもっとも高いコンテンツだけが確実に提供されることにつながります。

2. アイコン

アイコンはどのネットショップでも使われていて、あなたがユーザーに取ってほしい行動を素早く示すコミュニケーションを可能にします。しかし画像と同様に、ユーザーの視覚が奪われ、ウェブサイトのナビゲーションをスクリーンリーダーに頼らざるを得ない状況ではこの機能が失われます。

アイコンのデザインにはSVGを使うことが推奨されますが、標準の仕様ではアクセシビリティに課題を残しています。スクリーンリーダーはSVG要素を読むことができず、カートアイコンの上にマウスが置かれても「カート」と読み上げることができません。

代わりにその要素をスクリーンリーダーから完全に隠し、spanタグを追加して代替テキストを提供する必要があります。ナビゲーションバーのカートアイコンのためにこれを実装する場合、以下に示すようなコードを書くことになるでしょう。

3. フォーム

フォームはメール登録やコメントセクション、商品レビュー、チェックアウトなど、ネットショップで幅広く使用されているため、アクセシビリティを改善すべき主要な領域といえます。使用箇所が多いから重要というだけではなく、フォームはサイトビジターにとって通常はきわめてインタラクティブな要素となるからです。

フォームのアクセシビリティを向上させる方法はおもに2つあります。1つは、HTMLをよりセマンティックに改良することであり、たとえユーザーから隠されているとしてもそれぞれのインプットフィールドにラベルを付けるなどの対応が必要です。もう1つは、使用状況に応じたコピーをスクリーンリーダーで読み上げることによって（色だけが問題なのではありません）、エラーの表現の管理をおこなうことです。

Note：この方法はフォームに限らず、ナビゲーションメニューなどのインタラクティブな要素にも適用することができます。

以下はストアのコメントセクションの例です。ユーザーがフォームへの書き込みをおこなったとき、エラーを表示するためにform.error のLiquidオブジェクトを使用（成功の場合は同様にform.successを使用）します。

4. テーブル

テーブルの扱いはとくにフラストレーションがたまるものです。とくにdivやspan の代わりとして使用している場合には。とはいえdivとspanではスクリーンリーダーにとってコンテンツの組み合わせがわからないので、テーブルがベストな代替策となります。

テーブルのアクセシビリティを向上させるには、ヘッダーを視覚的には非表示とし、ただしスクリーンリーダーを使うユーザーのために読み上げ可能にする必要があります。同時にCSS自体にラベルを含めてデータのラベル属性を引き出せるようにし、音声なしでもビジュアルで表示できるようにします。こうすることでレイアウト面でのカスタマイズを可能としながら、アクセシビリティが全体的に高いテーブルができあがります。

テーマで簡単にこれを実現する方法の例がこちらです。

5. 価格

価格表記はネットショップ全体にわたって異なります。小数点表記をするところもあれば、そうではなくドルに上付き文字でセントを表記するところもあります。

上付き文字はデザインとしては視覚的に魅力がありますが、別々のHTMLタグと価格の関係性をスクリーンリーダーで理解する際に混乱が生じます。

ここでは上述したアイコンのときと似たパターンを採用することができます。2つめのspanで値を視覚的に隠し、1つめのspanでは視覚的に表示してスクリーンリーダーからは隠します。

下記がリストアイテムの価格表示の例です。

セールや割引価格の表記は、テーマ内でアクセシビリティのために取り組むまた別の領域となります。セール価格を記載するとき、色を変えたり打ち消し線を使うことがよくあります。こうしたビジュアル的な記号を使うと旧価格と新価格が区別しやすく、その関係性もわかります。

このビジュアル記号を取り除いてスクリーンリーダーに頼ると、2つの関連しない数字が続いているように聞こえますが、これはユーザーにとっては混乱の種となります。セール価格とそうではない価格を判別できるコンテクストを提供するには、下記に示すように視覚的に隠したspanタグを商品価格に続けて付け加える必要があります。

6 カラーコントラストとテキスト

カラーコントラストに触れることなくアクセシビリティについて語ることはできません。背景とテキストの色の組み合わせは、色盲やほかの視覚障害を持つ人だけではなくすべてのユーザーにとって、コンテンツの可読性に大きな影響をおよぼします。

現在取り組んでいるデザインをチェックすることが重要です。そうすれば多大な時間投資をする前に問題を見つけることができます。そうしないとサイトを完全にアクセスしやすいものにするために、やり直しの時間が大量に必要になります。

アクセシビリティに精通した開発者になる

アクセシビリティに精通した開発者は、開発作業中に自分の仕事を時間をかけて評価し、再考します。

潜在ユーザーの観点に立って、「タブキーを押したら何が起こるか？」「スクリーンリーダーやほかの読み上げデバイスを使って目的を達成するにはどうしたらいいか？」と自問することが求められます。

ウェブサイトを操作できるか心配することなく、だれもが簡単にオンラインショッピングが楽しめるように力を合わせていくことができます。

一緒にウェブをもっとアクセスしやすいものにしていきましょう。

テーマ開発のワークフローにアクセシビリティテストを組み込んでいますか？

みなさんの知識をShopifyコミュニティで共有してください！

原文：Simon Heaton 翻訳：深津望