hr要素はスクリーン・リーダーにどのように読み上げられるべきか

最終更新：2024年4月12日

タグ：マークアップ、スクリーン・リーダー

質問/問題

スクリーン・リーダーがhr要素を読み上げるようにするべきか分からない。また、読み上げるようにした場合にその読み上げられ方に違和感がある。

回答/結論

  • hr要素は、基本的に情報の区切りを示すために使用されるため、スクリーン・リーダーでも読み上げるようにする。

  • hr要素の読み上げられ方はスクリーン・リーダーごとに異なるもので、コンテンツ製作者は制御できない

解説

一般的にhr要素は、情報の区切りを示すために使用されます。無意味に使用されている要素でない以上、当然同じ情報はスクリーン・リーダーのユーザーにも伝わるようにする必要があります。

もし、hr要素の存在をスクリーン・リーダーのユーザーに伝えない方が、情報の理解などの観点でより良いと考えられる場合、そもそも視覚的にhr要素が必要なのかを検討すると良いでしょう。それでもやはりスクリーン・リーダーに読み上げられない方が良いと判断した場合は、role="presentation"を指定するなどの方法で、スクリーン・リーダーが無視するようにすると良いでしょう。

スクリーン・リーダーがhr要素をどのように読み上げるかは、スクリーン・リーダーごとに異なっています。例えばNVDAでは「区切り」と読み上げ、macOS VoiceOverでは「横方向分割バー」と読み上げます。各スクリーン・リーダーのユーザーは、これらの読み上げを聞いてhr要素の存在を判断していますから、コンテンツ製作者が違和感を持ったとしても、これらの読み上げを変更するべきではありませんし、そもそも変更することはできません。

また、スクリーン・リーダーの中には、前後のhr要素にジャンプする機能を提供しているものもあり、このような場合はhr要素の存在が効率的な情報取得につながることもあります。

関連FAQ

関連ガイドライン項目

関連する参考情報