はじめに
こんにちは。SPC 営業担当です。
今回は「Webアクセシビリティ」についてお話させていただきます。
みなさんは「Webアクセシビリティ」もしくは「アクセシビリティ」という言葉を
聞いたことがありますか？
日常の生活ではなかなか聞かない言葉ですよね。
「Webアクセシビリティ」の意味～対応策までご案内させていただきます。
▼「Webアクセシビリティ」とは？
まず「アクセシビリティ」の意味から説明させていただきます。
「アクセシビリティ」とは近づきやすさやアクセスのしやすさのことで、
「利用しやすさ」、「交通の便」などを意味します。
⇒一言で言うと「利用しやすさ」がピッタリくるかと思います。
では本題の「Webアクセシビリティ」とはどういった意味なのでしょうか？
「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、
ウェブサイトで提供されている情報にアクセスし利用できること」を意味します。
⇒一言で言うと「誰が見ても見やすい情報サイト」を意味します。
▼どんな方が必要としているのか？
様々な情報サイトや自社ホームページを閲覧している中で、
「見にくい」や「わかりずらい」等、感じたことはありませんか？
Webページは利用制限なく、様々なユーザーが閲覧するものです。
見づらいホームページは、情報共有レベルを落としてしまいます。
それでは、どんな人がこの「Webアクセシビリティ」を必要としているのでしょうか？
・目が不自由な人
・耳が不自由な人
・手が不自由な人
・母国語が異なる人
・ネット閲覧には向いていないデバイスで利用している人
・ネット閲覧には向いていない環境で利用している人
・パソコンやスマートフォンの操作に慣れていない人
・難しい漢字が読めない、難しい文章が理解しにくい人
⇒上記ユーザーを含め、様々なユーザーが見ても見やすいサイトを目指すのが、
Webアクセシビリティなのです。
▼なぜ必要なのか？
全てのユーザーに質の高い情報提供をする為の土台となるWebアクセシビリティ、
その重要性を理解いただけましたでしょうか。
下記にWebアクセシビリティが必要な理由を具体的に記載させていただきます。
〇誰もが情報を見られるようにする為
・今までのご説明通り、老若男女、不自由な人も含めて、全てのユーザーが情報閲覧可能に。
〇情報共有できる人を増やす為
・単純にWebへのアクセスという意味だけではなく、Webサイト上のコンテンツ情報を支障なく見ることができる、
サービスを利用することができるなどの「提供されたものを利用することができる」ようになると、
情報共有が活発になります。
〇閲覧するデバイスが幅広くなった為
・パソコンやスマートフォンに限らず、様々なデバイスでネット閲覧がされるようになった為、
Webアクセシビリティの重要性が注目されております。
〇SEO対策の為
・SEO対策がなされているかどうか、それを判断するのは検索エンジンのロボット（クローラー）です。
クローラーは人間のように視覚的表現を認識することができない全盲のユーザーと同じであると言われています。
その為、視覚に障害を持ったユーザーがアクセスしやすい対策を行うと、必然的にクローラーもアクセスや
情報を入手しやすくなる為、SEOへの効果をもたらすこととなります。
〇規格への対応の為
・なかにはJIS規格対応が必須のサイトも存在します。
▼具体的な対応策
■ページタイトル
ページタイトルは、音声読み上げソフトを利用しているユーザーにとって、自分が探している情報が
同ページにあるかどうかの最初の手掛かりとなります。
ページの内容がわかるタイトルを付けて「ページタイトル＋サイト名」の形で記載します。
■見出し
各セクションの主題がわかるような見出しを設定します。
見た目ではなく、文書構造で判断して見出しタグを付けることが重要となります。
■リンクテキスト
リンクテキストだけでリンク先がわかるようにします。読み上げ機能で、リンクテキスト部分だけを読み上げることができる為、
「こちら」という部分だけをリンクテキストにするのはNGとなります。
リンクテキストのタイトルとリンク先ページのタイトルが違うと、違うページに間違えてアクセスしたと勘違いしてしまう為、
同様のタイトルにする必要があります。
■リスト
リストはリストタグでマークアップします。
■代替えテキスト
音声読み上げソフトを使用している場合、画像の替わりにalt属性の記載を読み上げます。
alt属性を設定していないと、目の不自由な人が情報を知りたい場合に、音声化・点字化することができず、
情報取得ができません。 さらに、alt属性を正しく設定することで、テキスト情報として抽出できるようになる為、
テキスト検索や音声化によるコンテンツの再利用も可能となります。
■文字画像
画像内容をそのまま書き起こしたものを、alt属性の値に記載します。
※重要な情報が含まれるものはできる限り画像にせず、テキストのまま表示が有効。
■装飾画像
装飾の為だけに使用している意味を持たない画像は、alt属性は「なし」にします。
■写真画像
写真画像の場合は「〇〇〇写真」等、その画像が写真であることがわかるようにalt属性を設定します。
また、「〇〇〇風景」「〇〇〇様子」など見えなくても情景が伝わるよう記述することが大切です。
■グラフ画像
グラフ画像については、グラフの情報をalt属性に記載します。
■キーボード操作
音声読み上げソフトのユーザーは、キーボードのタブキーやエンターキー、矢印キーなどを使って、
リンクの選択やページ内の移動を行います。フォーカスの移動順序などにも配慮して、
マウスだけでなくキーボードだけで操作できるようにします。
■色のコントラスト
情報を伝えている文字と背景色のコントラストの基準は4.5：1となります。
モバイルではより高いコントラストを意識する必要あり。
■色の違い
グラフには要素毎に異なった斜線を入れるなど、色の区別がつかなくても情報を理解できるようにする必要あり。
▼JIS規格について
「JIS X 8341-3:2016」の正式名称は、「高齢者・障害者等配慮設計指針－情報通信における機器、
ソフトウェア及びサービス－第3部：ウェブコンテンツ」と言います。
この規格でいう「ウェブコンテンツ」は、ブラウザや支援技術などのユーザエージェントを介して
利用者に提供されるあらゆるコンテンツを指し、次のようなものが挙げられます。
□ウェブサイト
□ウェブアプリケーション
□ウェブシステム
□携帯端末などを用いて利用されるコンテンツ
□イントラネットの業務用システム
□電子マニュアル
□CD-ROM などの記録媒体を介して配布される電子文書
「JIS X 8341-3:2016」は、高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、
支援技術などに関係なく、ウェブコンテンツを利用することができるようにすることを目的としています。
その為にウェブコンテンツが満たすべきアクセシビリティの品質基準として、
レベルA、レベルAA、レベルAAAという3つのレベルの達成基準が定められています。
▼まとめ
WebアクセシビリティのJIS規格、全てを準拠する義務はありません。
ただ今後、「より良いサイト制作」を目指して、少しでもWebアクセシビリティを
意識していただければと思いご案内させていただきました。
今回はこの辺で。
ありがとうございました。
