ECサイトにおけるWEBアクセシビリティの対応について

Webアクセシビリティとは？

「アクセシビリティ」の元になった用語は、「Access」（近づく、アクセスするの意味）と、「Ability」（能力、できることの意味）で、つまりWEBアクセシビリティとは、年齢や利用環境にかかわらず、あらゆる人々がWEBサイトで提供されている情報やサービスを不自由なく利用できること、またその到達度合いを指します。

WEBアクセシビリティが重要な理由は、インターネットやパソコンなどの情報通信技術を利用できる人と、利用できない人の間に生じる情報格差（デジタルデバイド）を解消する必要があるからです。

障害をお持ちの方や高齢者などは、WEBサイトを利用するうえでハンデを抱えている場合が多く、必要な情報や情報通信技術の恩恵を受けられないケースがあるため、WEBアクセシビリティ対応が求められます。

また、WEBアクセシビリティへの対応は世界的な潮流で、世界各国ではWEBアクセシビリティを法的に義務付ける動きが進んでいます。例えばフランスでは、2020年より年間売上高2億5千万ユーロ以上の企業を対象に、WEBアクセシビリティの基準と罰則金制度を設けました。アメリカでは、WEBアクセシビリティへの対応が不十分であることを理由とする訴訟件数が、2015年から2021年にかけて約70倍まで急上昇しています。

それでは、一般的に「アクセシビリティが確保できているWEBサイト」とは、どのような状態を指すのでしょうか？具体的には、以下のようなことができるWEBサイトを指します。

・目が見えなくても情報が伝わる
・操作できる
・キーボードだけで操作できる
・一部の色が区別できなくても十分に情報が得られる
・音声コンテンツや動画コンテンツで、音声が聞こえなくても内容が分かる

こうしたWEBサイトを構築することで、視覚障害のある方、聴覚障害のある方、色覚特性のある方などが、問題なくWEBサイトを通じて情報を入手したり、あらゆるサービスを利用できたりするようになることが重要です。

WEBアクセシビリティを確保できれば、視力や聴力が衰えた高齢者や、怪我や病気などで目や耳が使えない人、あるいは明るさの足りない環境や雑音により音声の取得が難しい状況にある人など、あらゆる人々がWEBサイトにアクセスでき、その恩恵を受けることができるようになります。

さらに、ページタイトルやリンクテキストを適切な内容にすれば、他言語への自動翻訳の精度が向上し、外国人にとっても理解しやすくなります。

このようなWEBアクセシビリティ対応により、障害者や高齢者なども不自由なく情報を得られ、社会活動にも参加しやすくなれば、生活の質（QOL）の向上にもつながります。あらゆるユーザーのWEBサイト利用時に直面する障壁を取り除くことは、もはや企業の社会的責任とも言えるでしょう。

Webアクセシビリティを対応するメリット

では実際にWEBアクセシビリティに対応すると、どんなメリットがあるのか。具体的に見ていきましょう。

全ての利用者にとって使いやすいWEBサイトになる

WEBアクセシビリティを確保するためには、WEBサイト全体を通じて一貫したナビゲーションのルール作ったり、なるべく専門用語の使用を避けて簡潔な説明にするのはもちろん、見出しやリスト、図表などを使って情報を整理するなど、情報を視覚的に伝える配慮も必要になります。

こうすることで、障害の有無に関わらず、多くの人が使いやすく、情報を探しやすいWEBサイトになり、さらに他言語への自動翻訳の精度も向上し、外国人にとっても理解しやすいWEBサイトになります。

WEBサイトへの集客数増加が期待できる

現在では、インターネットは、パソコン、スマートフォン、タブレット、テレビ、ゲーム機など多様なデバイスで利用されているだけでなく、マウス、キーボード、タッチパネル、音声など様々な手段で操作できます。

WEBアクセシビリティを確保するということは、原則的に特定のデバイスや操作方法に依存しないということなので、ユーザーは好きなデバイスや操作方法でWEBサイトを利用できるようになります。こうして、いつでも、どのデバイスからもアクセスできるようになれば、必然的にWEBサイトへの集客数増加も見込めます。

WEBサイトのSEO効果が見込める

例えば、画像に対してalt属性（代替テキスト）を設定していると、視覚障害のある方がコンピュータの画面読み上げソフトウェアを通じて、どんな画像なのかを理解することができます。

またそれだけでなく、検索エンジンのクローラーなども、画像をテキスト情報として読み取ることができるようになります。動画や音声コンテンツも同様で、字幕やテキストを設定していると、プログラムがテキスト情報として読み取ることができます。

その結果、WEBサイトの検索精度が高まるだけでなく、WEB上の文書や画像などを周期的に取得する検索エンジンのクローラーも、WEBサイトの構造や内容を理解しやすくなります。

さらに、WEBサイトの使い勝手が格段に向上すれば、ユーザーの滞在時間も長くなることから、よりSEOの効果も期待できるわけです。

こうしてWEBアクセシビリティを確保することで、発信する情報や提供するサービスが全ての人にまで届くようになり、ユーザーの満足度が向上し、ひいては企業の売上アップにも貢献するでしょう。

ウェブアクセシビリティの導入には「ユニウェブ」がおすすめ

「ユニウェブ」とは、株式会社Kivaが提供するツールで、費用を抑えつつすべてのWEBサイトのWEBアクセシビリティ機能をサポートする、プラグイン型のツールです。

WEBサイトにコード一行を追加するだけで、導入当日にWEBアクセシビリティ機能をサポート。
年齢的・身体的条件に関わらず、すべての人が平等にWEBサイトを利用できるようになります。

「ユニウェブ」の特徴は具体的に以下の通りになります。

WEBアクセシビリティ診断レポート

WCAG（Web Content Accessibility Guidelines※）に基づく評価を行い、ウェブサイトの問題点を洗い出します。修正が必要な箇所を一つずつ提案するので、誰でも修正すべき点を簡単に見つけることができます。

また、「JIS X 8341-3:2016」や「WCAG2.1」といったWEBアクセシビリティ規格対応のサポートもしてくれます。

※W3C（World Wide Web Consortium）と呼ばれる、WEBの世界的標準化を目指す国際的な団体が作成している、あらゆる人がWEBコンテンツを利用できることを目指したガイドライン。
各国で採用されている、WEBアクセシビリティにおける国際標準です。

誰でも簡単導入

提供されたコード一行をウェブサイトに追加するだけで、アクセシビリティ機能（詳細は別項で解説）を実現。専門的な技術知識がなくても迅速にアクセシビリティ機能を実装できます。

具体的には、「ユニウェブ」を導入したWEBサイト上にはコントロールボタンが表示され、アクセシビリティメニューよりユーザーが自ら様々な機能が利用可能になります。さらに選択した機能は、瞬時にWEBサイトに反映されます。

豊富なカスタマイズ

豊富なアクセシビリティ機能だけでなく、ボタンの色や大きさなどブランド・世界観を崩さない幅広いカスタマイズが可能です。

ユーザーの個別ニーズに対応

色覚障害、ADHD、視覚障害などユーザーの症例に応じて、ワンクリックでWEBサイトを適応させます。

「ユニウェブ」のサービス利用までの流れは以下の通りになります。

Step①ドメイン確定
「ユニウェブ」を利用するWEBサイトのドメイン数とPV数を連絡

Step②見積り
Step①で提供した情報に基づいた見積もり（※）が提示されます

Step③WEB申込
見積もりが問題なければ、WEB上で利用申込書を送信

Step④アカウント発行即日導入
アカウントが発行され、「ユニウェブ」のサービス利用開始が可能に

※料金は「1ドメイン毎の月額制」となり、利用するドメイン数とPV数により利用料金が算出されます。

ECサイトにおけるユニウェブの導入事例

「ユニウェブ」は多くの有名企業のWEBサイトに導入されている実績があり（導入例は下記参照）、
さらに有名プラットフォームとの提携実績も多数あります。

導入事例

オルビス株式会社：https://corp.orbis.co.jp

スキンケアを中心とするビューティーブランドであるオルビス株式会社（本社：東京都品川区）は、同社が運営するメディアサイトと、コーポレートサイトの機能を併せ持つオウンドメディア「ORBIS IS」に、「ユニウェブ」を導入しています。

インバースネット株式会社：https://www.frontier-direct.jp/

インバースネット株式会社（本社：神奈川県横浜市）は、自社で運営するBTOパソコンのブランド「FRONTIER（フロンティア）」公式通販サイトに、ウェブアクセシビリティサービス「ユニウェブ」を導入しています。

フェイラージャパン株式会社：https://www.feiler-jp.com/

ドイツ生まれの高級織物ブランド、フェイラージャパン株式会社（本社：東京都千代田区）は、運営する公式ブランドサイト、公式オンラインショップにウェブアクセシビリティサービス「ユニウェブ」を導入しています。

いずれもサイト上に表示される「ユニウェブ」のアイコンをクリックすると、「アクセシビリティ メニュー」が表示（ユーザーが非表示にすることも可能）。

さらにデフォルトで設定されている「カスタマイズ設定」では、ユーザーは以下の機能が設定可能となっています。

【部分リーダー】選択箇所のテキストを読み上げる機能
【コントラスト】コントラストを変更する機能（反転・ダークコントラスト・ライトコントラスト）
【スマートコントラスト】コントラストを部分的に変更する機能
【リンクハイライト】リンクをハイライトする機能
【文字を大きく】文字サイズを変更する機能
【文字の間隔】文字間隔を3段階に調整する機能
【アニメーションを停止】 自動再生される動画やカルーセル表示などのアニメーションを停止する機能
【画像を非表示】画像を非表示またはテキストで表示にいずれかを選択可能
【リーディングモード】WEBサイトを文章のみで表示する機能
【フォント】「失読症の方」「読みやすいフォント」のいずれかのフォントが選択可能
【カーソル】「ビッグカーソル（カーソルを大きく）」「フォーカス（カーソル周辺の色が変わる）「リーディングガイド（カーソルに横線が表示）」のいずれかを選択可能
【ツールチップ】リンクや画像をフォーカスした際に、詳細な情報をツールチップで表示する機能（モバイル端末は非対応）
【ページ構造】WEBサイトのページ構造をモーダル表示する機能
【行の高さ】行の高さを3段階に調整可能
【文字位置】「左寄せ」「右寄せ」「中央揃え」「均等」から選択可能 【色彩度の設定】「彩度 低」「彩度 高」「モノクロ」から選択可能
【音声をミュート】メディアの音声をミュートする機能
【やさしい日本語 AI】サイト上の単語や文章の意味を説明する機能
【ふりがな】選択した漢字のふりがなを表示する機能
【スクリーンリーダー】フォーカス箇所のテキストを読み上げる機能
【仮想キーボード】画面上の仮想キーボードを利用して文字を入力できる機能

また「ワンクリック設定」では、特定のプロファイル（下記参照）から、即座に「ユニウェブ」機能の有効化ができます。
・運動障害
・色覚障害
・失読症
・視覚障害
・認知と学習
・てんかん
・ADHD

【まとめ】ECサイトにおけるWEBアクセシビリティの対応について

WEBアクセシビリティを確保すれば、視力や聴力が衰えた高齢者や、怪我や病気などで目や耳が使えない方、また明るさの足りない環境や雑音により音声の取得が難しい状況にある方など、あらゆる人々がWEBサイトにアクセスでき、その恩恵を受けることができるようになります。

こうした障害をお持ちの方や高齢者などに対して、合理的配慮をしたWEBサイトを構築・運営することは、企業の社会的な責任としてとても大切なことです。

さらに、WEBアクセシビリティを確保すれば、WEBサイトへの集客増やSEOの効果も期待できるので、すぐにでも対応することをおすすめします。

なお、WEBアクセシビリティの対応を怠った場合、直ちに罰則が課されることはありませんが、非対応のWEBサイトを放置し続けると行政からの指導が入ることがあります。さらに自主的な改善が見られない場合は、罰則（20万円以下の過料）の対象となりますので、ご注意ください。

この記事を書いた人

ルビー・グループ コーポレートサイトチーム

各分野の現場で活躍しているプロが集まって結成されたチームです。
開発、マーケティング、ささげ、物流など、ECサイトに関するお役立ち情報を随時更新していきます！

• Post
• Share
• LINE
• Hatena
• Pocket
• feedly