読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

「TEL」・「FAX」は音声ブラウザやスクリーンリーダーでどのように読み上げられるのか?

ユーザビリティ・アクセシビリティ

「TEL」・「FAX」は音声ブラウザやスクリーンリーダーによって読み上げられ方が異なるなので、text-transformを使ったほうが無難なようです。

ちょっとした実験

例えば、以下のようなコードがあるとします。

<ul>
  <li>tel</li>
  <li>TEL</li>
  <li><span class="uppercase">tel</li>
</ul>
.uppercase {
  text-transform: uppercase;
}

それぞれ電話を表す「tel」を小文字、大文字、text-transformで小文字を大文字に変換する、という3つのコードを用意しました。
では、これは音声ブラウザやスクリーンリーダーではそれぞれどのように読み上げられるのでしょうか。
僕の手持ちのIBMホームページリーダー 3.0.4PC-Talker XPでは、IE6の環境においてそれぞれ次のように読み上げました。

IBMホームページリーダーの場合

<ul>
  <li>tel(てる)</li>
  <li>TEL(てぃーいーえる)</li>
  <li><span class="uppercase">tel(てる)</li>
</ul>

「TEL」はちゃんと「てる」と読み上げられていません。

PC-Talker XPの場合

<ul>
  <li>tel(てる)</li>
  <li>TEL(てる)</li>
  <li><span class="uppercase">tel(てる)</li>
</ul>

どのケースでも全て(てる)と読み上げています。

ちなみに、FAXの場合

同じように「FAX」という単語でやってみた場合は、すべて(ふぁっくす)と読み上げました。「TEL」と結果が異なりました。

TELとしたいのであれば、text-transformを使う。

僕の環境では2つのブラウザしか用意できなかったのですが、ほかの環境下ではまた違った結果が出るかもしれません。ただ、大文字で「TEL」としたいのであれば、「tel」をtext-transformで転換するほうが無難なようです。また、同じように「FAX」も転換したほうがいいとは思います。