第9回 ナビゲーションスキップのより有効な活用法 | デザインってオモシロイ -MdN Design Interactive-

第9回 ナビゲーションスキップのより有効な活用法

2024.5.22 WED

【サイトリニューアル!】新サイトはこちらMdNについて

第9回 ナビゲーションスキップのより有効な活用法


前回は、従来アクセシビリティに配慮したものとして語られることの多かったナビゲーションスキップをはじめとする音声読み上げ環境専用の情報が、スクリーン・リーダーや音声ブラウザの利用者にとって本当に有効なのかについて考えました。さて今回は、ナビゲーションスキップを誰にとっても便利な機能として実装する方法を考えていきます。

(解説:辻 勝利)

著者近影
[プロフィール]
つじ・かつとし●株式会社ミツエーリンクス アクセシビリティ・エンジニア。先天性の全盲で、インターネットをライフラインとして日常的に使用する。2001年よりWebアクセシビリティに関わる仕事に従事し、数多くの企業や自治体のWebサイトの音声読み上げ環境での検証を行う。現在は、アクセシビリティBlogでの情報発信や講演を通して、Webアクセシビリティの更なる普及・啓蒙活動を行っている。


なぜ「読み上げ専用」でなければならないのか?


ナビゲーションスキップを含む音声読み上げのための情報が、現状では画面には表示されない“音声読み上げ環境専用”として提供されているのは、前回述べた通りです。なかには、「すぐに本文を読む」のように、音声読み上げ環境の利用者を意識した文言をナビゲーションスキップに設定しているケースも少なくありません。

では、どうしてナビゲーションスキップは“音声読み上げ環境専用”の機能として実装されているのでしょうか? そもそもこのような機能は、音声読み上げ環境の利用者にとってだけ有効な機能なのでしょうか?

本連載の第2回で解説しましたが、Webサイトの閲覧環境は多様化しています。なかでも、携帯電話などの小さな画面で情報を閲覧する利用者が、以前に比べて増加しています。また、何らかの理由によりマウスを利用できず(あるいは利用せず)、キーボードだけを操作してWebサイトにアクセスしている利用者も少なくありません。

たとえば、肢体不自由のコンピュータ利用者にとって、マウスは操作が難しい機器のひとつです。そうした利用者にとって、縦長のページの中から自分が探している情報を探し出すのは大変な作業です。このような利用シーンでは、「本文」や「新着情報」などに移動するためのナビゲーションスキップは有効に働きます。

Webページを携帯電話を用いて表示させた様子
本文を読むためには何度も画面をスクロールさせなければならない
同じページにナビゲーションスキップを設定したものを、携帯電話で表示させた様子
緑の線で囲まれた部分がナビゲーションスキップ。「本文へ」というページ内リンクを開くことで本文にアクセスできる

一部の人への配慮ではなく、より多くの人に有用なものを


従来は音声読み上げ環境の利用者専用として、通常の画面には表示させずに用いられてきたナビゲーションスキップですが、画面に表示させることで携帯電話などの小さな画面でページを閲覧している利用者、キーボードだけを利用してWebサイトにアクセスしている利用者にとっても便利な機能となります。

さらに、「本文へ」や「新着情報」などのページ内リンクにアクセスキーを設定すれば、たとえば電話機の1を押すと本文に移動し、2を押すと新着情報に移動するといったような使い方もできるようになります。

また、画面に表示されていないとサイトの担当者が変わってしまった場合など、更新が忘れられてしまう可能性がある一方、画面に表示させることで制作者自身が正しく機能しているかを確認しやすい状況も生まれます。「ナビゲーションスキップは設定されているけど機能しない」といった、従来発生していた問題の解決にもつながるでしょう。

このように、特定の利用者をターゲットとしたアクセシビリティ配慮を行うのでなく、ひとりでも多くの利用者にとって有効な機能を実装することが、望ましいWebの形といえます。

次回は、Webアクセシビリティの基本ともいえるライティング全般の問題についてお伝えします。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在