2

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?

Daryll Santos
  • 2,031
  • 3
  • 22
  • 40
  • What does this hard break serve? It’s quite uncommon to use those in responsive designs, because it has terrible results on text flow. – Andy Jun 20 '22 at 10:33
  • @andy let's say you have some text where you want to force line breaks on specific words (think marketing slogans). Ex:, you want "Hello World from Stack Overflow" to have a line break in between from and Stack (to visually accentuate the branding) but you want the screen reader to read it in one go. – Daryll Santos Jun 22 '22 at 09:39
  • I guess you are using VoiceOver? Would you mind testing my suggested solutions? (: – Andy Jun 22 '22 at 14:21
  • @DaryllSantos What approach to use depends on the context. For example, I would argue that "Stack Overflow" in your example "Hello World from Stack Overflow" should be in a `` element, allowing us to style that element to produce a line break, rendering further discussion (for this example) unnecessary. – Oskar Grosser Nov 29 '22 at 00:59
  • @DaryllSantos With most screen readers the level of detail can be customized, so people have likely chosen to be presented with certain details, e.g. "2 items". – Oskar Grosser Nov 29 '22 at 01:04

1 Answers1

3

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>
Andy
  • 4,783
  • 2
  • 26
  • 51
  • The `white-space: pre` solution works for us, thanks! Follow up question, what about something like this: `

    Hello World

    `, for here is there really no way for the screen reader to not read "2 elements"? I imagine we can do 2 `p` elements, 1 aria-hidden with strong and 1 element that will be read by the screen reader (without formatting).     – Daryll Santos Jun 27 '22 at 14:31
  • 1
    It seems surprising, but if this is how screen readers read it, and there is probably a good reason for that. So we shouldn’t try messing with it, as screen reader users are used to it as well. – Andy Jun 27 '22 at 15:08
  • Did you have a chance to test the second solution in JAWS? @DaryllSantos – Andy Jun 27 '22 at 15:08
  • The second solution has a problem in Mac's Voiceover, it will be read as "h1, 2 elements" - so we usually just do the 2 `h1`s (one aria-hidden and one not). – Daryll Santos Jun 30 '22 at 03:03
  • @Andy AFAIK replacing your `span.newline` with a `div` should be similar in regards to accessibility, since its role is `generic`, too. – Oskar Grosser Nov 28 '22 at 23:25
  • @DaryllSantos At least in [Windows Narrator](https://support.microsoft.com/en-us/windows/chapter-4-reading-text-8054c6cd-dccf-5070-e405-953f036e4a15#WindowsVersion=Windows_10), [NVDA](https://www.nvaccess.org/files/nvda/documentation/userGuide.html#DocumentFormattingSettings) and [VoiceOver](https://www.apple.com/voiceover/info/guide/_1136.html#vo27984), you can customize the level of detail (or verbosity) to be presented with. So I don't see the (presumably) default of reading e.g. "2 elements" aloud as a problem. – Oskar Grosser Nov 29 '22 at 01:13
  • It might be worth updating this answer some time to use `white-space: pre-line` which solves the 1.4.10 issue. – Andy Apr 11 '23 at 13:09