英文:
How can I make VoiceOver combine multiple span elements into one read item?
问题
我有以下的HTML，其中一部分文本被标记为红色。这是为了在视觉上引起注意。
不要忘记您的约会。
当我使用VoiceOver向右滑动时，它被读成：
滑动 注意
滑动 不要忘记您的约会
然而，让人们滑动两次来听这条消息是没有意义的。
我希望这段文本被VoiceOver作为单个元素读取，就像HTML是这样的：
其他样式，比如在句子中间加粗一个词，也会导致这个问题。
英文:
I have the below HTML where part of the text is colored red. This is to visually draw attention to the text.
<div>
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
When I swipe right through this using VoiceOver it's read as:
swipe note
swipe don't forget your appointment
However, it doesn't make sense to make someone swipe twice to hear this message.
What I want is for this text to be read as a single element by Voiceover, the same as if the HTML was:
<div>
Note: Don't forget your appointment.
</div>
Other styles, such as bolding a word in the middle of a sentence, also cause this issue.
答案1
得分: 1
无论您在<span>元素之间进行格式更改还是只有一系列<span>元素，Apple决定VoiceOver（VO）应该在每个DOM元素上停止。我有点理解他们的观点。很难知道VO何时应该在每个<span>上停止，或者何时应该将它们一起阅读。
在链接中有多个<span>元素时，以前会出现问题，但它们已经修复了。
<a href="example.com">
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</a>
以前的情况是两个链接，因为VO会在每个<span>上停下来并说：
- "Note, link"
- "Don't forget your appointment, link"
你可以看到这可能会令人困惑。真的有两个链接吗？不，但听起来是这样的。所以Apple修复了这个问题，现在将其宣布为一个链接。
但是他们没有更改<div>中的<span>的处理方式，就像您的示例一样。对于用户来说，知道它们是单独的DOM元素可能很重要。
<div>
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
唯一的解决方案是，正如您指出的，使用未记录的 text 角色。只有WebKit浏览器支持它，对其他浏览器没有影响。请记住，由于它未记录且未经W3C ARIA正式支持，Apple 可能 随时可能会取消它。但是，我已经稀缺地使用它超过10年，它还没有消失。
<div role="text">
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
作为一个有趣的旁注，text 角色曾一度被认为是官方ARIA规范的一部分，但从未获得批准。您可以在W3C档案中看到关于2011年4月的讨论。档案从最新的顶部排序，因此您必须转到该页面的底部找到讨论的开始，并寻找"关于ARIA下一步中的新角色和属性的建议"。然后，您可以阅读所有的“RE：”回复。
英文:
Whether you have a formatting change between <span> elements or just a series of <span> elements, Apple decided that VoiceOver (VO) should stop at each DOM element. I can kind of see their point. It would be difficult to know when VO should stop at each <span> or when it should read them all together.
This used to be a problem when you had multiple <span> elements inside of a link but they have since fixed that.
<a href="example.com">
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</a>
The above used to read out as two links because VO would stop at each <span> and would say:
- "Note, link"
- "Don't forget your appointment, link"
You can see how this might be confusing. Are there really two links? No, but that's what it sounds like. So Apple fixed that and announces it as one link now.
But they did not change how a <span> is handled in a <div> like your example. It might be important for the user to know they're separate DOM elements.
<div>
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
The only solution is, as you noted, is using the undocumented text role. Only webkit browsers honor it and it has no affect in other browsers. Keep in mind that since it's undocumented and not officially supported by W3C ARIA, Apple could take it away at any point. However, I have used it sparingly for over 10 years and it hasn't disappeared yet.
<div role="text">
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
As an interesting side note, the text role was considered at one point to be part of the official ARIA spec but it never got approval. You can see a discussion on the W3C archives from back in April 2011. The archives are sorted from newest at the top so you have to go to the bottom of that page to find the start of the discussion and look for "suggestions for new roles and properties in ARIA next". You can then read all the "RE:" responses.
<kbd></kbd>
答案2
得分: 0
我找到了一种可能的解决方案。修复这个问题的方法是添加非标准的文本角色：
<div role="text">
<span style="color:red">注意：</span>
<span>不要忘记你的约会。</span>
</div>
显然，这只在iOS上被识别。然而，我发现Android的TalkBack一开始就没有这个问题。它知道要将这一行读成一个单独的项目。
注意：这也会跨越嵌入链接进行阅读，因此它们无法被激活。
对于某些父元素，这是不必要的。例如，如果父div是一个按钮或具有role="button"，那么它将把内部视为单行。对于具有href属性的父元素也是如此。
英文:
I figured out one possible solution. The way to fix this is to add the non-standard text role:
<div role="text">
<span style="color:red">Note: </span>
<span>Don't forget your appointment.</span>
</div>
This is, apparently, only recognized by iOS. However, I found that Android's TalkBack doesn't have this issue to begin with. It knows to read the line as a single item.
CAREFUL: this will also read across embedded links so they can't be activated.
For certain parent elements, this isn't necessary. For example, if the parent div is a button or has role="button" then it will read the inside as a single line. Same for an href parent.
答案3
得分: -1
关于您的HTML，没有任何可访问性的内容。
要使其具备可访问性，首先使用语义化的HTML——即描述其功能的HTML元素，比如用于段落的
或用于标题的
至
等等。
示例.html
<h4>注意：</h4>
<p>不要忘记您的约会。</p>
您可以使用样式来使其对大多数用户更具视觉吸引力，但对于视觉受限的用户来说，他们可能看不到颜色，特别是如果他们在使用屏幕阅读器。
英文:
There is nothing accessible about your html.
To make this accessible firstly use semantic html - ie html elements that describe their function, like p for paragraph, or h1 - h6 for heading and so on.
example.html
<h4>Note:</h4>
<p>Don't forget your appointment.</p>
You can use styles to make it more visually appealing for most users, but visually impaired users may not see the colour, especially if they are using a screen reader.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论