4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

アクセシビリティAdvent Calendar 2023

Day 3

文章中に<br>タグ入れるのやめてください

Posted at

はじめに

文章中に改行で<br>入れるのやめてください

これは各種CMSにお願いしたいことです。テキスト投稿サイトでも同じです。

スクリーンリーダーで読み上げた時にめちゃくちゃ読みづらくなるからです。

なぜか

スクリーンリーダーは基本はキーボードで操作します。タグ内に文字が書いてあれば、それを読み上げてくれます。しかし、<br>タグがあると、そこで一旦文章が途切れます。MacのVoiceOverの場合、「空のグループ」と読まれます。もしそのまま<p>タグ続きであれば、段落続きで連続で読み続けることができます。しかし、<br>が改行目的で使われていると、その度に「空のグループ」と読まれます。これがブログサイトや小説投稿サイトなどの文章メインのサイトだと、スクリーンリーダーを使うユーザーにとってはUXが最悪です。

プログラミングは、コンピュータに特定のタスクを実行させるための手段です。
コンピュータは人間の言語を理解することができないので、プログラミング言語を使って人間がコンピュータに指示を与えます。
プログラミングによって、ソフトウェアやアプリケーションを作成したり、コンピュータに作業を自動化させたり、データを処理したりすることができます。
プログラミング言語にはさまざまな種類があり、それぞれ異なる目的や特性を持っています。

上のような文章を、もし改行の度に<br>タグを使っていたらどうでしょうか?

プログラミングは、コンピュータに特定のタスクを実行させるための手段です。
空のグループ
コンピュータは人間の言語を理解することができないので、プログラミング言語を使って人間がコンピュータに指示を与えます。
空のグループ
プログラミングによって、ソフトウェアやアプリケーションを作成したり、コンピュータに作業を自動化させたり、データを処理したりすることができます。
空のグループ
プログラミング言語にはさまざまな種類があり、それぞれ異なる目的や特性を持っています。

このように、改行の度に「空のグループ」と読まれます。こんな感じで文章書かれていたらすごく読みづらくないですか?スクリーンリーダーを使っているユーザーは、そんな気持ちになります。

ぜひ、適切に<p>タグを使ってちゃんと段落を作りましょう。もしくはここ最近、新しく出てきた、auto-phraseを使いましょう。まだ使えるブラウザは限られますが。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?