CODEWITHSUNDEEP
htmlaccessibilitywcag
Daryll Santos
Daryll Santos

Reputation: 2081

Accessibility - making headings with line breaks accessible?

Situation: I have to force line-breaks in a heading.

The quick brown fox
jumps over the lazy dog

I can do <h1>The quick brown fox<br/> jumps over the lazy dog</h1>, but a screen-reader will interpret it as "heading level 1, 2 items". Is there a way for the screen reader to not read it?

I have this solution:

<h1 aria-hidden="true">The quick brown fox<br/> jumps over the lazy dog</h1>
<h1 class="sr-only">The quick brown fox jumps over the lazy dog</h1>

2 HTML elements, one for "doing a line break for non-visually impaired users", and one for "not doing a line break for non-visually impaired users". Is there a better approach here?

Upvotes: 2

Views: 1170

Answers (1)

Andy
Andy

Reputation: 6160

There are two options I guess

.slogan { white-space: pre }
<h1 class="slogan">The quick brown fox
jumps over the lazy dog</h1>

will preserve the white space as-is. This has the disadvantage that it’s not adjusting to it’s container’s width in relation to the font-size any more, degrading accessibility. If you’re sure your text will pass WCAG’s Success Criterion 1.4.10: Reflow, that might be an option.

The more flexible solution, that works in NVDA at least, is to add a pseudo block element width height 0.

.newline::before { content: ""; display: block; height: 0; }
<h1>The quick brown fox
<span class="newline">jumps over the lazy dog</span></h1>

Upvotes: 3

Related Questions