はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

誰でも利用できる?Webサイトのバリアフリーはできていますか?【ウェブアクセシビリティ】

こんにちは。遠藤(@webmaster_note)です。

2020年の東京オリンピック、パラリンピックに向けて、歩道や駅、店舗などで「バリアフリー」が進んでいます。

街中でバリアフリーが進むなか、あなたのWebサイトは、高齢者や障害者の人にも優しい「バリアフリー」なWebサイトになっていますか?

MEMO

この記事は2013年12月4日に公開した記事をリライトしたものです

高齢者や障害者にも優しいWebサイトにしよう

webサイトのウェブアクセシビリティ

どうしても自分自身が五体満足だったり、身近にそういった人がいないと抜けてしまうのが「アクセシビリティ」です。

WebサイトなどWebにおけるアクセシビリティを「ウェブアクセシビリティ」といいます。

あなたのWebサイトに訪れるのは、五体満足な人だけではありません。高齢になって、小さい文字が読みづらい人、視覚に障害がある人、聴覚に障害がある人、様々な人が訪れます。

車いす用の移動手段がある、点字の表示がある、など、公共な場では「バリアフリー(アクセシビリティ)」はよく問われます。それと同じように、WEBが生活のインフラとなっている今、WEBサイトの「バリアフリー」である「ウェブアクセシビリティ」を軽視することはできません

アクセシビリティとは?

バリアフリー

一般的に「アクセシビリティ」とは何のことなのでしょうか?

アクセシビリティとは、高齢の方や障害を持つ方などを含む、できるかぎり多くの人々が使えるかどうか、もしくは使いやすいかどうかを意味します。

ユーザビリティとアクセシビリティ : 富士通

W3Cでもウェブアクセシビリティは重要とされている

Web担当者やWebマーケターなら必ず知っている「W3C」もウェブアクセシビリティについて重視をしています。

Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.

直訳:アクセシビリティは、高品質のWebサイトやWebツールを作成し、製品やサービスの使用から人々を排除したくない開発者や組織にとって不可欠です。

Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C

W3Cは「ウェブ・コンテンツ・アクセシビリティ・ガイドライン(WCAG)2.0」というガイドラインも公開をしています。

ウェブアクセシビリティ基盤委員会 (WAIC)」が日本語に翻訳したページも公開されているので、読んだことがない人は、この機会に読まれることをお勧めします。

JIS(日本工業規格)が制定しているアクセシビリティ

また、JIS(日本工業規格)も「JIS X 8341」という標準規格を制定しており、さらにウェブコンテンツのアクセシビリティについて「高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ(JIS X 8341-3)」を制定しています。

Webサイトに来てくれた人が、どんな人であっても、どんな状態であっても、必要な情報を得ることができるようにしておくことは、とても大事なことです。

ウェブアクセシビリティがないと「人によって情報を得られるか得られないか」という情報格差が生まれてしまいます

そんなことが起こらないように、Webサイトに来てくれた全ての人が平等に情報を得られることを目指す必要があります。

ユーザビリティとアクセシビリティの違い

アクセシビリティと聞くと「ユーザビリティとは違うの?」と思う人もいるかもしれません。

ユーザビリティとは「使いやすさ」や「分かりやすさ」です。

それに対してアクセシビリティは、誰にでも「使えるか」です。どれだけユーザビリティが高いとしても、Webサイトを使うことができる人が制限されていたのでは、アクセシビリティが悪いとなります。

視覚障害がある人は、どうやってWebサイトを閲覧している?(動画)

視覚障害のある人が、どのようにWebサイトを閲覧しているのかがわかる動画がいくつかあったので、貼っておきます。



Webサイトが画像ばかりではダメ

htmlを打っている人

フルFlashや画像だけのサイトは、SEO的にダメだとよく言われます。それは当たり前なのですが、SEOうんぬんよりも前にアクセシビリティとしてダメではないでしょうか?

視覚障害の方が、どのようにWEBサイトを見ているかご存知ですか?視覚に障害がある方は、音声ブラウザなどを使い、パソコンから発声される音声を聞きながらパソコン操作を行います。

Webサイトを合成音声で読み上げる、主に視覚障害者の為に開発されたソフトウェア。画像のaltが設定されていれば文章だけでなく、画像の説明も読み上げてくれる。

音声ブラウザ とは – コトバンク

画像にaltタグを入れるのはSEOのためではない!

SEOで画像にaltタグは必ず入れましょう!と言われています。Googleも画像にはaltタグを使うことを推奨しています。

altタグとは「代替えテキスト」です。画像が表示されない場合に代わりに表示する文章です。(画像にテキスト情報を付け加えるものです)

そもそも、なぜaltタグがSEOで必要なのか?を考えたことはありますか?Google検索のボットがテキストを読んでいるからという答えは、半分正解で半分不正解です。Google検索のボットがテキストを読んでいるからという答えは、半分正解で半分不正解です。

先ほど貼り付けた動画を見ればわかりますが、視覚障害がある人は、音読機能を利用してWebサイトを閲覧しています。

そして、音読機能はWebサイトの「テキスト情報」を読んでいます。つまり、テキスト情報を含まない「画像」や「動画」などは読み上げられません。つまり、写真や動画の「内容」がわかりません。だからこそ、画像にaltタグを使って、テキスト情報として「画像の説明」を加える必要があるのです。

誰でも平等に利用できるWebサイト(またはWebページ)と、目が見える人しか利用できないWebサイト(またはWebページ)、どちらがより良いかと考えれば、前者の誰でも平等に利用できるWebサイトの方が良質となるのは、想像しやすいと思います。

なかには「画像のaltタグは入れなくてもいい」や「altタグはテキトウでいい」という人がいますが、その人はSEOに囚われていて、障害者のことをないがしろにしています。

高齢者にも使いやすいWebサイトになっているか?

高齢者の手

高齢化の進む日本、高齢者のスマートフォン普及率は6割を超えています(参考:「2018年10月 シニアのスマートフォン、 生活に対する意識調査」)。

当然、Webサイトを利用する高齢者も増えているでしょう。

それなのに「文字サイズが小さい」「文字のフォントが細くて読みづらい」「操作が複雑」「クリックやタップできる範囲が狭い」など、高齢者にとって、不便なWebサイトになっていませんか?

もちろん、Webサイトのターゲット像に合わせることは大事ですが、最低限の配慮は必要でしょう。

ウェブアクセシビリティで何を気をつけたらいいのか

todoリスト

ウェブアクセシビリティに気をつけろといわれても、なにをどうすればいいのかわからないという方は多いと思います。

いくつか気にすべきところを挙げてみます。

  • 背景色など、色のコントラストをはっきりさせる
  • 文字サイズを大きくする
  • はっきり見える文字フォントを使う
  • 文字化けが起こりにくいフォントを使う
  • 画像にはaltタグで「説明(テキスト情報)」を加える
  • 動画や音声で自動再生をさせない
  • ボタンやリンクは、それがボタンやリンクであることがわかるように明示する

他にも「同音異義語」では、聞いただけでは意味がわからないものがあります(例:いがい→以外、意外など)。聞いただけで意味がわかるように前後の文言を工夫したり、別の言葉を使う。

漢字の開く閉じる(開く=ひらがなで書く)も音読ソフトで正しく読まれないことを防ぐために、ひらがなで書く。など様々な注意点があります。

実装チェックリスト – 情報バリアフリーポータルサイト」でウェブアクセシビリティのチェックリストが公開されています。あなたの会社のWebサイトがどれぐらいウェブアクセシビリティに対応できているかチェックしてみてください。

また「JIS X 8341-3:2016」において「ウェブアクセシビリティの方針を策定し、ウェブサイト上で公開する」ことを推奨しています。

内閣府や総務省などはウェブサイトで「ウェブアクセシビリティ方針」を公開しています。参考にしてみてください。

できる範囲で「ウェブアクセシビリティ」に取り組んでいこう

アクセシビリティもユーザビリティも完璧にやるのは難しいでしょう。どれだけやっても全ての人に同じ体験を提供することはできないかもしれません。

ですが、完璧にできないからやらなくていいという話ではありません。CSR(企業の社会的責任)としても、できるだけ最善を尽くして対応していくように心がけましょう。