markup decorative hr tags as decorative

[StephDriver]

<hr> has been used for visual formatting, but it is focusable and read as 'separator, dimmed' which is confusing.

update the markup so that these are not focusable and are not described by screen readers.

examples:

The almost invisible pale line under 'Research Article' is an <hr>.

[StephDriver]

from #4194

• Sample 5.1, item 7. the line under this seems to be decorative, but is read out as 'separator, dimmed'
• Sample 5.3, item 3. "separator, dimmed" the <hr> following the about and before news is read aloud, but this is decorative.

[ajrbyers]

I think we will need to assess the use of hr tags. They are legitimately separators used the breakup content so no technically “decorative”.

[StephDriver]

It was the 'dimmed' part that felt confusing in a 'why do I need to know this' way. Perhaps the dimming can be done through the CSS instead?

Further, I think the HR as a semantic element is only when used to separate paragraphs. In the above example I think it is underlying a heading, which is decorative.

see <hr>: The Thematic Break on MDN

The <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

For now, I think a review of HR use would make sense if combined with

• Improve page structure #4232

[StephDriver]

closing because it is now part of #4232