Webアクセシビリティ確保の基本の「キ」

キーワードは「マシンリーダブル」

Webコンテンツのアクセシビリティを確保する基本の「キ」は、「マシンリーダブル」にすることです。Webコンテンツの見た目は、もちろん重要です。しかし、それと同じくらい、マシンリーダブル（”machine readable”）にしておくことが重要なのです。

ここでいう「マシン」とは、ユーザーエージェントのことを指します。

HTML user agent

An HTML user agent is any device that interprets HTML documents. User agents include visual browsers (text-only and graphical), non-visual browsers (audio, Braille), search robots, proxies, etc.
4.1 Definitions | HTML 4.01 Specification

W3CのHTML 4.01の仕様では、「HTMLのユーザーエージェントは、HTMLドキュメントを解釈するあらゆるデバイスを指す。ユーザーエージェントには、ビジュアルブラウザ（テキストブラウザ、グラフィカルブラウザ）、ノンビジュアルブラウザ（音声、点字）、検索ロボット、プロキシなど」と定義しています。

どれもHTMLソースを機械的に解析しているというのが共通点です。そして、それぞれの用途に応じて、次のようにWebコンテンツを異なる形で処理しているのです。

ビジュアルブラウザ：Webコンテンツを画面に表示する
ノンビジュアルブラウザ：Webコンテンツを合成音声や点字に変換する
検索ロボット：Webコンテンツの情報を取得する

検索エンジン最適化（SEO）との共通点

実際にGoogleの『ウェブマスター向けガイドライン（品質に関するガイドライン）』には、次のようにアクセシビリティのガイドラインに共通する項目がいくつかあります。

一般的なガイドライン

サイト上の重要なページへのリンクを含んだサイトマップファイルを用意します。また、そのようなページへのリンクの一覧を人が読める形式で記載したページ（「サイトインデックス」や「サイトマップページ」とも呼ばれます）も用意します。

<title>タグの要素とalt属性の説明をわかりやすく正確なものにします。

重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。テキストコンテンツの代わりに画像を使用する必要がある場合は、alt 属性を使用して簡単な説明テキストを組み込みます。

視覚障害のあるユーザーにも利用しやすいページにします。たとえば、スクリーンリーダーによるユーザビリティをテストします。

ウェブマスター向けガイドライン（品質に関するガイドライン）｜Google Search Console ヘルプ

また、Googleでは初心者向けに『検索エンジン最適化スターターガイド』も提供しており、やはりアクセシビリティのガイドラインとの共通点が見られます。

適切なページタイトルを付けよう

ナビゲーションをわかりやすくしよう

適切なアンカーテキストを書こう

画像の利用を最適化しよう

見出しタグを適切に使おう

検索エンジン最適化スターターガイド｜Google [PDF]

「マシンリーダブル」にしないことによるマイナス

たしかに、『JIS X 8341-3』が初めて公示された2004年頃は、JIS規格に沿ってアクセシビリティを確保したら、検索結果のランキングが上昇したという現象が見られました。検索ロボットもブラウザやスクリーンリーダーなどと同じユーザーエージェントですから、いわば一石二鳥の効果が目に見えて確認できたわけです。

皆さんもご存知のように、今は検索エンジンのアルゴリズムもその当時のように単純ではないので、目に見えるプラスの効果はさほどないかもしれません。それでも、分かりやすいページタイトルやリンクテキストにする、画像には代替テキストを提供する、そして文書構造をマークアップ（タグ付け）するといったことを怠ると、SEOの観点からは実はマイナスになっているといえるでしょう。

もちろん、見た目のビジュアルデザインだけに囚われていて、そういったことを実践していなければ、特定の利用環境だけでしか利用できないWebコンテンツになってしまいます。ユーザーにとっても、Webサイトの運営者にとっても、双方にとってマイナスであることに変わりはありません。

Webアクセシビリティの確保、まずは “できること” から

アクセシビリティの確保は、”All or Nothing” ではありません。100点満点でなければ意味がない、なんていうこともありません。30点よりは40点、40点よりは50点、60点、70点のほうが、より多くのユーザーが利用できるようになります。まずは “できること” から確実に実践していくことが何よりも重要です。

例えば、次に挙げる10項目の中から、すぐにでも実践できそうなことが1つでもあれば、早速やってみましょう。中には、普段からもうやっていることもあるかもしれません。まずは、キホンの「キ」から始めましょう。

ページタイトル：Webページの内容が分かるタイトルにする
文書構造：ページの領域や見出し、リストなどは、見た目だけではなく、適切にマークアップする
リンクテキスト：ユーザーがリンク先に行くかどうかを判断できるような文言にする
画像：代替テキストを提供する
コントラスト：文字色と背景色のコントラスト比を4.5:1以上にする
キーボード操作：全ての機能は、キーボードだけでも同じように操作できるようにする
フォーカスインジケータ：キーボード操作時にフォーカスの現在位置が常に分かるようにする
動画：音声が伝えている情報をキャプション（字幕）にする
フォーム：フォームコントロールとラベルをマークアップによって関連付ける
エラーメッセージ：項目名、エラー内容、修正方法を分かりやすく説明する