WebアクセシビリティとはWebへのアクセスのしやすさや利用のしやすさを目指すものです。

Webページはインターネット環境があれば誰でもアクセスできるサービスですが、必ずしもそうとは限りません。

例えば高齢者や障害者など利用が制限される人は少なからず存在します。

そうした人にもアクセスしやすいWebページが求められているのです。

こうしたWebサイトをWebアクセシビリティと呼んでいます。

今回はWebアクセシビリティについて解説します。

Webアクセシビリティ概要

街の公共施設などにはスロープや点字ブロックが施され障害のある人に配慮した街づくりを国や地方自治体が進めています。

Webの世界も同様に、全ての人がインターネットを活用できるように工夫することをWebアクセシビリティといいます。

つまりWebサイトのバリアフリー化といってもいいでしょう。

ここでWebアクセシビリティの概要について解説します。

全ての人が使えるかが重要

海外では公的機関のWebコンテンツにアクセシビリティを法律で義務化している国も多くあります。

そうした国ではWebを使えることは人権の1つだという考え方があるのです。

インターネットは生活の中でなくてはならない存在になり、障害者が利用できないのは差別であると考えられています。

日本の企業でも障害を持った人が安心して使えるWebアクセシビリティを取り入れるようになりました。

Webアクセシビリティが重要な理由

世界には障害を抱えた人が少なくありません。

そうした人も身体能力や環境に関係なく、誰もが自由で平等にWebが使え情報が入手できるのがWebアクセシビリティです。

海外ではWebサイトにアクセスできないために情報が入手できなかったとして訴訟に発展しているケースもあります。

また、Webサイトはアクセシビリティに対応した誰にも見やすいサイトであるべきなのです。

Webアクセシビリティチェック方法

Webアクセシビリティチェックをする際に重要なポイントが全ての人が使えるかどうかです。

例えばスマートフォンを閲覧する時に、画像の内容をテキスト化して伝えられれば画像のサイズに関わらず内容が把握できます。

それでは何を基準にしてWebアクセシビリティをチェックすればいいのでしょうか。

基準になるのは各省庁や企業で採用されている「JIS X 8341-3:2016」です。

この基準に従い実装方法などを理解してWebアクセシビリティに活用してください。

Webアクセシビリティ対策ポイント

Webアクセシビリティ対策としてどのような点に気を付ければいいのでしょうか。

対策ポイントについて解説します。

対応基準を明確に

Webアクセシビリティ対策を施す際に必要なものが対応基準は「JIS X 8341-3:2016」で、3段階の達成レベルがあります。

「JIS X 8341-3:2016」は、JIS（日本工業規格）が制定したもので、高齢者・障害者等配慮設計を定めています。

• A（シングルエー）
• AA（ダブルエー）
• AAA（トリプルエー）

Webコンテンツが満たすべきアクセシビリティの品質基準として3つの達成基準を定めているのです。

企業は目標とするレベルに合わせて施策することが大切です。

画像の代替テキストを入力する

アクセシビリティで重要なのは画像の代替テキストを入れることです。

画像をコードで貼り付ける時にalt属性を使用します。

alt属性とは画像など非テキストコンテンツをテキストコンテンツ同様にテキスト化して情報提供する手法です。

視覚障害がある方は、Webサイトの文字を読み上げる「スクリーンリーダー」と呼ばれるソフトを使います。

スクリーンリーダーがあればWebサイトの内容は把握できるのですが、画像は認識できません。

alt属性を使用して画像の説明文を入れればスクリーンリーダーが読み取って説明してくれるのです。

alt属性を設定するためには適切な代替テキスト情報を付けることがポイントになります。

例えばボタンのような重要な役割を持つパーツを画像で作ります。

この場合、alt属性で「送信する」・「承認する」のような文を付けなければなりません。

このように画像に沿ったキーワードや説明文を入力して分かりやすいサイト作りが欠かせないのです。

SEO強化にも繋がる重要なポイントになります。

Tabキーでの要素の選択を可能にする

次にマウスを使用しなくてもキーボードのtabキーだけで操作や選択ができるように設定することも大切です。

Googleの検索フォームのようにTabキーとenterキーだけで全部の要素が選べます。

また、今選んでいる要素がどれか分かりやすくフチ付きで示してくれます。

手が不自由な方にも優しい配慮になりますが、健常者でもマウスがない場合に活用できるので大変便利だといえるでしょう。

モバイルビューポート設定

ビューポートはブラウザウィンドウのうち、ユーザーインターフェイスやメニューバーを除く文章を指します。

ビューポートが無いサイトの場合、スマートフォンでサイトを表示させるとデスクトップの幅でページを表示します。

ビューポートを設定すればページの幅や拡大縮小が制御できるのです。

一般のモバイル端末の場合、指で拡大縮小する「ピンチアウト」を採用しているため、コードを記述しなければなりません。

最適なビューポートを設定することも忘れないでください。

Webアクセシビリティを意識したデザイン

世界中でさまざまな障害を抱える方がインターネットを利用しています。

どのような人でも快適に利用できるWebアクセシビリティに対応したサイト作りは必要不可欠です。

Webサイトでは目で見て情報を確認するため見やすさが重要になります。

アクセシビリティを考慮したデザインが求められているのです。

ここではWebアクセシビリティを意識したデザインについて解説します。

背景色と文字色

背景色が黒っぽくて文字色も黒っぽい場合、コントラストが小さければ小さいほどWebサイトは見づらくなります。

誰でもサイトを快適に見るためにはコントラストが必要になります。

「JIS X 8341-3:2016」では、Webサイトのコントラスト比は4.5対1以上の差を推奨しているのです。

注意しておく点はこの規定は情報として文字に求められる要件であり、デザイン上のロゴや装飾は対象外です。

また、コントラストを確認するツールとして「カラー・コントラスト・アナライザー」があります。

前景色と背景色を選択するとコントラスト比や文字の大きさによる不都合などが簡単に分かります。

要素の区別を色で行わない

一般に見かける機能に、入力を間違えるとエラーを告げるために枠が赤や黄色で囲まれた経験ないでしょうか。

しかし、この機能では色の区別がつきにくい色弱の方は判断ができないこともあるのです。

そのため文言で分かりやすく「必ずここに〇〇を入力してください」と入れておくことが重要です。

文字サイズを選べるようにする

Webサイトのヘッダー部分には表示される文字サイズを選べる機能が付いているのを見かけたことがあるでしょう。

スマートフォンやタブレットでは画面のピンチアウトができるようになりましたが、PC用のサイトでは必要です。

「JIS X 8341-3:2016」ではテキストのサイズ変更基準をAAに推奨しています。

Webアクセシビリティに注意すべきコンテンツ

Webアクセシビリティ対策で特に注意すべきコンテンツについて解説します。

入力フォーム

Webアクセシビリティで重要なのが入力フォームです。

フォームが分かりやすく操作しやすいことがコンバージョンに繋がるからです。

ストレスなく入力ができること、さらにエラーがあればその箇所や対処方法が分かりやすく表示されることが欠かせません。

アクセシビリティの観点から入力フォームがビジネスを左右するといっても過言ではありません。

設定の基本はユーザー目線であるべきです。

視覚障害の方のための入力欄の説明や選択肢がどこからどこまでか分かりやすいようにコードで示す必要があます。

音声コンテンツや動画コンテンツ

音声や動画では聴覚障害者の方のために字幕を設定します。

HTML5では、WebVTT形式と呼ばれるテキストを作成すれば、trackタグで簡単にテキストを字幕で表示させることができます。

また、テキストで音声や動画情報の内容が分かるものを提供しなければなりません。

視覚障害があって動画が見られない方には、スクリーンリーダーに読み上げさせる動画テキストも必要です。

Webアクセシビリティのチェックツール

Webアクセシビリティのチェックに役立つツールをご紹介しましょう。

miChecker Ver.2.0

「miChecker Ver.2.0」は、Webアクセシビリティを推進する総務省が提供する多機能性のある無償ツールです。

最もポピュラーなツールで「JIS X 8341-3:2016」に準拠したサイトかどうかチェックするのにおすすめです。

miChecker Ver.2.0でできることはこちらになります。

• アクセシビリティの検証
• 音声ユーザビリティの可視化
• ロービジョンのシミュレーション

音声読み上げ機能でコンテンツを正しく読み上げられる設計になっているか視覚的に確認できます。

また、音声読み上げを利用するユーザーがページ内の特定のコンテンツに到着するまでの予測時間も可視化できるのです。

ロービジョンのシミュレーションではWebページが、視力・色覚異常・水晶体透過率によって、どう見えるかシミュレーションします。

コンテンツ内で区別しづらい色、見えにくにい文字などを詳細レポートで指摘してくれる機能があるます。

Color tester

「Color tester」は、コントラストのチェックツールで「JIS X 8341-3:2016」に準拠した2色のコントラスト比を計算し評価するものです。

画像の背景色と前景色を自動的に推測し評価できる機能があり、クリップボードの画像の色を取得して評価もできます。

スクリーンリーダー「NVDA日本語版」

「スクリーンリーダー」は、画面の表示内容とキーボードからの入力内容を読み上げてくれるソフトです。

視覚障害者用のソフトウェアとして日本語版はWindows用に改良されて無料でダウンロードして利用できます。

Colorblind Web Page Filter

「Colorblind Web Page Filter」は、色覚異常の方にとってWebサイトがどう見えているか検証するツールです。

URLを入力して色覚異常のパターンを選択します。

赤を認識する錐体細胞に異常がある第1色覚異常、緑を認識する錐体細胞に異常がある第2色覚異常などを選択します。

そうすれば色覚の人の見え方を再現してくれるのです。

アクセシビリティAPI

APIとは「Application Programming Interface」の略です。

ソフトウェアやWebサービスを繋ぐインターフェースのことをいいます。

アクセシビリティAPIとは、アプリケーションがスクリーンリーダーなどの支援技術向けにコンテンツを表現するためのものです。

APIを利用すれば障害がある人がWebコンテンツを利用する時に直面する課題を解決できます。

ハンディがある人が利用しやすい環境を作ることでこれまで逃してきたビジネスチャンスも期待できます。

Webアクセシビリティ向上のためのポイント

Webアクセシビリティ向上のためにはアクセシビリティの確保をさらに進めることが必要です。

そして、「JIS X 8341-3:2016」を明確にし、コンテンツの制作・開発・運営の質を向上させます。

アクセシビリティが確保できれば顧客満足度やイメージも上がるでしょう。

また、コンプライアンスやCSR（企業の社会的責任）の点からもアクセシビリティ向上は欠かせません。

Webアクセシビリティのチェックで悩んだら

Webアクセシビリティの対策方法やチェック方法を解説してきました。

色のコントラスト比を確認して、文字サイズの拡大機能を付けるなど対応策を施す必要があります。

初めてWebアクセシビリティのチェックを考える時、何から手をつければいいのかわからないのが現実ではないでしょうか。

そうした時はデジマクラスに相談してみましょう。

• 知識的サポートが欲しい
• 検証作業はどうすればいい
• リソースが不足して対応できない
• 実装能力が不足
• 仕組みが分からない

こうした悩みの1つ1つに対して丁寧に解決していきます。

自社の求める要件にあったソリューションを提案し、実装して検証までサポートします。

安心してWebアクセシビリティのチェックをデジマクラスにお任せください。

まとめ

Webアクセシビリティはデジタルマーケティングにおいて、取り組むべき課題です。

全ての情報はあらゆる人に伝えられるべきであり、分かりやすさ使いやすさに配慮していくことは当然です。

Webアクセシビリティにまだ取り組んでいない方は是非この機会にアクセシビリティの重要性を理解しましょう。

人に優しいWebサイト作りを始めてみませんか。