Webアクセシビリティに関する連載の5回目です。
以前の記事はこちらから。
Webアクセシビリティ連載#1 Webアクセシビリティを高めるimgタグの効果的な使用法
Webアクセシビリティ連載#2 Webアクセシビリティを高めるimgタグの効果的な使用法2
Webアクセシビリティ連載#3 スライドメニュー内を循環させる施術
Webアクセシビリティ連載#4 ブロックスキップを実装しよう！
今回の記事はbrタグを使用する際の注意点についてお話ししたいと思います。
では早速参りましょう。
brタグはなるべく使わない
Webアクセシビリティにおいて、HTMLのタグを適切に使うことは非常に重要です。
改行のためにbrタグを使用されてる方は多いと思いますが、使用については意外と注意が必要です。
brタグの正しい使い方とその注意点について解説します。
デザインのための改行にbrタグを使うのは正しくない
brタグは、元々「文中で明示的に改行を挿入するため」に用意されたタグです。
しかし、多くの場面でデザイン目的で使用されてしまうことがあります。
たとえば、「変なところで改行する可能性があるから予めここで改行しておこう」的な使い方や、デザイン的にテキストのまとまりを作るために改行するケースが見られます。
さらにPCでは改行しているのに、スマホでは改行しなかったり、その逆のケースもあったりします。
しかし先ほど説明したように、タグはあくまで文中の明示的な改行を挿入するためのものです。
デバイスごとのレイアウト調整を目的として使うべきではありません。
このような使い方は、HTMLのセマンティクスを損なうだけでなく、アクセシビリティの観点でも問題があります。
画面リーダーを使用するユーザーにとって、意図しない場所で改行が挿入されると、文脈が分断されてしまい、読み上げが不自然になる可能性があります。
また、リーダーで読み上げる時にbrタグは「カラのグループ」と読み上げられるので、文中に何度も入ると、リーダー利用者にとってはとてもストレスです。
この辺のセマンティックなbrタグの使い方については以前「セマンティックな改行のすすめ」という記事にも書きましたので気になる方は見てみてください。
基本はpタグという文節タグで改行するべき
HTMLの文章構造を正しくマークアップするためには、段落の区切りとしてpタグを使用するのが基本です。
pタグは文節を表すためのタグであり、段落としての意味を持っています。
そのため、文の流れや内容の区切りを明示するのに適しています。
pタグ内で改行を挿入する場合
brタグを使うケースというのは基本的にこの場合が多いと思います。
pタグ内で改行を挿入する必要があるのは、詩や歌詞、住所などの特殊なテキストの場合です。
これらは内容的に改行が必要であり、文法的にもそのまま記述するのが適切です。
例えば
〒810-0041
福岡県福岡市中央区大名1丁目9-27 第一西部ビル306
TEL 092-791-2108
このような場合ですね。
住所として一つの文節の中で改行しないと情報が分かりにくいケースでは明確に改行を挿入することになります。
brタグ使用時のアクセシビリティ配慮
brタグを使用する場合には、アクセシビリティへの配慮が必要です。
スクリーンリーダーでは、先ほども書いたようにbrタグが「カラのグループ」と読み上げられる場合があります。
これにより、ユーザー体験が悪化する可能性があります。
この問題を軽減するためには、「aria-hidden="true"」を追加することで回避できます。
＜p＞ 〒810-0041＜br aria-hidden="true"＞
福岡県福岡市中央区大名1丁目9-27 第一西部ビル306＜br aria-hidden="true"＞
TEL 092-791-2108＜/p＞
という感じで記述することで、スクリーンリーダーはタグを無視し不要な読み上げを回避できます。
まとめ
brタグの乱用がもたらす問題
brタグを多用することで、以下のような問題が生じる可能性があります
1. セマンティクスの欠如
HTMLは文書構造を表現するための言語ですが、タグを多用すると文書構造が不明瞭になります。
2. アクセシビリティの低下
スクリーンリーダーが不自然に改行を読み上げることで、情報の伝達が阻害される可能性があります。
3. メンテナンス性の低下
デザイン変更のたびにHTMLを修正する必要が生じ、保守が困難になります。
brタグは、特定の状況でのみ慎重に使用するべきHTML要素です。
デザイン目的での使用は避け、基本的にはpタグやCSSを使用して構造やスタイルを整えることを推奨します。
また、brタグを使用する場合でも、aria-hidden="true"を付与してアクセシビリティに配慮することが重要です。
適切なHTMLの使用は、すべてのユーザーにとって快適なウェブ体験を提供するための第一歩となりますので、皆さんも是非日々の制作に取り入れてみてください。
それではまた次回お会いしましょう。
