Shopifyでアクセシビリティの高いサイトを作る方法

2021.03.10

Shopifyで出店する際、皆さんはアクセシビリティに気を配ってショップを作成しているでしょうか?

あまり気にして作っていないという方や、そもそもアクセシビリティってなに?という方、このアクセシビリティによって販売機会の損失、チャンスロスが起こっているかもしれません。

ここではアクセシビリティとはどのようなものか、どのように導入していくのかまで解説します!

アクセシビリティの重要性とは?




アクセシビリティとは「近づきやすさ・利用しやすさ」などを指す言葉ですが、IT、Webに関してはユーザーが求める情報までいかに簡単にアクセスできるかを表します。

サイト自体が見にくく求める情報が探しにくい場合もありますが、人によっては手が動かしづらい状況にあったり、目や耳が不自由だったりするケースもあります。

これだけインターネットが普及している世の中ですから、利用する人もさまざまです。

アクセシビリティを向上させることは、この現代において、とても重要な機能となっています。

アクセシビリティの導入方法とは?




Webサイトにおけるアクセシビリティは、国内では「JIS X 8341-3」(正式名称:高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)が基準とされています。

また、アクセシビリティというと、「画面読み上げ機能」「文字サイズ変更ボタン」「文字/背景色変更ボタン」をイメージする方も多いと思いますが、これら機能の実装はJIS規格でも言及されておらず、専用ソフトを別途組み込んでいるケースが多い近年は、必要ないとされています。

それでは具体的にどのようなものを組み込めばよいのでしょう?

2017年9月にはInternational Association of Accessibility Professionals (IAAP)から、日本人で初めて「Certified Professional in Web Accessibility (CPWA)」として認定され、株式会社インフォアクシアの代表理事を務める植木真氏によると、アクセシビリティは「基本の”キ”10項目」が重要と話しています。

【アクセシビリティ確保「基本の”キ”10項目」】
1. ページの内容がわかるページタイトルを記述する
2. 見出しやリストなどの文書構造をマークアップする
3. リンクテキストは、リンク先がわかる文言にする
4. 情報を伝えている画像に代替テキストを提供する
5. 情報を伝える色の使い方に注意する
6. ユーザーがコンテンツを拡大表示できるようにする
7. キーボードだけでも操作できるようにする
8. フォームコントロールのラベルや説明をマークアップする
9. エラーメッセージではエラー箇所と修正方法を明示する
10. 動画にキャプション(字幕)を提供する

出典:Webアクセシビリティ確保 基本の「キ」|実践ノウハウ|エー イレブン ワイ[WebA11y.jp]


この10項目に共通するのは、なにか特殊な機能を組み込むというより、ウェブサイトを作る上で基本的なことを着実に行っていけば、それがアクセシビリティにつながるということ。

また、ShopifyはCMSによって画像テキストを入れたり、文書構造のマークアップをサポートしたりする機能を持ち合わせているので、特別な技術を必要とせずにアクセシビリティを向上させることができます。

作成したサイトをユーザーに使ってレビューをもらったり、自分で使用してみたりすることで、使いやすさを確認しながら少しずつ改善していくことが大切です。

アクセシビリティ向上のためのおすすめアプリ




Shopifyにはアクセシビリティを向上させる便利なアプリもたくさんあります。

ここでは、そんな便利なアプリを紹介します!

● langify – 翻訳アプリ




langifyは月額17.50ドルで利用でき、利用者が普段利用する言語を自動感知し、翻訳してくれるアプリです。

言語設定も対応している項目が一目で分かるよう表示されており、必要箇所に入力すればすぐに利用できます。

● BEST Currency Converter – 通貨を国に合わせて変換




BEST Currency Converterは通貨のユーザーの希望に合わせて表示変更ができるアプリです。

無料版では5種類の通貨が、有料版では160種類以上の通貨に対応しています。

1日に2回、自動でレートの更新も行ってくれるので常に最新の情報を表示してくれます。

● HelpCenter | FAQ & HelpDesk – 問い合わせページの作成




お問い合わせページやFAQを作成できるアプリです。

なにかあったときにすぐに管理者と連絡できることで、顧客満足度もあがります。

● Power Tools Suite – 検索機能の追加




Power Tools SuiteはShopifyのサイト内で絞り込み検索ができるアプリです。

絞り込み検索ができることで、ユーザーはより簡単に素早く希望の商品を探し出すこともでき、ECサイトとしてのアクセシビリティが向上します。

● Change Image On Hover Effect – ホバーエフェクト効果




Change Image On Hover Effectはカーソルを商品に合わせるとホバーエフェクトをかけてくれるアプリです。

地味な表示に見えるかもしれませんが、ユーザーは視認性が向上するのでその商品により興味をもちやすくなります。

● Yotpo Product Reviews & Photos – レビュー機能の追加




商品においてレビュー機能はとても重要な情報の一つです。

レビューが書いてあることによってユーザーも商品に対しての信頼感が高まり、商品を選びやすくなります。

アクセシビリティを高めて顧客満足度も高めよう




アクセシビリティを高めると聞くと、難しそうに感じるかもしれません。

しかし、Shopifyはアクセシビリティを高める機能もとても作りやすいCMSとなっています。ターゲットに沿ったサイトを作るためにアプリで少しカスタマイズしてあげれば、より高い顧客満足度を得られ、さらに売上を伸ばすことができるでしょう。

大切なのは一気に全てのことをやろうとするのではなく、普段からいろんな人に使ってもらって少しずつ改善を重ねていくことです。

ARCHETYP Commerceでは、アクセシビリティに関するサポートはもちろん、Shopifyの導入や運用のご相談、テーマのインストールやカスタマイズ、オリジナルテーマの開発も承っております。興味のある方はお気軽にお問い合わせください!