アクセシビリティ向上のために[追記あり]

2014年5月10日Web-log・ココログ関連,パソコン・インターネット,心と体,日記・コラム・つぶやき

最近、カラーユニバーサルデザイン(色弱者の方でも見やすいデザイン)について考えさせられる事がありました。

ふと、このサイトはどうなんだろうかと気になりました。

探してみると、色弱者の方が見ていると思われる画面を再現するソフトが、OS Xにもありました。

Color Oracleを起動すると、メニューバーに常駐し、色弱者の方の見え方をエミュレーションしてくれます。それによると、本サイトは、次の様に見える様です。

まずは、C型と呼ばれる、一番多い見え方です。

C型

D型の方の見え方です。

D型での見え方

P型の方の見え方です。

P型

幸い、メニューなどでは、致命的に見づらい所は無かった様です。

色弱者の方のアクセシビリティを高めるためのガイドラインと言う物が存在します。

色弱者の方が一定の割合でいらっしゃいますので、基本は、色だけに頼った区別をしない事の様です。

そんな事もあり、CSSを工夫して、文字情報も載せてみる試みを始めています。CSSを変更して、色だけではなく、画像情報で「(茉奈)」「(佳奈)」を載せる様にしました。次の記事をご覧ください。

さらにアクセシビリティを高めるために、音声読み上げにも対応しようとしました。CSS2.1/3.0には、cue属性と言う物があって、音の目印にできる様なのです。これも試してみたのですが、うまく行きませんでした。やり方が悪いのかなぁ。ちなみに、ローカル(サーバはApache2.4, クライアントはFirefox, Safari, Chrome)で実験しているだけで、現在公開中のCSSにはcue属性を入れていません。

cue属性の解説のページはいくつも見つかるのですが、実際に使っているページは見つけられませんでした。どなたか、ご存知の方がいらっしゃいましたら、お知らせください。

(追記 2014-05-10 10:52)

上記では、"cue"属性について書いていますが、目的としては、会話文で誰が話したかを明確にしたいと言う事です。例えば、

茉奈: こんにちは

佳奈: こんにちは

と言う様に、話者が誰かが、視覚的に、そして読み上げツールを使う事で聴覚からも情報を得られる様にしたいと言う事です。

twitterで、Kazuさんから色々教えていただきました。「cue属性は対応しているブラウザが無い」「クリーンリーダーによっては、content属性に未対応の場合もある」「話者を表示するには、dl要素を使う方法もあるが、W3C的にはspan要素を使う方法を推奨」と言う事です。

会話文のマークアップ方法。

cue属性は、軒並み比対応。

NVDA(Windows版)を使えば、content属性の読み上げはしてくれる。でも、メジャーではないらしい。そして、OS XのVoice Overは、content属性を読み上げない。

これらの事をふまえ、コンテンツを見直したいと思います。

Posted by お市のかた