ウェブアクセシビリティ・レポート
文＝KeiYu HelpLab石田優子
ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第9回
CMSサイトのアクセシビリティ
CMSを利用したサイトが増えつつあるが、アクセシビリティへの配慮が忘れられがちだ。そこでオープンソースのCMSとして広く利用されているPloneとXOOPSを例に、CMSにおけるアクセシビリティについて考えてみる。
記事協力
（有）時代工房 www.jidaikobo.com/
NTTクラルティ（株） www.ntt-claruty.co.jp/
稲城市 www.city.inagi.tokyo.jp/
はちみつプロジェクト honey＠cmscom.jp
Ploneで構築するアクセシビリティに配慮したサイト
Ploneとは
Ploneは、ZopeというオープンソースのアプリケーションサーバをベースにしたCMSだ。Ploneは米国リハビリテーション法第508条のアクセシビリティ指針および、W3CのWCAG 1.0のAAレベルに標準で準拠している。このため、Ploneベースでアクセシビリティに配慮したCMSサイトを構築することは比較的容易だ。Ploneにデフォルトで用意されているスキン（見栄え全体および関連する技術全体を含む）でもキーボードのみで操作でき、また音声読み上げソフトで読み上げてもそれほど問題がないレベルだ。
稲城市立図書館サイトの事例
このようなPloneだが、まったく問題がないというわけではない。デフォルトの管理画面では投稿する画像に対してalt属性を付けられなかったり、日付表記が2007/04/15のような形式になるので、音声読み上げソフトによっては正しく日付として読み上げられないといった点がいくつか問題として残る。
稲垣市立図書館サイトでは、alt属性の問題に対しては、ブログ部分に、alt属性のフォームを追加した「ブログ用画像編集」テンプレートを新たに作成し、代替テキストを必須で設定させるようにして対処している。また、日付表記は「2007年4月15日」のように表示することを可能としている【1】。
【1】稲城市立図書館では日付表記をすべて年月日表示に変更している（www.library.inagi.tokyo.jp/blogtop/blog/81）
雑誌・資料一覧では文字サイズ拡大機能との兼ね合いで蔵書の有無を「○」「―」で表示しているのだが、音声読み上げソフトの設定によっては記号を読み飛ばす場合も多い。このため、CSSのハックで音声読み上げソフトでは○を「あり」、―を「なし」と読み、一般的なブラウザでは「あり」「なし」が表示されないようにしている【2】【3】。この手法はPloneやCMSに限らず、その他のサイト制作の場合も有効だろう。
【2】音声読み上げソフトに対応させるためのCSSハック。XHTML（上）とCSS（下）
【3】一般的なブラウザでは○―の表だが、音声ブラウザでは、「あり」「なし」と読み上げられる
沖縄ハイサイネットサイトの事例
シニアへのアクセシビリティに配慮したPloneのCMSサイトとして沖縄ハイサイネットがある【4】。沖縄ハイサイネットは60代の人が中心のシニアネットで、70代の人も20名含まれる。シニア向けのサイトということでデフォルトの文字サイズを大きく、また画面構成もシンプルにされている。稲城市立図書館サイトと同じく、文字サイズ変更ボタンを設置しているが、Ploneは標準でXHTML＋CSSのソースコードを生成するのでブラウザでの文字サイズ変更ができ、これにJavaScriptを加えることで文字サイズ変更ボタンも設置できる。
【4】沖縄ハイサイネットトップページ（e-haisai.net/）
また、サイト制作以降のCMS管理画面からのコンテンツ投稿などの運営も現在はすべて沖縄ハイサイネットのシニアメンバーが担当している【5】。パソコンに不慣れな人にでも使いやすいように管理画面のカスタマイズをしやすい点もPloneの特色のひとつとして挙げられる。
【5】余分な要素を削除して投稿のステップを少なくし、言葉もわかりやすくカスタマイズした沖縄ハイサイネットサイトの管理画面
XOOPSで構築するアクセシビリティに配慮したサイト
XOOPSとは
XOOPSはPHP言語で書かれたオープンソースのCMSだ。PloneはベースとなるZopeをインストールできるホスティングサービスが少ないため独自サーバの場合が多いのに対して、XOOPSはレンタルサーバでもインストールできる場合が多い。Plone＋ZopeのPython言語よりもPHPのほうが初心者レベルでもなじみやすく、安価で手軽にCMSサイトを構築するのに適している。ただ、Ploneが当初からアクセシビリティを意識したCMSであるのに対し、XOOPSは開発者が配慮しないと非アクセシブルなシステムになってしまう可能性があるので、幾分注意が必要だ。
ココロねっとサイトの事例
Ploneの事例で紹介した文字サイズ変更、キーボードのみでの操作、画像へのalt属性の追加以外に、アクセシビリティへの配慮で特に押さえておきたい点としては以下の3つが挙げられる。
●見出しのh要素での構造化したマークアップ
●ページごとのtitle要素のマークアップ
●ナビゲーションスキップ
ココロねっとサイトはこれらへの配慮もされており、特にナビゲーションスキップは、「ヘッダをスキップして本文へ」と「ヘッダをスキップしてメニューへ」の2種類が用意されており、目的の位置にたどり着きやすい【6】。CMSサイトはメニューやレイアウトが複雑になりやすく、音声読み上げユーザーにとってはサイトの全体像を把握しにくいという問題が起こりがちなので、このような全体把握を助ける仕組みは重要だろう。
【6】ココロねっとサイトの電話カウンセリング申し込みページ。ナビゲーションスキップのようなコードだけでなく、申し込み方法も、電話、Skype、申 し込みフォームでの送信と、だれでもが使いやすいように配慮されている （kokoronet.com/modules/counselling/index.php?id=5）
ゆうゆうゆうサイトの事例
XOOPSの特長として、ブログ、掲示板などが「モジュール」として用意されており、それらのモジュールを組み合わせることで多機能なCMSサイトを構築できる点がある。しかし広く配布されているモジュールにはアクセシビリティに配慮されたものはまだ少ない。
ゆうゆうゆうサイトではカスタマイズした掲示板（フォーラム）を設置しており、新規スレッド作成も、スレッドへの返信も、簡単なキーボード操作のみでも行えるように配慮されている【7】。
【7】ユニバーサル ネットコミュニティ「ゆうゆうゆう」（www.u-x3.jp/）のフォーラムの返信フォーム
また、ゆうゆうゆうでは、取材・コンテンツ制作から、運営・管理までを、視覚・聴覚・言語・肢体・内部などさまざまな障害をもった社員が中心となって行っている。視覚障害の人は音声読み上げソフトや画面拡大ソフト、上肢障害の人はマウスを操作しやすくする器具などを使用している。
現在のバージョンのXOOPSの管理画面では、メニューなどのアイコンに代替テキストを付けられないため、よく使用するモジュールの管理画面の配置を工夫したり、不要な部分は、アイコンやボックス自体を削除したりするなどしてコンテンツの管理や投稿をしやすくしている【8】。
【8】ゆうゆうゆうサイトの管理画面。XOOPSのデフォルトの管理画面を大幅にカスタマイズして操作を簡単にしている
運営・管理サイドのアクセシビリティ
現在のバージョンのXOOPSでは管理画面のアイコンなどの画像にalt属性を付けられないなど変更できない個所が多く、PHPのハックなどの方法が模索されている。次期バージョンのXOOPS Cude 2.1では管理画面もテンプレート化されてカスタマイズ可能となるため、制作者の意識次第ではアクセシビリティを向上させることが容易になる。
XOOPSまたはCMSに限らず、Webアクセシビリティでは、閲覧者向けの「外側」のアクセシビリティに目が向けられがちだが、アクセシビリティへの配慮が必要な人たちが情報発信する側に立った場合の利便性についても検討し、配慮していくことが、今後はより重要となるだろう。
本記事は『Web STRATEGY』2007年5-6 vol.9からの転載です
文＝KeiYu HelpLab石田優子ユーザーの視点に立ったサイト構築、運営に関するユーザビリティ、アクセシビリティの向上などのコンサルティング、調査などを行っている。
第9回
CMSサイトのアクセシビリティ
CMSを利用したサイトが増えつつあるが、アクセシビリティへの配慮が忘れられがちだ。そこでオープンソースのCMSとして広く利用されているPloneとXOOPSを例に、CMSにおけるアクセシビリティについて考えてみる。
記事協力
（有）時代工房 www.jidaikobo.com/
NTTクラルティ（株） www.ntt-claruty.co.jp/
稲城市 www.city.inagi.tokyo.jp/
はちみつプロジェクト honey＠cmscom.jp
Ploneで構築するアクセシビリティに配慮したサイト
Ploneとは
Ploneは、ZopeというオープンソースのアプリケーションサーバをベースにしたCMSだ。Ploneは米国リハビリテーション法第508条のアクセシビリティ指針および、W3CのWCAG 1.0のAAレベルに標準で準拠している。このため、Ploneベースでアクセシビリティに配慮したCMSサイトを構築することは比較的容易だ。Ploneにデフォルトで用意されているスキン（見栄え全体および関連する技術全体を含む）でもキーボードのみで操作でき、また音声読み上げソフトで読み上げてもそれほど問題がないレベルだ。
稲城市立図書館サイトの事例
このようなPloneだが、まったく問題がないというわけではない。デフォルトの管理画面では投稿する画像に対してalt属性を付けられなかったり、日付表記が2007/04/15のような形式になるので、音声読み上げソフトによっては正しく日付として読み上げられないといった点がいくつか問題として残る。
稲垣市立図書館サイトでは、alt属性の問題に対しては、ブログ部分に、alt属性のフォームを追加した「ブログ用画像編集」テンプレートを新たに作成し、代替テキストを必須で設定させるようにして対処している。また、日付表記は「2007年4月15日」のように表示することを可能としている【1】。
【1】稲城市立図書館では日付表記をすべて年月日表示に変更している（www.library.inagi.tokyo.jp/blogtop/blog/81）
雑誌・資料一覧では文字サイズ拡大機能との兼ね合いで蔵書の有無を「○」「―」で表示しているのだが、音声読み上げソフトの設定によっては記号を読み飛ばす場合も多い。このため、CSSのハックで音声読み上げソフトでは○を「あり」、―を「なし」と読み、一般的なブラウザでは「あり」「なし」が表示されないようにしている【2】【3】。この手法はPloneやCMSに限らず、その他のサイト制作の場合も有効だろう。
【2】音声読み上げソフトに対応させるためのCSSハック。XHTML（上）とCSS（下）
【3】一般的なブラウザでは○―の表だが、音声ブラウザでは、「あり」「なし」と読み上げられる
沖縄ハイサイネットサイトの事例
シニアへのアクセシビリティに配慮したPloneのCMSサイトとして沖縄ハイサイネットがある【4】。沖縄ハイサイネットは60代の人が中心のシニアネットで、70代の人も20名含まれる。シニア向けのサイトということでデフォルトの文字サイズを大きく、また画面構成もシンプルにされている。稲城市立図書館サイトと同じく、文字サイズ変更ボタンを設置しているが、Ploneは標準でXHTML＋CSSのソースコードを生成するのでブラウザでの文字サイズ変更ができ、これにJavaScriptを加えることで文字サイズ変更ボタンも設置できる。
【4】沖縄ハイサイネットトップページ（e-haisai.net/）
また、サイト制作以降のCMS管理画面からのコンテンツ投稿などの運営も現在はすべて沖縄ハイサイネットのシニアメンバーが担当している【5】。パソコンに不慣れな人にでも使いやすいように管理画面のカスタマイズをしやすい点もPloneの特色のひとつとして挙げられる。
【5】余分な要素を削除して投稿のステップを少なくし、言葉もわかりやすくカスタマイズした沖縄ハイサイネットサイトの管理画面
XOOPSで構築するアクセシビリティに配慮したサイト
XOOPSとは
XOOPSはPHP言語で書かれたオープンソースのCMSだ。PloneはベースとなるZopeをインストールできるホスティングサービスが少ないため独自サーバの場合が多いのに対して、XOOPSはレンタルサーバでもインストールできる場合が多い。Plone＋ZopeのPython言語よりもPHPのほうが初心者レベルでもなじみやすく、安価で手軽にCMSサイトを構築するのに適している。ただ、Ploneが当初からアクセシビリティを意識したCMSであるのに対し、XOOPSは開発者が配慮しないと非アクセシブルなシステムになってしまう可能性があるので、幾分注意が必要だ。
ココロねっとサイトの事例
Ploneの事例で紹介した文字サイズ変更、キーボードのみでの操作、画像へのalt属性の追加以外に、アクセシビリティへの配慮で特に押さえておきたい点としては以下の3つが挙げられる。
●見出しのh要素での構造化したマークアップ
●ページごとのtitle要素のマークアップ
●ナビゲーションスキップ
ココロねっとサイトはこれらへの配慮もされており、特にナビゲーションスキップは、「ヘッダをスキップして本文へ」と「ヘッダをスキップしてメニューへ」の2種類が用意されており、目的の位置にたどり着きやすい【6】。CMSサイトはメニューやレイアウトが複雑になりやすく、音声読み上げユーザーにとってはサイトの全体像を把握しにくいという問題が起こりがちなので、このような全体把握を助ける仕組みは重要だろう。
【6】ココロねっとサイトの電話カウンセリング申し込みページ。ナビゲーションスキップのようなコードだけでなく、申し込み方法も、電話、Skype、申 し込みフォームでの送信と、だれでもが使いやすいように配慮されている （kokoronet.com/modules/counselling/index.php?id=5）
ゆうゆうゆうサイトの事例
XOOPSの特長として、ブログ、掲示板などが「モジュール」として用意されており、それらのモジュールを組み合わせることで多機能なCMSサイトを構築できる点がある。しかし広く配布されているモジュールにはアクセシビリティに配慮されたものはまだ少ない。
ゆうゆうゆうサイトではカスタマイズした掲示板（フォーラム）を設置しており、新規スレッド作成も、スレッドへの返信も、簡単なキーボード操作のみでも行えるように配慮されている【7】。
【7】ユニバーサル ネットコミュニティ「ゆうゆうゆう」（www.u-x3.jp/）のフォーラムの返信フォーム
また、ゆうゆうゆうでは、取材・コンテンツ制作から、運営・管理までを、視覚・聴覚・言語・肢体・内部などさまざまな障害をもった社員が中心となって行っている。視覚障害の人は音声読み上げソフトや画面拡大ソフト、上肢障害の人はマウスを操作しやすくする器具などを使用している。
現在のバージョンのXOOPSの管理画面では、メニューなどのアイコンに代替テキストを付けられないため、よく使用するモジュールの管理画面の配置を工夫したり、不要な部分は、アイコンやボックス自体を削除したりするなどしてコンテンツの管理や投稿をしやすくしている【8】。
【8】ゆうゆうゆうサイトの管理画面。XOOPSのデフォルトの管理画面を大幅にカスタマイズして操作を簡単にしている
運営・管理サイドのアクセシビリティ
現在のバージョンのXOOPSでは管理画面のアイコンなどの画像にalt属性を付けられないなど変更できない個所が多く、PHPのハックなどの方法が模索されている。次期バージョンのXOOPS Cude 2.1では管理画面もテンプレート化されてカスタマイズ可能となるため、制作者の意識次第ではアクセシビリティを向上させることが容易になる。
XOOPSまたはCMSに限らず、Webアクセシビリティでは、閲覧者向けの「外側」のアクセシビリティに目が向けられがちだが、アクセシビリティへの配慮が必要な人たちが情報発信する側に立った場合の利便性についても検討し、配慮していくことが、今後はより重要となるだろう。
本記事は『Web STRATEGY』2007年5-6 vol.9からの転載です
