英文:
Linebreak in a H1 turns the element into a VoiceOver group
问题
我在 <h1> 中使用 <br> 作为设计原因，例如：
<h1>这是一个<br>标题</h1>
但注意到这会将元素转换为 VoiceOver 读取为单独项的 “组”，类似于：
> 一级标题 "这是一个 ... 标题"
> 组 3项
> "这是一个"
> "标题"
> "空组"
向 <br> 添加 aria-hidden="true" 或 role="presentation" 属性只会移除“空组”通知，但 VoiceOver 仍然认为 H1 是一个 “组”。
是否可以在 h1 中存在 br 元素而不被 VoiceOver 宣布为 “组”？
英文:
I am using a <br> inside a <h1> for design reasons eg:
<h1>This is a <br>headline</h1>
But have noticed that it will turn the element into a "group" that VoiceOver reads as separate items, something like:
> Heading level 1 "This is a ... headline"
> Group 3 items
> "This is a"
> "headline"
> "Empty group"
Adding aria-hidden="true" or role="presentation" attributes to the <br> only removes the "empty group" announcement, but VoiceOver still considers the H1 to be a "group".
Is it possible to have br element present inside h1 without having it announced as "group" by VoiceOver?
答案1
得分: 5
我想合并一些评论以便更容易阅读。
首先澄清一点。在Mac上使用VoiceOver时，不会听到“group”的公告。在iOS上使用VoiceOver时，也不会听到“group”。我没有Mac来测试这些，但我在我的iPhone上尝试过。
不管“group”公告如何，我的测试主要是为了听到标题作为一个元素而不是拆分成两个，尽管从语义上讲，你的标题是两个元素，因为你有一个<br>。这不是原问题的重点，因为你主要在询问如何删除“group”公告，而不是如何将标题读作一个元素。但无论如何，这里是一些强制标题作为一个元素被读取的测试结果。最后一个示例可能会附带消除“group”公告的副作用。
以下是提出的一些想法：
原始代码:
<h1>This is a <br>headline</h1>
在iOS上使用VO向右划动时：
- "This is a, Heading level 1"
- "headline, Heading level 1"
在PC上使用NVDA按下箭头导航时：
- "heading level 1 This is a"
- "heading level 1 headline"
在PC上使用JAWS按下箭头导航时：
- "heading level 1 This is a"
- "heading level 1 headline"
除了Mac上的“group”公告之外，这是我所期望的。
第一个建议:
<h1 aria-label="This is a headline">This is a <br>headline</h1>
在iOS上使用VO向右划动时：
- "This is a headline, Heading level 1"
- "This is a headline, Heading level 1"
因为标题仍然是两个元素（因为有<br>），但应用了aria-label（*），你会听到标题的aria-label的两部分。
(*) 注意，当正确使用时，aria-label会覆盖子元素，将在下面所有这些示例之后进行讨论。
在PC上使用NVDA按下箭头导航时：
- "heading level 1 This is a headline"
当应用aria-label时，NVDA不会有第二个元素，因为aria-label替换了所有子元素的内容。请参见 https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label，特别是：
>当应用于支持 naming from child content 的角色之一的元素时，aria-label 隐藏了辅助技术用户的后代内容，并用 aria-label 的值替换它。
如果您查看 naming from child content 链接，标题是其中之一。
在PC上使用JAWS按下箭头导航时：
- "heading level 1 This is a"
- "heading level 1 headline"
JAWS完全忽略aria-label，您得到与原始代码相同的结果。
第二个建议:
<h1 aria-label="This is a headline"><span aria-hidden="true">This is a <br>headline</span></h1>
在iOS上使用VO向右划动时：
- "This is a headline, Heading level 1"
没有第二个元素。aria-label得到了尊重，aria-hidden实际上隐藏了标题本身的内部文本。aria-hidden实际上不应该有任何效果，因为aria-label将覆盖所有子元素（*）如上所述。
(*) 注意，当正确使用时，aria-label会覆盖子元素，将在下面所有这些示例之后进行讨论。
在PC上使用NVDA按下箭头导航时：
- "heading level 1 This is a headline"
对于NVDA没有区别。aria-hidden没有影响，这是我所期望的，这也是我对它影响VoiceOver感到困惑的原因。
在PC上使用JAWS按下箭头导航时：
- ""
没有读出任何内容，可能是因为aria-hidden 和 因为JAWS不会在标题上尊重 aria-label，这也是(*)下面的评论的一部分。因为JAWS看不到aria-label，而标题的内容被隐藏，所以没有什么可以读取的。
第三个建议:
<h1><span role="text">This is a <br>headline</span></h1>
在iOS上使用VO向右划动时：
- "This is a [pause] headline, Heading level 1"
没有第二个元素，因为role="text"去掉了所有子元素，只是连接了文本。然而，VO的公告方式与之前的示例略有不同，并且在“a”和“headline”之间有一个简短的暂停，好像在它们之间有逗号。
在PC上使用NVDA按下箭头导航时：
- "heading level 1 This is a"
- "heading level 1 headline"
在PC上使用JAWS按下箭头导航时：
- "heading level 1 This is a"
- "heading level 1 headline"
由于 role="text" 不是一个经过批准的角色，与原始示例相比，这个示例在NVDA或JAWS中没有区别。然而，Apple实现了这个角色，
英文:
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 https://stackoverflow.com/questions/19758598/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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论