I wanted to consolidate some of the comments to make it easier to read.
But first a clarification. The "group" announcement is with VoiceOver on a Mac. You do not hear "group" with VoiceOver on iOS. I don't have a Mac to test these but I did try it on my iPhone.
Regardless of the "group" announcement, my testing is mainly for hearing the heading as one element instead of split in two, although semantically your heading is two elements since you have a <br>
. This is beside the point of the original question since you were mainly asking how to remove the "group" announcement and not how to read the heading as one element. But nonetheless, here are some testing results for forcing the heading to be read as one. The last example might have a side bonus of eliminating the "group" announcement.
The following ideas have been proposed:
Original code:
<h1>This is a <br>headline</h1>
When swiping right with VO on iOS:
- "This is a, Heading level 1"
- "headline, Heading level 1"
NVDA on a PC, using the down arrow to navigate:
- "heading level 1 This is a"
- "heading level 1 headline"
JAWS on a PC, using the down arrow to navigate:
- "heading level 1 This is a"
- "heading level 1 headline"
Other than the "group" announcement on a Mac, this is what I would expect.
First suggestion:
<h1 aria-label="This is a headline">This is a <br>headline</h1>
When swiping right with VO on iOS:
- "This is a headline, Heading level 1"
- "This is a headline, Heading level 1"
Since the heading is still two elements (because of the <br>
) but an aria-label
is applied (*), you hear the aria-label
for both parts of the heading.
(*) Note that the aria-label
overrides child elements when used properly, which will be addressed below after all these examples.
NVDA on a PC, using the down arrow to navigate:
- "heading level 1 This is a headline"
There is no second element for NVDA when an aria-label
is applied because the aria-label
replaces the contents of all child elements. See https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label, in particular:
When applied to an element with one of the roles that supports naming from child content, aria-label
hides descendant content from assistive technology users and replaces it with the value of aria-label
.
If you follow the naming from child content link, a heading is one of the elements.
JAWS on a PC, using the down arrow to navigate:
- "heading level 1 This is a"
- "heading level 1 headline"
The aria-label
is completely ignored by JAWS and you get the same result as the original code.
Second suggestion:
<h1 aria-label="This is a headline"><span aria-hidden="true">This is a <br>headline</span></h1>
When swiping right with VO on iOS:
- "This is a headline, Heading level 1"
There is no second element. The aria-label
is honored and the aria-hidden
essentially hides the inner text of the heading itself. aria-hidden
really should have no effect because the aria-label
is going to override all child elements (*) as noted above.
(*) Note that the aria-label
overrides child elements when used properly, which will be addressed below after all these examples.
NVDA on a PC, using the down arrow to navigate:
- "heading level 1 This is a headline"
There is no difference for NVDA. The aria-hidden
has no affect, which is what I expected and which is why I was confused that it affected VoiceOver.
JAWS on a PC, using the down arrow to navigate:
Nothing is read, presumably because of the aria-hidden
and because JAWS does not honor aria-label
on a heading, which is part of the (*) comment below. Since JAWS doesn't see the aria-label
and the contents of the heading are hidden, there is nothing to read.
Third suggestion:
<h1><span role="text">This is a <br>headline</span></h1>
When swiping right with VO on iOS:
- "This is a [pause] headline, Heading level 1"
There is no second element because the role="text"
takes away all child elements and just concatentes the text. However, VO announces it slightly different than the previous example and has a brief pause between the "a" and "headline", as if there was a comma between them.
NVDA on a PC, using the down arrow to navigate:
- "heading level 1 This is a"
- "heading level 1 headline"
JAWS on a PC, using the down arrow to navigate:
- "heading level 1 This is a"
- "heading level 1 headline"
Since role="text"
is not an approved role, there is no difference in this example compared to the original with NVDA or JAWS. However, Apple implemented the role and it's honored with VoiceOver and it does sometimes come in handy as long as you realize it will not have an affect with other screen readers. I've used role="text"
in production level code with the caveat that support could be taken away at anytime by Apple. But that production code was written 10 years ago and it's still working great.
(*) comment about using aria-label
properly
Take a look at "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby", in particular the 7th bullet point:
Don't use aria-label
or aria-labelledby
on any heading elements because it overrides them on NVDA, VoiceOver and Talkback. **JAWS ignores them. **
So the idea of using an aria-label
on a heading is strongly discouraged.
One way to have the heading read as one line that is supported by all screen readers AND might eliminate the "group" announcement
<h1>
<span aria-hidden="true">
This is a <br>headline
</span>
<span class="sr-only">
This is a headline
</span>
</h1>
You essentially have two headings. The first one is for the sighted user, which is ignored by the screen reader, and the second one is for the screen reader user, which will not be displayed for the sighted user.
The "sr-only" class is nothing special. It's just a common name to use for "screen reader only" CSS. You can see more about it at What is sr-only in Bootstrap 3?
I believe this example will also eliminate the "group" announcement but I don't have a Mac to test that.
` or better: [this answer](https://stackoverflow.com/questions/15883778/pausing-in-a-screen-reader-for-accessibility) suggesting an aria label - found by [searching SO](https://stackoverflow.com/search?q=%5Baccessibility%5D+br) – mplungjan Apr 11 '23 at 08:10
This is a
` – mplungjan Apr 11 '23 at 09:58headline
This is a
` – Oratorio Tangram Apr 11 '23 at 11:05headline
This is a
` – mplungjan Apr 11 '23 at 12:40headline
foo
` would help here, really. – myf Apr 11 '23 at 14:51bar