携帯電話での音声出力に対応したコンテンツ作り。
富士通製の一部携帯電話には、音声出力の機能が搭載されており、メールやウェブコンテンツを読上げてくれるものがあります。
電話機が本来音声通話を行う道具である以上、このような機能を実装している端末がもっとあってもいいような気がしますが、実際には余り多くはありません。
だからと言って、音声読上げの機能の存在を無視する訳にもいきません。
ここでは、音声出力を意識してコンテンツを作る際に、留意すべき点を挙げておきます。
- 以下、ご覧になればお分かりいただけると思いますが、要するにアクセシビリティの高いコンテンツ作りの一般論そのものと言えます。
- 詳しくはiモードの音声読み上げコンテンツ作成ガイドラインをご覧下さい。
- また、より一般的なアクセシビリティ向上に関してはモバイルコンテンツ作りでの推奨事項をご覧下さい。
- <img>要素には必ず意味が通じるようにalt属性を与えておく
- もはや基本中の基本と思われますが、画像が表示出来なくても意味が取れるように適切な値のalt属性を付けます。
特に、<a>要素の内容となる<img>要素には、空でないalt属性を与えておかないと、音声出力や画像非表示の状態ではアンカーそのものが機能しなくなりますので気をつけて下さい。
- 個人的には、携帯端末では<a>要素にはテキストのみを使うのがベターと考えております。
alt属性が適切かどうかを判断するには、画像非表示環境で閲覧するのが最も簡単でしょう。リンクスなどのテキストブラウザで閲覧して、制作者の意図が伝わるかどうかを確認するのです。
- <table>要素はなるべく使わない
- <table>要素の内容読み上げはかなり分かり難いです。
なるべくリスト形式に置き換えるようにしましょう。
- 拙作しらぎくモバイルシステムFULLの記事に<table>要素を非対応端末向けにリスト化する方法を解説しておりますので、ご参照下さい。
- <table>要素は旧型端末ではサポートされません。実際には表示出来ない事は無いようですが、正しく読んでもらえない恐れがあります。
- HTMLの標準規格に於いては、<table>要素にはユーザビリティを高める属性や要素が多数定義されておりますが、携帯端末では残念ながら殆ど実装されていないようです。
- 表示スタイルを想定しない文章にする
- 例えば、「赤い文字は…」と言う文章は音声読み上げではどこが赤いか分かりません。
確かに、ｉモードでは<em>要素などはサポートされておりませんが、それでも表示スタイルを想定しない文章にする事は出来るでしょう。
- 記号・絵文字を装飾効果に用いない
- 記号や絵文字には固有の読み方があります。
装飾効果に用いた場合、意味不明な読み上げ方をされる恐れがあります。
- 制作者が悩んだのはここでした。ｉモード端末はCSSが使えず従って<h○>要素が通常のテキストと紛らわしくなるため、目に付くように何らかの目印を付けようとしたのですが、目印を読み上げられると閲覧者(？)を混乱させる恐れがある事を知り、読み上げられないとされるカッコで囲むようにしたのです。ただ、他社が同様の端末を出した場合、カッコが読み上げられないという保障は無く、その場凌ぎの対処でしかないのですが。
- 日付などは端折らない
- 例えば、平成18年12月 4日を
18/12/04と書くと、日付として読んでもらえない場合があります。多少冗長になりますが、
18年12月 4日と書く方が安全です。 - <a>要素などにaccesskey属性を与える場合
- <a>要素などにaccesskey属性が与えられている場合、内容を読み上げる前に自動的にaccesskey属性の値を読み上げます。
このため、キーの表示を<a>要素の前に付けると、二重読みになってしまいます。
そこで、富士通では<a>要素の内容の先頭に、accesskey属性値に対応した絵文字を入れる事を推奨しております。この場合、絵文字は読み上げられないようにしているのです。
- これにも制作者は悩まされました。
- 絵文字そのものがあらゆる理由から絶対に好ましくないものである事
- 他社が読み上げ機能を搭載した際に同様の実装をするかどうか分からない事
から、この方法を使うべきか悩みました。
結局、ダイヤルボタンでのナヴィゲーションは携帯端末には非常に有用なので利用せざるを得ませんでした。
- CSSの:before擬似要素とcontentプロパティに対応していれば、これらの問題は一挙に解決するのですが…。
- これにも制作者は悩まされました。
そもそも、ｉモードのHTML仕様がアクセシビリティに充分対応し切れていないと言うのが根本的な問題であるような気がします。