Does the HTML hr (horizontal Rule) Benefit Screen Reader Users?
A conversation with a fellow accessibility subject matter expert led me to contemplate this topic. While working on the design aspects of DigitalA11Y, I encountered the separator block in the Gutenberg editor which utilizes an <hr> tag. For screen reader users, this tag is being read as a separator.
The discussion revolved around whether the <hr> tag needed to be exposed to screen readers. I realized it hinges heavily on how the page is structured. As a screen reader user, I often find it challenging to distinguish between content sections while quickly skimming through the page using the heading shortcut in the screen reader. When I use browse mode to read content, I tend to lose focus when one section ends and a new section starts. In this scenario, an <hr> tag would be immensely helpful. When the screen reader announces a separator, I can understand that a new content section is about to begin.
We often rely on heading hierarchy to define sections, but during accessibility testing, it’s often a challenge to figure out which content belongs to which section. Using the <hr> tag can clearly define the content sections, indicating where they end and where they start.
Many may argue that the <hr> tag or separator for that matter is merely a presentation and needs to be suppressed. Within such context, I am aware that the HTML <hr> tag is generally muted to screen reader users by providing role=”presentation”. However, there might be a valid use case here. This is merely a thought; it may require usability studies and extensive research involving assistive technology users.
What are your thoughts on this topic? I can’t wait to hear from you and read your comments. So, please feel free to share your thoughts and ideas on this topic.
Hi, thanks for this reflection.
I understand the wish for implicit section brakes in reader mode, but hr is unfortunately not suitable for it, according to HTML specification:
“There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves”
So maybe screen-readers should have a feature to allow announcing new sections (in reader mode) – where they have a name or start with heading – instead?
In my opinion, the site should have a good heading hierarchy, always, and hr should not be read by screen readers. One site should have only one h1, one section starts with heading 2 is the best way. Reading hr tag will be quite noise and makes us confusing.
In my opinion, tag is quite useful. the reason is the same as you. It makes it easier to differentiate between the different sections of the text.
Good questions. CSS HTML Validator displays this message when is used “For elements that are purely presentational, use role=”presentation” to silence screen readers to its presence. Otherwise can be useful for separating content sections (in addition to the section and heading elements).”.
I do not find the separator element required but to those adding role=”presentation” to the element, you are taking the power away from screen reader developers and users. Please don’t do this. NVDA for example also has a dedicated separator jump command, S while in browse mode.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
The only time you as a developer should use role=”presentation” is if you are absolutely 100% sure the semantics of an element should be ignored. For example, if you are using a table for layout benefits only, role=”presentation” is likely okay for this.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
If you still don’t get what I am trying to say, add style=”display: none;” to your HTML tag and then it is gone for all users. Accessibility is about delivering equal experiences and then users can decide what to do with it.