みかげうら 
はじめに
HTMLで改行を意味するbrタグ。簡単に改行できて便利なので使うことも多いと思います。
ただ文章の途中でおさまりが悪いなどの理由で、このbrタグを使って改行すると見た目は綺麗になりますが、スクリーンリーダーで読み上げをした場合、アクセシビリティ的にどうなんだろうと思い調べてみました。
Google先生に聞いてみた
「br アクセシビリティ」で検索してみました。
アクセシビリティを調べるうえでWCAGを避けることはできないので検索結果をじっくりみたところ、WCAG2.1の F32 達成基準1.3.2の失敗例として以下のページに例がありました。
他にもたくさんでてきましたので一度検索してみることをおすすめします。
スクリーンリーダーで聞いてみた
以下のようなHTMLをWindows10 NVDA ver2024.2jp で聞いてみました。
<p>文章を読み上げます。<br>
文章を読み上げています。<br><br>
文章を<br>読み上げます。</p>pタグの段落内でbrタグがあるとそこで読み上げが止まりました。カーソルキー下を押すことで続きが読み上げられました。カーソルキー右で一文字ずつ読み上げていくと句点のあとで「改行」と読み上げられました。
二行目のbrタグを二つ重ねているところは「ブランク」と読み上げられました。
三行目のように文章内でbrタグがあるとそこで読み上げが止まりました。
brタグのところで読み上げが止まるので、その都度カーソルキーを押すという動作が増えますし、文章の途中で読み上げが止まってしまうのはちょっと困るのではないかと感じました。
誤用と対策
文章の改行
多くみられる誤用は、段落をbrタグで表現している点です。
<p>いまでも燃えてるって、あたし何べんも眼をこすっていたのだ。<br>
きっと何か掘ってるから二人は、まるで一度に叫んで、そっちの方をちょっと見ました。<br>
にわかに、車のなかが、ぱっとあかりが射して来ました。<br>
ところがそれはいちめん黒い唐草のような声がしたと思うと、もうどうしてもこの方たちの幸福だとも思いました。<br>
さあ、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような顔いろをしてはいけない。</p>これはpタグを使用することで解決です。段落にはpタグを使いましょう。
<p>いまでも燃えてるって、あたし何べんも眼をこすっていたのだ。</p>
<p>きっと何か掘ってるから二人は、まるで一度に叫んで、そっちの方をちょっと見ました。</p>
<p>にわかに、車のなかが、ぱっとあかりが射して来ました。</p>
<p>ところがそれはいちめん黒い唐草のような声がしたと思うと、もうどうしてもこの方たちの幸福だとも思いました。</p>
<p>さあ、向こうの河岸に二本の電信ばしらが、ちょうどさっきのような顔いろをしてはいけない。</P>また、brタグを重ねて使い段落と段落の間の余白をとっている場合もよくあります。
<p>いまでも燃えてるって、あたし何べんも眼をこすっていたのだ。<br>
きっと何か掘ってるから二人は、まるで一度に叫んで、そっちの方をちょっと見ました。<br>
<br>
<br>
にわかに、車のなかが、ぱっとあかりが射して来ました。</p>これは、CSSでmarginをつけましょう。余白をつけたいpタグにclassをつけてCSSに記述する方法や、pタグにstyleをあててもいいのではないかと思います。ここではpタグにstyleをあててみました。
<p>いまでも燃えてるって、あたし何べんも眼をこすっていたのだ。</p>
<p style="margin-bottom: 2em;">きっと何か掘ってるから二人は、まるで一度に叫んで、そっちの方をちょっと見ました。</p>
<p>にわかに、車のなかが、ぱっとあかりが射して来ました。</p>ここで使用したテキストは、「Lorem JPsum 自然な日本語ダミーテキスト」のサイトから使用しました。
ボタンなど幅が決まっている場合の文章中で改行
ボタンのテキストが「もっとみる」ではわかりにくくて「お知らせをもっとみる」にしてみたとき、見た目が「お知らせをもっとみ」改行「る」になってしまうので、「お知らせを」改行「もっとみる」という見た目にしたいとき、文章の中でbrタグで改行すると、見た目はいいですが、スクリーンリーダーで読み上げた場合に間が空いたり、改行を読み上げたりなどちょっと困ったことになります。
<p><a hlef="#">お知らせを<br>もっとみる</a></p>この場合は、テキストの改行したいところをspanタグで囲って、CSSで調整してみましょう。
<p><a hlef="#">お知らせを<span>もっとみる</span></a></p>p > a > span {
white-space: nowrap;
}spanで囲った「もっとみる」のところでは改行しないようにして、「お知らせを」で改行するように制御しています。
おわりに
簡単に表現することができるので多用してしまいがちなbrタグですが、ページを見る人によっては困ってしまうことがあるということがよく分かりました。アクセシビリティの一歩目としてこういったところから見つめなおしていければいいなと思いました。
以下に参考にした書籍を紹介しておきます。
