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.