Does the HTML hr (horizontal Rule) Benefit Screen Reader Users? • DigitalA11Y

By admin
A conversation with a fellow accessibility subject matter expert led me to contemplate this topic. While working on the design aspects of

DigitalA11Y
PERSON

, I encountered the separator block in the

Gutenberg
PERSON

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
CARDINAL

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.


Share A11Y Love LinkedIn

ORG

Twitter

Facebook

Reddit

Pinterest

Pocket

WhatsApp