音声ブラウザと相性の良いHTMLを作る(4)。
公開日 : 2007-05-19 02:03:06
CSSメディアタイプによる分岐とINS, DEL要素の処理
関連エントリー
考察(?) の具体的成果物(進行中)
メディアタイプによる分岐とINS, DEL要素の処理を実装してみた。
- 読み上げないテキスト
- 読み上げるテキスト
- 挿入されたテキスト(日付指定あり)
削除されたテキスト(日付指定あり)- 挿入されたテキスト(日付指定なし)
削除されたテキスト(日付指定なし)
今回のテスト用コード
<ul>
<li class="silent">読み上げないテキスト</li>
<li class="speech">読み上げるテキスト</li>
<li><ins datetime="2007-05-19T13:45+09:00">挿入されたテキスト(日付指定あり)</ins></li>
<li><del datetime="2007-05-18T13:45+09:00">削除されたテキスト(日付指定あり)</del></li>
<li><ins>挿入されたテキスト(日付指定なし)</ins></li>
<li><del>削除されたテキスト(日付指定なし)</del></li>
</ul>
Media Type (speech, aural) に対応させる
参考情報:
CSSのメディアタイプを指定することによって、対象のデバイスによってレンダリング結果 (視覚的なレンダリングとは限らない, 例えばサウンドとか）を分岐させることができる。多くのブラウザはメディアタイプ print に対応してきているため、既に以下のような使い方は日常的に行われるようになった。
- 右側が用紙からはみ出してしまわないように幅を調整する
- リンク先のアドレスが出力されるようにする
- 全ページ共通のナビゲーションカラムなどをカットする
音声ブラウザのようなメディアの場合、メディアタイプ aural (※) を指定することができる。
出来るとは言っても、現状対応しているUAは (僕の知る限り) 殆ど無いのだが。
※CSS2.1からは aural の代わりに speech だそうである。aural メディアタイプに対応した読み上げ環境が殆ど無い現状で仕様も何も...てな思いがあったりなかったり...
メディア別のCSSは例えば以下のようにして適用させることができる。
- <link rel="stylesheet" href="aural.css" media="aural" type="text/css" />
- @import url("aural.css") aural;
- @media aural { /* style sheet for aural here */}
今回は上記の1番目の書き方に対応させた。このページにおいて以下の LINK要素を追加。
<link rel="stylesheet" href="styles-aural.css" media="aural" type="text/css" />
#beta { /*これはMTの初期のまんま、右側のサイド・バー部分*/
display:none;
/*隠すのがアクセシブルというわけではなくて, あくまでもテスト用*/
}
.speech { /*音声ブラウザに読ませたいところ*/
display:inline;
}
.silent { /*音声ブラウザに読ませくないところ*/
display:none;
}
普通にブラウザ(Safari)で見る限り何も変化がない。そりゃそうだ。メディアタイプで言うと「screen」にあたるのだから。
ところが、HPR (ホームページ・リーダー) だったら aural が適用されるかというと、そんなことはない。HPR は IE がレンダリングした結果を読み上げているので、今僕が Safari で見ているものと変わりないCSSが適用されているのだ。
処理としては、CSSを解釈してページ出力をするのではなく、相手(誰?) が screen メディアとして振る舞うのだったら騙してやれ、ということで「media="aural" , media="speech" 」を「media="all"」に変換することにした。
例えばウェブアクセシビリティにおけるライティング(コピーライティング)の役割は非常に重要なのだが、「ウェブページ」が「ウェブデザイン」というプロセスを経て作成される以上色んな意味で制約が出てくる (アクセシブルにしようとすると表現が冗長になったり)。
UAの特性に適した分岐が可能であることによって「読み上げてわかりやすい表現」の分岐も可能になると思う。
ただ、ソフトウェアが対応していない技術を使うということは自己満足のような面もあるから中々普及しないのだろう。
逆に普及しないからソフトウェアが対応しないのかどうかは僕にはよく分からないが。
変換方針
- LINK要素のmedia属性が speech 又は aural を含む場合 media="all" に変換する。
INS, DEL要素の処理
INS要素は挿入された部分を、DEL要素は削除された部分を表すのに使う。
多くの視覚系UAは、INS要素は下線、DEL要素は打ち消し線で表現される。
これらの要素は視覚系のUAでも使い方によってしばしば問題になる。下線や打ち消し線を前提とした情報提供を行った場合 (下線は新製品、打ち消し線は売り切れ在庫無し、など) 、下線や打ち消し線が付かない環境では意味が通じなくなるからだ。
例えば僕の携帯電話(SH901iS)のブラウザでは打ち消し線も下線も表示されない。 検索エンジンが表示する「要約部分」にも、多くの場合下線や打ち消し線は付かないだろう。
音声ブラウザでも同じことが言える。削除されたもの、挿入されたもの、ということが音声で表現されなければ 意味が通らないことになる。
そこで、INS要素、DEL要素については以下のように前後にテキストを追加するようにした。
(追記) 挿入されたテキスト (追記ここまで) (削除) 挿入されたテキスト (削除ここまで)
「挿入」よりは「追記」の方が読み上げとしては自然に理解できやすいかと思うがどうだろうか。
また、INS, DEL要素には datetime属性が指定できることになっていて、「2007-05-18T13:45+09:00」のようなフォーマットで挿入、削除されたタイムスタンプを追加できる。
よって、datetime属性が指定されている場合は、
(2007年05月19日 追記) 挿入されたテキスト(日付指定あり) (追記ここまで)
というように日付を (ちゃんと年月日形式に変換した上で) 付加するようにした。
逆に考えると実際のマークアップの際に、ちゃんと削除、挿入されたことをテキストで表現しておけばこのような処理は不要になるのだ。
変換方針
- INS, DEL要素の前後に「追記」「削除」されたことが理解できるテキスト情報を入れる。
