第3回 パソコン・スマートフォン・タブレット・マイクなどを使いながら、家族やキャラクターたちが一緒にウェブを楽しんでいるイラスト

基礎からわかる解説シリーズ

前回はウェブアクセシビリティがなぜ必要なのか、そしてそれが社会全体にどんな意味を持つのかを見てきました。
今回はもう一歩進んで、アクセシビリティが整ったウェブサイトが、私たちの生活をどう便利にしてくれるのかを一緒に見ていきましょう。
第2回で少し触れた4つの原則も、ここでもう少し詳しく紹介します。

便利さを支える考え方 ― WCAGの4原則とは

スピリッツ君とアクセスくんの会話(第1章)

アクセス君
第2回で聞いた4つの原則って、もう少し具体的に知りたいです。
スピリッツ君
いいね。アクセシビリティを支える基本の考え方で、 見える・使える・わかる・壊れにくいと覚えるといいよ。

ウェブアクセシビリティを国際的に支えているのがWCAG(Web Content Accessibility Guidelines)というガイドラインです。
ここでは、アクセシブルなウェブを実現するための4つの基本原則が定められています。
WCAGは、世界中の公共機関や企業のウェブサイトの基準としても採用されており、アクセシビリティの国際的なルールともいえる存在です。

知覚可能(Perceivable)

情報を見たり聞いたりして得られることです。
画像には代替テキスト(alt)を、動画には字幕や文字起こしを、文字と背景には十分なコントラストをつけます。
これにより、目が見えにくい人や音を出せない環境でも、情報がきちんと伝わります
つまり、見えない・聞こえないを減らし、どんな環境でも情報が届くようにすることです。

操作可能(Operable)

誰でもどんな操作方法でも使えることです。
マウスが使えなくてもキーボードで移動できたり、ボタンやリンクが小さすぎないように設計します。
さらに、今どこを操作しているのか(フォーカス)が見えると、手が不自由な人や高齢の方も迷わず安心して使えます。
つまり、誰もがどんな操作方法でも迷わず使えるようにすることです。

理解可能(Understandable)

ページの構成や文章がわかりやすいことです。
見出しやラベルを正しく使い、入力ミスをしたときは具体的にエラー内容を伝えます。
これによって、初めての人でも迷わず入力・操作できるサイトになります。
つまり、読む・入力する・進むがわかりやすく整理されたサイトにすることです。

堅牢(Robust)

さまざまな環境で正しく動作することです。
HTMLの構造を正しく保つことで、スクリーンリーダーや検索エンジンのクローラー(ウェブサイトを巡回して情報を集めるプログラム)など多様な読み取りソフトやデバイスでも内容が正しく伝わります。
つまり、人にもプログラムにも内容が伝わる設計にすることです。

これらの4原則がしっかりしていると、知覚しやすく・操作しやすく・理解しやすく・壊れにくいウェブが生まれます。
そして、このようにアクセシビリティが確保されたウェブサイトは、私たちの生活の中で便利さや使いやすさとして実感できるようになります。
次の章では、4原則がきちんと守られたウェブサイトが、実際にどんなふうに便利になるのかを、具体的な場面や工夫の例を通して見ていきましょう。

みんなにとって使いやすいとは

スピリッツ君とアクセスくんの会話(第2章)

アクセス君
4原則が実際の使いやすさにも関係してくるんですか?
スピリッツ君
4原則が守られていると、見やすさや操作のしやすさなど、日常で便利だなと感じる部分につながるんだ。

アクセシビリティの整ったサイトは、使いやすさに一貫性があります。
メニューの位置やページ構成がページによって変わってしまうと、誰でも戸惑ってしまいます。
しかし、ボタンや見出しの並びがそろっていてリンクの文言が明確だと、自然に行動できるようになります。

また、文章の構造が整理されていると、情報を読むだけでなく、見て理解することもスムーズになります。
ニュース記事や案内ページを読むときに章立てが明確だと内容をすぐにつかめるように、ウェブの構造にも見出しで考えを整理する力があるのです。

こうした工夫を積み重ねることで、誰にとっても使いやすいウェブになります。
たとえば、次のような点がその具体例です。

  • リンクテキストを「こちら」ではなく「お問い合わせフォームへ」と書くことで、画面を見ている人にも、読み上げソフトを使っている人にも意図が明確に伝わります。
  • 屋外の明るい場所でも、文字コントラストが高いサイトは読みやすいです。
  • 入力フォームで「エラーがあります」ではなく、「メールアドレスの形式が正しくありません」と具体的に示されると、修正箇所がすぐにわかり、スムーズに操作を続けられます。
  • 文章構造が整っていれば、自動翻訳の精度も上がり、外国語で読む人にも理解しやすくなります。

つまり、見やすい・探しやすい・伝わりやすい―これが、みんなにとっての使いやすさです。

好きなデバイス・好きな操作で使える

スピリッツ君とアクセスくんの会話(第3章)

アクセス君
スマホやテレビでも、同じように使えるんですか?
スピリッツ君
そうだね。アクセシビリティが整っているサイトは、どんな操作方法にも対応しやすいんだよ。

私たちはいま、パソコン・スマートフォン・タブレットだけでなく、スマートスピーカーやテレビ、腕時計型のデバイスなど、さまざまな方法でウェブを使っています。
アクセシブルなウェブは、デバイスや操作方法の違いに左右されにくい設計になっています。

たとえば、次のような場面で便利さを感じられます。

  • 文字サイズを変えたり、スマホの縦横の向きを変えたりしても、画面が崩れにくく表示されます。
  • 電車の中で音を出せないときでも、字幕がある動画なら周りを気にせず安心して視聴できます。
  • けがで片手が使えないときも、キーボード操作や音声入力に対応していればスムーズに操作できます。
  • スマートスピーカーに「ニュースを読んで」と話しかけて情報を得ることもできます。

このように、アクセシビリティの整ったウェブは、どこでも・誰でも・同じように使える便利さを生み出します。

人にもプログラムにも伝わる

スピリッツ君とアクセスくんの会話(第4章)

アクセス君
人だけじゃなくて検索エンジンにも関係あるんですか?
スピリッツ君
もちろん。わかりやすい構造は人も機械も情報が見つけやすくなるんだ。

ウェブサイトの情報は、人間の目だけではなく、検索エンジンやSNSのシステムにも読まれています。
アクセシビリティを意識して正しいHTML構造で作ると、検索エンジンのクローラー(情報を集めるプログラム)がページ内容を理解しやすくなります。

たとえば、こんな工夫が役立ちます。

  • 画像に「alt属性(代替テキスト)」を設定すれば、視覚障害のある人がスクリーンリーダーで内容を把握でき、検索エンジンもその画像の意味を正しく認識します。
  • 動画に字幕をつけたり、見出し構造を整理したりすると、SNSのシェアプレビューや検索結果にも正確な情報が表示されやすくなります。
  • 文章の構造が整っていれば、外国語でサイトを読むときも翻訳がより正確に伝わります。

つまり、人が理解できる形で書かれたウェブは、プログラムにも理解できる形になっています。
その結果、より多くの人に、正確な情報を届けることができるのです。

けがをした人が片手でパソコンを操作し、高齢の人が電車の中でタブレットを使っている様子のイラスト

今回のまとめ

ウェブアクセシビリティが整ったサイトは、

  • 情報が整理されていて、探しやすく・読みやすく・わかりやすい
  • デバイスや操作方法を選ばず、誰でも同じように使える
  • 人にも検索エンジンにも、正確に内容が伝わる

そんな便利さを実現しています。

その便利さを支える土台が、知覚可能・操作可能・理解可能・堅牢という4つの原則なのです。
次回(第4回)は実際の制作・運営で活かすために、実践に役立つ意識すべき基本項目を紹介します。

出典:政府広報オンライン「誰もが利用しやすいウェブサイトに(ウェブアクセシビリティ)」
https://www.gov-online.go.jp/useful/article/202310/2.html(外部リンク)

全5回でわかるウェブアクセシビリティ連載