本日の構成
1. Webアクセシビリティとは?
2. Webアクセシビリティ確保上の問題
3. ASPサービス「AltStyle」のご紹介
4. Accessibilityプラグイン

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

1Webアクセシビリティとは？

2009年9月3日
Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー2

Webアクセシビリティとは？
 できるだけ多くの人がWebで提供される
 情報を支障なく得られること
 サービスを支障なく利用できること

 起きている問題

 全く情報が得られない または 利用できない
 ページにたどり着けない(ナビゲーション) ユーザに身体的な損害を与える(点滅など) ポケモンショック(光過敏性発作)2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー3

Webアクセシビリティの対象
 最も影響を受けるのは高齢者・障がい者

 2008年時点で、すでに5人に1人が65歳以上
 身体障がい者数は366万人超

 健常者でも

 色覚 : 男性の20人に1人、女性の500人に1人
 環境、状況などによる一時的な制限
 ケガ、病気 → 手や腕を骨折したなど メガネが壊れた、大騒音の中，両手に荷物，...
 Mac、Linux、Wii、携帯電話、テレビ、2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー4

支援技術としての音声ブラウザ
 音声ブラウザ

 Webサイトの文字、画像のalt属性を読み上げ
 IBMの「ホームページリーダー」が代表的

 支援技術 (アシスティブ・テクノロジー)

 個々の障がいを補い、その生活を助ける技術
 音声ブラウザ、スクリーンリーダー、点字ディスプレイなど
 車椅子なども支援技術の仲間

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー5Webサイトを[聞いて]みましょう 音声ブラウザで読み上げます IBM「ホームページリーダー3.01」
 2007年の調査で利用率がNo.2(*1 読み上げで問題となる例をご紹介します*1) 財団法人電気通信普及財団 平成19年度 研究調査助成 成果報告書「視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007」2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

6アクセシブルなWebにするには?
 Web Content Accessibility Guidelines(WCAG) 2.0
 W3Cの規格。2008年12月12日に勧告

 JIS X 8341-3

 通称「WebアクセシビリティJIS」
 2004年制定、2010年1月ころ改訂の予定
 特に公共系Web案件ではほぼ準拠必須

 チェックツールや関連書籍があります2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

7アクセシビリティ向上のコツ(1) 日付の書き方

 「2009/9/3」 → 「2009ぶんの9 3」
 「2009年9月3日」と表記しましょう スペースで均等揃えした単語の読み上げ
北経海

道 「きた うみ みち」
済 「けい すみ」

 固有名詞の読み上げ

 「十三駅」→「じゅうさんえき」

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー8アクセシビリティ向上のコツ(2) 記号の読み上げ

 「*」などは読み上げないことが多い→ フォームの「*印は必須項目です」で問題→ 必須項目には「(必須)」と書きましょう PDFファイルの読み上げ

 未対応の音声ブラウザがある 弱視の方への配慮(文字拡大)
 文字サイズを固定しない

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

9アクセシビリティ確保上の問題
 ページ数が多いWebサイトへの対処→ CMSを導入し、テンプレートをアクセシブルにすると対応すべきページが少なくなる

 残る問題 各ページの本文領域のアクセシビリティ・レベルがページによってバラバラ
 運用開始後、お客様の更新が進むとアクセシビリティ・レベルが低下していく→ アルファサードのソリューションをご提案
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

10

ASPサービス
AltStyle(オルトスタイル)のご紹介

2009年9月3日
Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

11

AltStyle(オルトスタイル)とは？
 既存のWebページをアクセシブルなページに変換するASPサービスです。

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー12変換モードは6種類(1)デフォルト

2009年9月3日

音声ブラウザルビ(ふりがな)つきMovable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー13変換モードは6種類(2)配色反転

2009年9月3日

文字拡大Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

携帯電話

14

AltStyleの変換機能
 日付フォーマットの整形 スペースで分割された日本語文字列の連結 機種依存文字・記号の正規化/テキスト化
 ルビ(ふりがな)を自動で追加
 テーブルレイアウトをリニア構造に変換 スクリプトやCSSを無効化
 音声ブラウザが読み上げないタグに説明を付記 PDFのテキスト版も自動作成 携帯ブラウザ最適化 ... その他多数
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

15

AltStyleの利用方法(1) URLで指定例) http://altstyle.alfasado.net/altstyle.cgi/speech/http://alfasado.net/

 オリジナルページからリンクを張るだけ
 各モードの指定はパス名の違い
デフォルト

http://altstyle.alfasado.net/altstyle.cgi/default/<URL>

音声ブラウザhttp://altstyle.alfasado.net/altstyle.cgi/speech/<URL>

ルビ(ふりがな)付き

http://altstyle.alfasado.net/altstyle.cgi/ruby/<URL>

配色反転

http://altstyle.alfasado.net/altstyle.cgi/contrast/<URL>

文字拡大

http://altstyle.alfasado.net/altstyle.cgi/larger-text/<URL>

携帯電話

http://altstyle.alfasado.net/altstyle.cgi/mobile/<URL>

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

16

AltStyleの利用方法(2) Movable Typeをご利用の場合 : プラグインで各ページにAltStyleへのリンクを自動追加できます プラグインでPDFファイルにテキスト版へのリンクを自動併記できます DNS設定によりURLをサイトのドメインに例) http://transform.example.com/speech/http://example.com

 スタイルのカスタマイズも対応可能(有償)2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

17類似ソリューションとの比較
 利用者に負担がありません 専用ソフトのインストールが不要です パソコン操作に不慣れな方にも ページの変換が高速
 制作が簡単 リンクを張るだけ

 CMSでの利用にも対応
 PDFもテキストに変換
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

18

AltStyleのご利用と料金について
 個人の非商用サイトでのご利用 無償でご利用いただけます(月間3,000リクエストまで*1)

 商用サイトでのご利用 月額1万5000円(月間10,000リクエストまで*2)*1) 導入サイトの実績ベースでページビューの0.7％程度が変換リクエスト数の目安となります。
*2) 10,000リクエストを超える場合、別途お見積もりとさせていただきます。
見積もりについてはお気軽にお問い合わせください。
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

19まずはお試し下さい
http://altstyle.alfasado.net/altstyle.cgi

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

20

ASPがご利用できない場合のソリューション

2009年9月3日
Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

21

Accessibilityプラグイン
 Power CMS for MTに同梱(オプションプラグインとして提供)
 テキストフィルタとして動作し、再構築したページをアクセシブルに変換
 ASPは利用せず、単独で動作
 ページ全体と、特定のMTタグの出力だけの2種類の範囲指定が可能
 スタティック・パブリッシングのみ対応
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー22プラグインの使い方(1)例) MTEntryBodyの出力を変換する場合<MTEntryBody accessibility="1,2”>
 accessibilityモディファイアの属性値(1~6)で処理内容を指定
 カンマ“,”で複数の処理を指定可能
 “0”を指定すると全ての処理を実行

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー23プラグインの使い方(2)
属性

処理内容

0 以下のすべての処理を実行
1 機種依存文字を正規化し、全角英数字を半角に統一
2 見栄えのためのスペースを削除し、分割された文章をつなげます
3 円、ドル、ユーロなどの通貨記号でを日本語表記に変換
4 日付表記を音声読み上げに適した表記に変換
5 JavaScript関連のscript要素、イベント属性(onclickなど)を削除
6 物理要素(font、blinkなど)・属性(target、styleなど)の削除

2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

24ページ全体を変換する場合
 システムのプラグイン設定で処理を指定
 [パラメタ]にaccessibility
モディファイアと同じ数値を指定※ スタティック・パブリッシングのみ対応
2009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

25

最後に

2009年9月3日
Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

26

ASPサービス : AltStyle
Accessibilityプラグイン
CMSの各ページのアクセシビリティを均質化
運用開始後も一定のアクセシビリティを確保

誰もが使いやすいWebサイトを提供

2009年9月3日
Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー272009年9月3日

Movable Type 5 最新情報 & 圧倒的コストパフォーマンスのハイエンドCMS体感セミナー

28