ウェブアクセシビリティ・レポート
文＝KeiYu HelpLab石田優子
ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第2回
ウェブアクセシビリティをビジネスに生かす
アクセシビリティという言葉は知られるようになってきたが、では、サイトを制作する際にどのような点に注意すればよいのか、アクセシビリティのチェックはどのようにすればよいのか、今号では少し具体的に解説する。
アクセシビリティチェックについて
おもなチェックツールと利用方法
アクセシビリティに配慮するうえで重要なのは、実際にそのサイトを使っているユーザーたち、つまり当事者の声をヒアリングすることだ。その中から問題解決のポイントが絞られてくる場合が多い。
しかし、それが難しいときなどは、各種のアクセシビリティチェックツールを使うのも補助的手段としては有効だろう。代表的なツールとしては、富士通のWebInspector【1】がある。WebInspectorは無償で富士通アクセシビリティ・アシスタンスのページ(design.fujitsu.com/jp/universal/assistance/webinspector/)からダウンロードできる。
【1】WebInspectorの設定画面
WebInspectorでは、ローカルのファイル/フォルダ、またはURLを指定すると「JIS X 8341-3 高齢者・障害者等配慮設計指針」もしくは富士通独自のアクセシビリティ指針に基づいてチェックし、問題点とそのソースコードを挙げて指摘してくれる【2】。
【2】WebInspectorのチェック結果の画面
また、Dreamweaver MX以降にはアクセシビリティチェック機能が内蔵されており、現在のドキュメントは[ファイル]→[ページのチェック]→[アクセシビリティのチェック]で、サイト全体は[サイト]→[レポート]で表示される[レポート]ダイアログで[アクセシビリティJIS X 8341-3]や[アクセシビリティ 508/WCAG]にチェックを付けると、チェック結果と問題個所が表示される【3】(MX、MX 2004の場合はJIS準拠チェックには拡張機能のインストールが必要だが、Dreamweaver 8ではJIS準拠チェックも標準搭載)。
【3】Dreamweaver 8で制作中のページのアクセシビリティチェックをした画面
チェックツールの限界
このようなチェックツールを使ってもすべて機械的にチェックすることはできない。
たとえばチェックツールでは画像にalt属性で代替テキスト(画像オフの場合に表示されたり音声読み上げソフトなどで読み上げられるテキスト)を付けているかどうかはチェックできるが、そのテキストの内容が適切かどうかまではチェックできない。「アクセシビリティレポート」という見出しを画像化して「見出し」とだけ代替テキストを付けていてもチェックツールではOKになってしまう。
しかし「見出し」だけでは画像を閲覧できない人には意味が通じない。またJavaScriptが使えない環境のユーザーのためには、noscript要素でJavaScriptを使えない場合の代替手段を提供するのだが、noscript要素の有無はチェックできても、のように、JavaScriptをオンにしなければ結局は使えないという例でもチェックは通ってしまう。このため、内容が妥当かどうかは最終的には人の判断となる。
事例 野村證券サイトに見るアクセシビリティ配慮のポイント
野村證券サイト【4】は、JIS X 8341-3だけでなく、W3CのWCAG(ウェブコンテンツアクセシビリティガイドライン)、米国のリハビリテーション法第508条などのアクセシビリティ指針もふまえた独自のガイドラインに基づき、6月にアクセシビリティに配慮したリニューアルを行った。ここでは野村證券サイトを例に、アクセシビリティのおもな配慮点について説明する。
【4】野村證券サイトのトップページ
画像まわり
画像には、先にも述べたように代替テキストを付けるのが基本だ。野村證券サイトでは、メニューなどの画像文字に対して、その画像文字と同様の代替テキストをひとつずつ付け、画像を閲覧できない状態でも無理なく操作できるようにしている【5】。
【5】野村證券サイトを画像オフにした場合。各画像に対して代替テキストが付けられている
また、 ▼のような修飾画像にはalt=""と空の指定がされている。この空の指定をしないと、音声読み上げソフトでは画像ファイル名が読み上げられてしまい、ユーザーが混乱する。また、わざわざ修飾画像に「三角」のような代替テキストを入れている場合もあるが、これも読み上げ時にじゃまになるだけなので、alt=””で空に指定するのがよいだろう。
テキストまわり
文字サイズをポイント指定などで固定せず可変指定にしてブラウザの文字拡大・縮小機能などで変更できるようにする。これは小さな文字が読みづらい高齢者や、特別な文字拡大ソフトを使わないでも読むことができる弱視の人などにとっては重要なことだ。
野村證券サイトでは、ブラウザでの文字拡大・縮小の操作方法を知らない初心者にでもわかりやすいように、さらに、画面右上に「文字サイズ ↑大きく ↓小さく」のボタンを用意している。
また、ページトップの「野村證券」を、HTMLのh1要素、ページ中央の重要な見出しである「＜野村＞と、はじめる」「商品を調べる」などをh2要素でマークアップしている。これは文書構造を明確にするだけでなく、見出し読みモードを備えた音声読み上げソフトで見出しのみをすばやく探すことができるので便利だ【6】。
【6】ホームページ・リーダーの見出し読みモードにすると、見出し部分だけを飛ばし読みできる
音声読み上げソフトを使う視覚障害ユーザーにとっては、画面をパッと一覧してその中から情報を探すことができず、上から順に読み上げていくことになるので、見出しのみ、リンクのみの読み上げといった機能をベテランユーザーはフルに使っている。このため、できるだけ早く目的の情報に耳からたどり着けるような配慮が必要だ。
ナビゲーション・スキップ
多くのサイトでは、各ページ上部あるいは、左右などにナビゲーションメニューを配置している。音声読み上げソフトユーザーにとっては、各ページで同じナビゲーションメニューが繰り返し読み上げられるのは非常に冗長だ。このため、ナビゲーションメニューの前に、メニューを飛ばして本文に直接ジャンプできる機能が求められる。野村證券サイトでは、1ピクセルの隠し画像に「このページの本文へジャンプ」というリンクを付け、さらにリンク先には「ここからこのページの本文」という同様の隠し画像を付けて、音声読み上げソフトユーザーがそのリンク個所を押せば、本文にジャンプできるようにしている。
画像の代替テキスト、文字可変、見出しタグでの見出しのマークアップ、ナビゲーション・スキップはアクセシビリティへの配慮の大きなポイントで、他のアクセシビリティに配慮したサイトでも、これらの点を押さえたサイトが多い。参考にしてほしい。
本記事は『Web STRATEGY』2005年 冬号 vol.2からの転載です
文＝KeiYu HelpLab石田優子ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第2回
ウェブアクセシビリティをビジネスに生かす
アクセシビリティという言葉は知られるようになってきたが、では、サイトを制作する際にどのような点に注意すればよいのか、アクセシビリティのチェックはどのようにすればよいのか、今号では少し具体的に解説する。
アクセシビリティチェックについて
おもなチェックツールと利用方法
アクセシビリティに配慮するうえで重要なのは、実際にそのサイトを使っているユーザーたち、つまり当事者の声をヒアリングすることだ。その中から問題解決のポイントが絞られてくる場合が多い。
しかし、それが難しいときなどは、各種のアクセシビリティチェックツールを使うのも補助的手段としては有効だろう。代表的なツールとしては、富士通のWebInspector【1】がある。WebInspectorは無償で富士通アクセシビリティ・アシスタンスのページ(design.fujitsu.com/jp/universal/assistance/webinspector/)からダウンロードできる。
【1】WebInspectorの設定画面
WebInspectorでは、ローカルのファイル/フォルダ、またはURLを指定すると「JIS X 8341-3 高齢者・障害者等配慮設計指針」もしくは富士通独自のアクセシビリティ指針に基づいてチェックし、問題点とそのソースコードを挙げて指摘してくれる【2】。
【2】WebInspectorのチェック結果の画面
また、Dreamweaver MX以降にはアクセシビリティチェック機能が内蔵されており、現在のドキュメントは[ファイル]→[ページのチェック]→[アクセシビリティのチェック]で、サイト全体は[サイト]→[レポート]で表示される[レポート]ダイアログで[アクセシビリティJIS X 8341-3]や[アクセシビリティ 508/WCAG]にチェックを付けると、チェック結果と問題個所が表示される【3】(MX、MX 2004の場合はJIS準拠チェックには拡張機能のインストールが必要だが、Dreamweaver 8ではJIS準拠チェックも標準搭載)。
【3】Dreamweaver 8で制作中のページのアクセシビリティチェックをした画面
チェックツールの限界
このようなチェックツールを使ってもすべて機械的にチェックすることはできない。
たとえばチェックツールでは画像にalt属性で代替テキスト(画像オフの場合に表示されたり音声読み上げソフトなどで読み上げられるテキスト)を付けているかどうかはチェックできるが、そのテキストの内容が適切かどうかまではチェックできない。「アクセシビリティレポート」という見出しを画像化して「見出し」とだけ代替テキストを付けていてもチェックツールではOKになってしまう。
しかし「見出し」だけでは画像を閲覧できない人には意味が通じない。またJavaScriptが使えない環境のユーザーのためには、noscript要素でJavaScriptを使えない場合の代替手段を提供するのだが、noscript要素の有無はチェックできても、のように、JavaScriptをオンにしなければ結局は使えないという例でもチェックは通ってしまう。このため、内容が妥当かどうかは最終的には人の判断となる。
事例 野村證券サイトに見るアクセシビリティ配慮のポイント
野村證券サイト【4】は、JIS X 8341-3だけでなく、W3CのWCAG(ウェブコンテンツアクセシビリティガイドライン)、米国のリハビリテーション法第508条などのアクセシビリティ指針もふまえた独自のガイドラインに基づき、6月にアクセシビリティに配慮したリニューアルを行った。ここでは野村證券サイトを例に、アクセシビリティのおもな配慮点について説明する。
【4】野村證券サイトのトップページ
画像まわり
画像には、先にも述べたように代替テキストを付けるのが基本だ。野村證券サイトでは、メニューなどの画像文字に対して、その画像文字と同様の代替テキストをひとつずつ付け、画像を閲覧できない状態でも無理なく操作できるようにしている【5】。
【5】野村證券サイトを画像オフにした場合。各画像に対して代替テキストが付けられている
また、 ▼のような修飾画像にはalt=""と空の指定がされている。この空の指定をしないと、音声読み上げソフトでは画像ファイル名が読み上げられてしまい、ユーザーが混乱する。また、わざわざ修飾画像に「三角」のような代替テキストを入れている場合もあるが、これも読み上げ時にじゃまになるだけなので、alt=””で空に指定するのがよいだろう。
テキストまわり
文字サイズをポイント指定などで固定せず可変指定にしてブラウザの文字拡大・縮小機能などで変更できるようにする。これは小さな文字が読みづらい高齢者や、特別な文字拡大ソフトを使わないでも読むことができる弱視の人などにとっては重要なことだ。
野村證券サイトでは、ブラウザでの文字拡大・縮小の操作方法を知らない初心者にでもわかりやすいように、さらに、画面右上に「文字サイズ ↑大きく ↓小さく」のボタンを用意している。
また、ページトップの「野村證券」を、HTMLのh1要素、ページ中央の重要な見出しである「＜野村＞と、はじめる」「商品を調べる」などをh2要素でマークアップしている。これは文書構造を明確にするだけでなく、見出し読みモードを備えた音声読み上げソフトで見出しのみをすばやく探すことができるので便利だ【6】。
【6】ホームページ・リーダーの見出し読みモードにすると、見出し部分だけを飛ばし読みできる
音声読み上げソフトを使う視覚障害ユーザーにとっては、画面をパッと一覧してその中から情報を探すことができず、上から順に読み上げていくことになるので、見出しのみ、リンクのみの読み上げといった機能をベテランユーザーはフルに使っている。このため、できるだけ早く目的の情報に耳からたどり着けるような配慮が必要だ。
ナビゲーション・スキップ
多くのサイトでは、各ページ上部あるいは、左右などにナビゲーションメニューを配置している。音声読み上げソフトユーザーにとっては、各ページで同じナビゲーションメニューが繰り返し読み上げられるのは非常に冗長だ。このため、ナビゲーションメニューの前に、メニューを飛ばして本文に直接ジャンプできる機能が求められる。野村證券サイトでは、1ピクセルの隠し画像に「このページの本文へジャンプ」というリンクを付け、さらにリンク先には「ここからこのページの本文」という同様の隠し画像を付けて、音声読み上げソフトユーザーがそのリンク個所を押せば、本文にジャンプできるようにしている。
画像の代替テキスト、文字可変、見出しタグでの見出しのマークアップ、ナビゲーション・スキップはアクセシビリティへの配慮の大きなポイントで、他のアクセシビリティに配慮したサイトでも、これらの点を押さえたサイトが多い。参考にしてほしい。
本記事は『Web STRATEGY』2005年 冬号 vol.2からの転載です
