こんにちは！Webコーダーのこんかいです！

「FEATURE POST 人気特集」のような 英語＋日本語 見出しを実装するとき、
みなさんはHTMLに直接大文字を打ち込んでいませんか？

もし、ここを下記のようにすでに大文字で書いたマークアップコーディングしている人はやめたほうがいいかも…!

<hgroup class="p-header-group">
  <p class="p-header-group__title-en">FEATURE POST</p> <!-- ← 文字が全部大文字 -->
  <h2 class="p-header-group__title-ja">人気特集</h2>
</hgroup>

ということで今回は英語を大文字表記でコーディングしてはいけない理由について解説していきます！

この記事の後半では私が実際に使用しているコードスニペットを公開していますので是非最後までご覧ください！

なぜ “全部大文字” を直接書くのは NG なのか？

結論は、『スクリーンリーダーが単語ではなく アルファベットを 1 文字ずつ読み上げ てしまうことが多い』からです！

このように「FEATURE POST」とすべて大文字のアルファベットでマークアップすると、
「F-E-A-T-U-R-E」と読み上げてしまい、ユーザー体験を損ねてしまいます。

<hgroup class="p-header-group">
  <p class="p-header-group__title-en">FEATURE POST</p> <!-- ← 文字が全部大文字 -->
  <h2 class="p-header-group__title-ja">人気特集</h2>
</hgroup>

解決策：CSS の text-transform を使おう

HTMLでは大文字ではなく単語の一文字目のみを大文字にして、
見た目の “大文字化” は CSSのtext-transform:uppercase;を使用することをお勧めします！

<!-- Markup：英語は通常の書き方 -->
<hgroup class="p-header-group">
  <p class="p-header-group__title-en">Feature Post</p>
  <h2 class="p-header-group__title-ja">人気特集</h2>
</hgroup>

.p-header-group__title-en{
   text-transform:uppercase; //大文字に変更
}

こうすることで、読み上げ機能でもしっかり、「Feature Post」と読み上げてくれます！

ちなみにuppercaseの他にも、
全てを小文字にする『lowercase』
単語の一文字を大文字にする『capitalize』もあります。

See the Pen text-transform by konkai (@konkaicode) on CodePen.

ただ、正直『lowercase』と『capitalize』はそのままコーディングしても、
特に差し支えないのであまり使っていません。

【プレゼント】コードスニペット

正直覚えてしまえば良いのですが、新しいことは忘れやすいのでコードスニペットととして登録することをオススメしております！
ここでは私が実際に使用しているコードスニペットをプレゼントします！

	"英語を小文字から大文字へ": {
		"prefix": "uppercase-english",
		"body": [
			"text-transform: uppercase;"
		],
		"description": "英語のテキストを大文字に変換するスタイル"
	},

このスニペットでは、「uppercase」で覚えれなくても、
「英語の大文字にする」という思い出し方でもできるように、
「english」もトリガーワードに入れております！
これでせっかくスニペットしたのに、そのスニペットを思い出す時間がなくなると思います。

まとめ

いかがでしたか？

アクセシビリティは奥が非常に深い分野なので全てを網羅するというのは中々難しいと思います。
デザインの時点でアクセシビリティに配慮されていない設計になっているということも多々あります。

だからといって無視するのではなく、
コーダーの我々ができることは、最大限アクセシビリティにも気を使ってコードを書けるようになれば良いのかなと思います！

アクセシビリティは奥が深いですがこれからも一緒に学んで少しづつ出来ることを一緒に増やしていきましょう！