Blogブログ

ブログ
一覧へ戻る

必ずカバーしておきたいWebアクセシビリティ対応のポイント

現代のWebサイト構築やWebマーケティングにおいて「Webアクセシビリティ」は非常に重要な対応です。ただし、Webアクセシビリティを「障がいを持つ方や高齢の方でも使いやすいWebサイトをつくること」と理解してしまうと本質を外してしまうため、正しい対応ができなくなってしまいます。Webアクセシビリティは正確には「障がいを持つ方や高齢など、運動機能や視覚・聴覚等に何らかの支障がある方を含め、“すべての人”がWebサイト上で提供されている情報にアクセスと利用ができること」という意味なのです。

では、すべての人が情報にアクセスできるWebサイトとは、どのようなものなのでしょうか。そして、そんなWebサイトをつくりには何が必要になるのでしょうか。詳しく解説していきます。

なぜWebアクセシビリティ対応が必要なのか

冒頭で触れたように、Webアクセシビリティは障がいの有無や身体能力の差に関わらず「すべての人がWebコンテンツにアクセス・利用できる」ようにするための対応のことです。スマートフォンの普及によるインターネット利用率の増加に従い、高齢者や、運動機能や視覚、聴覚の機能に障がいを抱える人も気軽にインターネットを使えるようになっていること、さらに障がいを理由とする差別の解消推進を目的とした「障害者差別解消法」が2016年に施行された影響などから注目を浴びるようになりました。

Webアクセシビリティに似た言葉に「Webユーザビリティ」があります。Webユーザビリティは「(主にサイトのターゲットなどの)特定ユーザーにとって使いやすいこと」を意味します。例えばボタンのデザインや文言、サイト上のラベリング、入力フォームや問い合わせフォームの入力しやすさといった項目が挙げられます。これらを使いやすくするためにはしっかりとした顧客分析や戦略立案が必要であり、マーケティング的な要素が強いものと言えるでしょう。

このWebユーザビリティも非常に重要なのですが、その土台となるものが“すべての人”を対象にしているWebアクセシビリティです。そのため、アクセシビリティに対処した上でユーザビリティについて考えていかないと、そもそもの施策に影響を及ぼしてしまう恐れがあることは認識しておいたほうがいいでしょう。

アクセシビリティガイドラインと対応すべきポイント

では、どのような対応を行えば「Webアクセシビリティに配慮したWebサイト」と評されるようになるのでしょうか。そのためのガイドラインが存在します。Web技術の標準化を行う非営利団体である「W3C(World Wide Web Consortium)」が定める「WCAG2.0」や、日本国内の標準団体である「日本工業規格(JIS規格)」が定める「JIS X 8341-3」といったものです。いずれも国際標準化機構(ISO)に承認されていて、内容としては同じものとなります。ここでは、以下のように全部で61の基準が3つのレベルに分かれて掲載されています。

  • レベルA(25の達成基準)

 →アクセシビリティ確保に最低限必要な対応

  • レベルAA(13の達成基準)

 →諸外国で公的機関に要求される対応

 →日本では公的機関に推奨される対応

  • レベルAAA(23の達成基準)

 →特定のコンテンツにのみ適用される事項を含む対応

最も難易度が高いのは「レベルAAA」ですが、必ずしもこのレベルに到達すればいいわけではなく、むしろレベルAAAを目標とすることは推奨されていません。自分たちの組織の状況に合わせて適切なレベルで対応できればいいのです。

より正確な対応をするためには、日本におけるウェブアクセシビリティの理解・普及促進を行うウェブアクセシビリティ基盤委員会(WAIC)のサイト(https://waic.jp/)に掲載されている「JIS X 8341-3関連文書」を確認していく必要がありますが、ここでは最低限知っておきたい11項目を紹介していきます。

Webアクセシビリティ確保のために最低限知っておきたい11項目

(1)titleタグはページ内容がわかるような記述をする

ページ内容を表す「title」タグに、そのページがどのような情報を掲載しているかがわかる文言を入れるようにする。

(2)見出しやリストは見た目だけでなく適切な文書構造でマークアップする

ページ内に見出しやリストを入れる際は、表面的な見た目を揃えるだけでなく、h要素やli要素など適切なタグを用いて文書構造をマークアップする。

(3)遷移先が分かるリンクテキストにする

リンクをクリックしたとき、遷移先がどのようなページなのかわかりやすいリンクテキストを用いるようにする。

(4)画像の代替テキストを追加する

画像が表示されないときや、音声読み上げブラウザ使用時のために、画像には代替テキストを追加する。

(5)色の違いが分からなくても情報を理解できるようにする

色の違いを認識できない人のために、背景色とテキスト等の色のコントラスト比を分けるようにし、色の違いに関わらず情報を伝えられるようにする。

(6)キーボードだけでクリックやページ遷移などの操作をできるようにする

マウスやタッチパネルを使わなくても、キーボードだけで操作し、各コンテンツにアクセスできるようにする。

(7)フォーム・コントロールのラベルをマークアップする

問い合わせや資料請求等のフォームでは、入力方法や入力例を例示するだけではなく、適切なマークアップ技術を用いて記載することで、音声読み上げブラウザへの対応や、操作性を向上させる。

(8)コンテンツを拡大表示できるようにする

視覚に障がいがあるユーザーや弱視のユーザー、高齢で眼が見えづらいユーザーなどにしっかりと情報を伝えられるように、ページ上のテキストを拡大表示できるようにする。またその際にコンテンツの閲覧性や操作性に支障をきたさないように気をつける。

(9)フォームのエラーメッセージではエラー箇所とその修正方法を説明する

入力フォームで入力ミスがあったとき、どこにエラーがあったのか、どのように修正すればよいのかなどを明示することでユーザーを悩ませないようにする。

(10)動画にはキャプションを掲載する

動画コンテンツを掲載する際、キャプション(字幕)を掲載することで、音声を聞けない状態・状況でもコンテンツの内容を理解できるようにする。

(11)各種ツールやチェッカーを使ってアクセシビリティ対応度が確認できる

総務省が開発した「miChecker」、画像の代替テキストの確認ができる「Alt&Meta viewer」、サイト上で使用している色のコントラストをチェックできる「ColorTester」、「Google Chromeのテキスト読み上げ」や「NVDA日本語版」のような音声読み上げツールなどを活用して、自社サイトのアクセシビリティ対応度を調べることができます。

まとめ

上記の基本的な項目を知っておくだけでも、ウェブアクセシビリティについて制作会社と会話をしやすくなります。

また、こうした対応を行うだけでもより多くのユーザーの利便性を向上させるだけでなく、SEOの観点からみてプラスになるものもあり、対応して損はないと言えます。

アリウープでは、日常的にアクセシビリティに配慮したWebサイトの構築を行っていますので、お困りのことがあればご相談ください。

無料相談はこちらから!