【text-transform】アルファベット全大文字表記の際に気をつけるべきこと

こんにちは。

今日はテキストの表記でアクセシビリティにまつわる話を書きます。

たまにナビなどで「ABOUT」「NEWS」などアルファベットが全大文字でデザインされたカンプにであいますが、HTMLを記述する上で注意すべき点があります！

ではみていきましょう＾＾

HTML上でそのまま全大文字で記述するとどうなる？

        <ul class="itemList">
          <li><a href="#">TOP</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">NEWS</a></li>
        </ul>

このままHTML上でそのまま「ABOUT」「NEWS」と記述し、ブラウザでみても特に問題はみられません。（リストは横並びにしています）

しかし、見た目では問題なくてもアクセシビリティの点に少し問題があります。

弱視ユーザーの方などがWebサイトを閲覧する手段として音声読み上げソフトがあります。

この音声読み上げソフトでは、英語の全大文字は単語区切りで読み上げられてしまいます。

「ABOUT」を例にすると「エー・ビー・オー・ユー・ティー」ですね(^^;

これではなんのこっちゃわかりませんよね(＞＜)頭の中でいちいち単語に変換しないといけません。

では解決する方法を次の章で書きます！

text-transformプロパティを使って解決！

見出しですでに何度も登場していますが笑、text-transformプロパティを使います！

HTML上では頭文字のみを大文字に、それ以降は小文字で記述します。

        <ul class="itemList">
          <li><a href="#">Top</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">News</a></li>
        </ul>

その上で対象テキストにtext-transform: uppercase;を指定します。

li{
  text-transform: uppercase;
}

そうすると、ブラウザ上では小文字を大文字表記に見せてくれます！

そして音声読み上げソフトではしっかり「アバウト」と読み上げてくれます＾＾

まとめ

いかがだったでしょうか？

全大文字の箇所が多い場合は手間が増えてしまいますが、アクセシビリティの観点からいえばtext-transformプロパティを使って大文字にした方が全ての人に優しいサイトになれるんですよね(＞＜)

transformプロパティはモジュールとして、登録しておくと楽かと思います！

では今日はここまで〜〜