携帯電話での音声出力に対応したコンテンツ作り。

富士通製の一部携帯電話には、音声出力の機能が搭載されており、メールやウェブコンテンツを読上げてくれるものがあります。

電話機が本来音声通話を行う道具である以上、このような機能を実装している端末がもっとあってもいいような気がしますが、実際には余り多くはありません。

だからと言って、音声読上げの機能の存在を無視する訳にもいきません。

ここでは、音声出力を意識してコンテンツを作る際に、留意すべき点を挙げておきます。

<img>要素には必ず意味が通じるようにalt属性を与えておく

もはや基本中の基本と思われますが、画像が表示出来なくても意味が取れるように適切な値のalt属性を付けます。

特に、<a>要素の内容となる<img>要素には、空でないalt属性を与えておかないと、音声出力や画像非表示の状態ではアンカーそのものが機能しなくなりますので気をつけて下さい。

alt属性が適切かどうかを判断するには、画像非表示環境で閲覧するのが最も簡単でしょう。リンクスなどのテキストブラウザで閲覧して、制作者の意図が伝わるかどうかを確認するのです。

<table>要素はなるべく使わない

<table>要素の内容読み上げはかなり分かり難いです。

なるべくリスト形式に置き換えるようにしましょう。

表示スタイルを想定しない文章にする

例えば、「赤い文字は…」と言う文章は音声読み上げではどこが赤いか分かりません。

確かに、iモードでは<em>要素などはサポートされておりませんが、それでも表示スタイルを想定しない文章にする事は出来るでしょう。

記号・絵文字を装飾効果に用いない

記号や絵文字には固有の読み方があります。

装飾効果に用いた場合、意味不明な読み上げ方をされる恐れがあります。

日付などは端折らない

例えば、平成18年12月 4日を18/12/04と書くと、日付として読んでもらえない場合があります。

多少冗長になりますが、18年12月 4日と書く方が安全です。

<a>要素などにaccesskey属性を与える場合

<a>要素などにaccesskey属性が与えられている場合、内容を読み上げる前に自動的にaccesskey属性の値を読み上げます。

このため、キーの表示を<a>要素の前に付けると、二重読みになってしまいます。

そこで、富士通では<a>要素の内容の先頭に、accesskey属性値に対応した絵文字を入れる事を推奨しております。この場合、絵文字は読み上げられないようにしているのです。

そもそも、iモードのHTML仕様がアクセシビリティに充分対応し切れていないと言うのが根本的な問題であるような気がします。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com