Test-hajime
![](http://goriderep.com/cdn/shop/articles/web-accessibility-by-accessibe_f1cce184-e963-4b9b-9361-e3dd86cd9016_1200x1200.jpg?v=1726118945)
ウェブアクセシビリティとは
ウェブアクセシビリティとは、ウェブサイトやアプリケーションが、すべてのユーザーにとってアクセス可能で使いやすい状態を通ります。
これは、特に障害を持つ人々、例えば視覚障害者、聴覚障害者、運動障害者、または認知障害を持つ人々が、ウェブのコンテンツや機能を利用できるようにすることを目指しています。
ADA、WCAGとはなにか
ウェブアクセシビリティに関する重要な指針とガイドラインのことです。これらは、ウェブサイトやデジタルコンテンツがすべてのユーザーにアクセス可能であることを確保するための基準です。
ADA(Americans with Disabilities Act)
ADAは、1990年に米国で制定された法律で、障害を持つ人々に対する差別を禁止するものです。この法律は、公共施設、雇用、通信など、多くの分野に適用されます。
ADAについて詳しくはこちらの記事をご確認ください!
・日本でも始まったウェブアクセシビリティとADA (Americans with Disability Act) との違い
WCAG(Web Content Accessibility Guidelines)
WCAGは、World Wide Web Consortium(W3C)のWeb Accessibility Initiative(WAI)が策定したウェブコンテンツのアクセシビリティに関するガイドラインです。WCAGは、ウェブサイトやアプリケーションが障害を持つユーザーにとって利用可能であることを確保するための技術の基準です。
WCAGの原則
1.知覚可能(知覚可能)
2.操作可能(Operable)
3.理解可能(理解できる)
4.堅牢
準拠の3つのレベル
A(最低限の要件):基本的なアクセシビリティ要件。
AA(中間レベル): 多くの障害者にとってアクセス可能であることを確保する要件。
AAA(最も高いレベル): すべてのユーザーが利用可能な状態を目指す、より厳しい要件。
Web Accessibility by accessiBeとは
AccessiBe による Web アクセシビリティは、ADA と WCAG に準拠し、AI を活用した Web アクセシビリティの自動化アプリです。このアプリは、障害者コミュニティと協力して構築されています。
① アプリのインストール
![アプリインストール確認画面](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/2_d2aeb980-8aa5-4518-980b-06c1b8f83fd9.png?v=1725872006)
アプリがアクセスする内容を確認し「インストール」ボタンをクリック。
② アプリからの承認を許可
![インストール後の確認画面](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/3_de4131b3-4e68-43f8-929a-4dadfe8815f9.png?v=1725872085)
ガイダンスの通りチェックを入れて保存することで、インストールは完了します。
![Shopifyカスタム画面](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/4_21016eca-5f02-4a0b-80eb-c5d2d27c32ef.png?v=1725872087)
インストールが完了したら、テーマのカスタマイザーにてアプリをONにしてください。
そうすることで、アプリをサイトに導入することができます。
③ 管理画面のアプリメニューバー
メニューは2種類です。
・カスタマイズ
表示する内容をカスタマイズするメニュー
・契約プラン
アプリの契約プランを選択するメニュー
![管理画面のアプリメニューバー](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/5_401e6a14-960b-48c3-85d4-48cf33fc4f66.png?v=1725872203)
④ パソコンとモバイルそれぞれの表示方法や言語を設定
表示方法や、言語の設定は、メニューバーのカスタママイズから可能です。
![アプリの設定①](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/7_539413ff-9693-4e8e-a9b4-59b9c3baf765.png?v=1725872288)
![アプリの設定②](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/8.png?v=1725872293)
![アプリの設定③](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/9_35596de9-82d5-472b-8537-168a558817b8.png?v=1725872297)
⑤ パソコンとモバイルの表示例
PC表示の場合
![PCサイズ時のアプリの表示](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/10_8146fc85-6da8-4fe8-be3c-d802bf3f6454.png?v=1725872434)
モバイル表示の場合
![スマホサイズ時のアプリの表示](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/11_9e8dd05a-50d6-43cd-94f0-89dabdc0d217.png?v=1725872438)
アイコンをクリックすると設定が画面が表示される仕組みとなります。
![アプリクリック時の表示](https://cdn.shopify.com/s/files/1/0624/9381/9131/files/12.png?v=1725872540)
まとめ
Shopifyストアにウェブアクセシビリティアプリを追加することは、サイトに訪れたすべてのユーザーがアクセス可能になり、より多くの方に商品を提供できるきっかけになると思います。
今回ご紹介したアプリのように、比較的簡単に導入できるうえに、メリットも大きいため、是非ウェブアクセシビリティを導入してみてください!