「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.4とPC-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」も転換したほうがいいとは思います。