Ploneを用いたWebアクセシビリティの実現

原田 保, 山本 真也

株式会社NTTデータ

ITのユニバーサルデザイン

今までできなかったこと

車椅子では、書店の高い棚の本に手が届きません

ITが使えるようになると

ウェブ上で見たかった本が検索できる

オンラインショップでその本を購入できる

できなかったことが、できるようになります

今まで一人でできなかったことが沢山できそうだ！

ITをユニバーサルデザインに

便利なサービスは、みんな使いたい

NTTデータが考えるUD

『誰でも使いやすく、使えるように配慮したシステム開発』

Ploneによるアクセシビリティの実現

事例紹介「稲城市立図書館ホームページ」

Ploneを採用し高レベルなUDを実現

稲城市立中央図書館

2006年7月1日オープン

• 東京都稲城市
• 東日本発のPFI事業(Private Finance Initiative)
• 「ひとにやさしい図書館」
  • 施設のユニバーサルデザイン
• 20時まで開館
  • 閉館後も貸出ロッカー経由で資料の貸出が可能
• 最大10点までの貸し出し
• 無線LANが使える喫茶室
• パソコンや携帯電話経由での資料検索や予約
• 館内パソコン貸出

UDに関するお客様のご要望

• 音声読み上げソフトへの対応
• 色調への配慮
• 容易に文字サイズを変更できる切り替え機能
• 利用者を迷わせないためのナビゲーション機能
• 平易な言葉遣いを用いた子供向けコンテンツ

CMSとは何か

コンテンツを自動的に作成／管理／配信するためのシステム

CMSの導入状況

地方公共団体の約3分の1、
都道府県の約3分の2がCMSを導入済み

CMSとアクセシビリティ＜有効性＞

二つの都市伝説

「(我々の)CMSだから大丈夫」
「CMSだから駄目」

CMSとアクセシビリティ＜問題点＞

CMSの問題点

• そもそもCMS製品がウェブアクセシビリティに対応していない
  対応していたとしても限定的であったりする
• CMS製品のカスタマイズ可能な範囲が限定されている

「Plone」を採用した理由(1/2)

世界中で多くの採用実績があり信頼性が高い

• 安倍晋三内閣総理大臣公式ホームページ
• Spring-8(財団法人高輝度光科学研究センター)
• 山形県ホームページ
• 独立行政法人日本貿易振興機構(ジェトロ)
• テレコム競争政策ポータルサイト(総務省)
• 合衆国ハワイ州知事公式ホームページ
• ブラジル議会ホームページおよびブラジル政府ポータル
• ニュージーランド国務委員会が、中央政府や自治体向けに、政府のWebガイドラインにカスタマイズしたPloneを配布

「Plone」を採用した理由(2/2)

オープンソースであること

• 独自のカスタマイズが可能
• 初期投資コストが低くて済む
• 長期に渡るサポートの必要性

構築メンバーの中にPloneの経験者がいた

動的コンテンツ(Webアプリケーション)に関する要件

• 市民参加の為の仕掛け(掲示板等)
• PloneはWebアプリケーションの基盤でもある
• データベース・サーバ、検索エンジン内蔵

見栄えに関してニュートラルである

Ploneのデフォルトの見栄え

Ploneのカスタマイズ後の見栄え

コンテンツ制作の段取り

各種規約類の準備

• アクセシビリティ対応項目リスト
• UI標準仕様書
• コーディング規約(HTML、CSS)

規約に従ったコンテンツの制作

制作中は、Another HTML-lint等のチェックツールで、随時、アクセシビリティの簡易診断を実施

社内アクセシビリティ診断の実施

ウェブアクセシビリティJIS規格に準拠したNTTデータのアクセシビリティ・ガイドラインのチェックポイントに基づき詳細に診断

段取りのポイント

まず始めに、CMSに投入するコンテンツ一式を制作

それらのアクセシビリティを十分に確保しCMSへ投入

発生した(アクセシビリティに関する)問題が、コンテンツそのものにあるのか、それともCMS（Plone）にあるのか、の切り分けを容易にする為

ＮＴＴデータ・アクセシビリティ・ガイドライン

アクセシビリティの高いウェブシステムを開発するための考え方、HTML/CSSの記述ルールをまとめたものである。当ガイドラインは、弊社の開発標準「TERASOLUNA」へ組み込まれている。

CMSの設計

コンテンツ・タイプの決定

• コンテンツの類型の定義
• それぞれの類型の実装方法の検討
  • 既存のものを利活用するのか、新規開発するのか
  • 計7種類のコンテンツ・タイプ
    FAQ、ブログ、リンク、バナー広告、お知らせ、サイトマップ、図書館だより

ワークフローの策定

基盤の設計

• ハードウェアやOS等の選定

CMSへのコンテンツ投入

CMSのカスタマイズ（その１）

日付の表示形式の変更

CMSのカスタマイズ（その２）

ブログのエントリの見出しレベルの調整

CMSのカスタマイズ（その３）

画像投入の際に、音声読み上げソフトに対応する為の画像代替テキスト(alt属性)を設定できるように修正

COREBlog2のカスタマイズ

コメント確認ページのボタンの表記と配置の変更

• 次のアクションを予測し易い表記・文言へ
• 戻る系ボタンは左、進む系ボタンは右へ

入力必須であることの示し方の変更

• アイコンの代わりに文言を使用

PloneHelpCenterのカスタマイズ

「よくあるご質問」の実現にPloneHelpCenterを使用

PloneHelpCenterのスキンをカスタマイズして、
文書構造を改善

質問内容を見出し要素にすることで、(音声ブラウザの「見出し読みモード」による)質問群の俯瞰が容易になる。

デフォルト

<div class="documentDescription">質問内容</div>
<div>回答</div>

カスタマイズ後

<h2 class="question">【質問】 質問内容</h2>
<div class="answer"><strong>【答え】</strong> 回答内容</div>

新聞・雑誌一覧の音声読み上げ対応(1/2)

新聞・雑誌一覧の概要

• 中央図書館を含む市内5拠点の新聞と雑誌の蔵書状況を示す一覧表(群)
• 新聞専用の表と、雑誌を(雑誌名で)五十音の各行別に分類した、計9個の表で構成
• 蔵書状況が記録されているCSVファイルから (表を含む)ページ群を一括で生成する―という仕組み

新聞・雑誌一覧の音声読み上げ対応(2/2)

記号の音声読み上げ対応

• 蔵書があることを「○」（マル）で、ないことを「－」（ハイフン）で、それぞれ記号で表現
• CSSの非表示にするハックで記号の後に「あり」「なし」のテキストを追加し音声読み上げに対応

XHTML

○<span class="nosize">あり</span>
－<span class="nosize">なし</span>

CSS

.nosize { position: absolute;
    width: 0px; height: 0px; overflow: hidden;}

サイト内検索のヘルプ対応

使う前に使い方を知れるようにする

本来は、ページ上部にある検索ボックスの近くに(サイト内検索の使い方に関する)ヘルプへのナビゲーションがあるべき。

今回は、ページの面積に余裕がなかった為、検索結果のページに(ヘルプへの)リンクを追加することで対応。

その他のカスタマイズ

画像の幅と高さのきめ細かい指定

• img要素のwidth属性とheight属性
• ナロー・バンドへの配慮
• 実はPloneのデフォルトのスキンでも実現できていないところがある!(各種アイコン)

すべてのalt属性の値の日本語化

サイト全体に渡る一貫性のあるページ・タイトルの付与

コンテンツ自体の工夫(1/4)

トップページのFlash

• Flashがインストールされていない環境への配慮（代替の静止画像）
• 読み上げソフトへの対応（代替のテキスト）

<object data="swf/top.swf" width="770" height="100"
 type="application/x-shockwave-flash">
          <param name="movie" value="swf/top.swf" />
代替⇒ <img src="img/swfdummy.gif" alt="稲城市立中央図書館へようこそ！"
       width="770" height="100" /><br />
稲城市立図書館のイメージをお伝えするために、
フラッシュムービーを配置しています。
ムービーをご覧になるためには、
フラッシュプレイヤー（無償）をダウンロードする必要があります。
</object>

コンテンツ自体の工夫(2/4)

Flashがインストールされていない環境

コンテンツ自体の工夫(3/4)

新しくウィンドウを開いてそこにリンク先を表示する場合の配慮

• そうでないリンクとアイコンを用いて区別
• アイコン画像には代替テキストを設定し読み上げにも対応

<h3 class="title">（社）日本書籍出版協会</h3>
 <div class="cont">
  <a href="http://www.books.or.jp/" target="_blank" class="blank_link">
      <img src="http://www.library.inagi.tokyo.jp/img/blank.gif"
           alt="新しいウィンドウが開きます" height="17" width="17" />
      http://www.books.or.jp/</a>
  <p class="m1">国内で出版され入手可能な図書の検索ができます。</p>
 </div>

コンテンツ自体の工夫(4/4)

JavaScriptが動作しない環境への配慮

noscript要素を用いてメッセージを表示させる

<noscript>
<p>■ 稲城市立図書館ホームページでは、
 表示文字サイズの変更を行えるボタンと、
 現在表示しているページを印刷できるボタンを設置しています。
 それらの機能にJavaScriptを使用しているため、
 JavaScriptを無効とされている方は、
 その機能をご利用いただけないのでご了承ください</p>
</noscript>

公開後に判明した課題とその対策等 (1/4)

お客様によるブログ等の更新により、アクセシビリティ上好ましくない表記等が混入

管理マニュアルへアクセシビリティ配慮方法を追記し、お客様へご配慮をお願いした。

• 写真などの画像を追加する場合、必ず代替テキストを設定する
• 機種依存文字や半角カタカナは使用しない
• 表記の統一（ex. 日付はyyyy年mm月dd日の形式とする）
• HTMLを使わなければならない場合、正しいHTMLを記述する

公開後に判明した課題とその対策等 (2/4)

アクセシビリティ配慮方法を追記した管理マニュアル

公開後に判明した課題とその対策等 (3/4)

音声ブラウザの利用者からのご意見

全ページの冒頭で長い説明文が読み上げられる
トップページのみに説明文をおくように修正

公開後に判明した課題とその対策等 (4/4)

RSSフィードを閲覧しようとした場合、Internet Explorer 6では、XMLソースコードが表示される

XSLTを用いて普通のページのように表示できるようにした

まとめ

CMSでアクセシビリティを実現するためのポイント

• CMSの慎重な選定
• アクセシビリティに関する開発ガイドラインの準備
• ガイドラインに沿ったコンテンツの制作
• 随所でのアクセシビリティに関する試験・検証の実施
• CMSのカスタマイズ

終わり

ご清聴ありがとうございました。