屏幕 reader 在到达 span 元素时停止
Screen reader stops when it reaches a span element
我正在做一些屏幕 reader 可用性测试,我想知道是否有人可以向我解释为什么屏幕 reader 在到达 <span />
元素时停止。
示例:
<h1><span class="style1">Today</span> is a wonderful <span class="style2">day</span></h1>
屏幕 reader 将阅读 "Today" 然后停止而不是阅读整个 <h1 />
文本。
注意:我正在使用“设置”>“通用”>“辅助功能”菜单中 iPad 上可用的画外音。
这就是一些屏幕阅读器在遇到其他元素中的元素时的行为方式。经常使用屏幕阅读器等辅助技术的人可能会习惯这一点,所以我建议保持原样。
正如 @vanita 和我三年前在 Making an h2 tag with a strong tag inside accessible 中的评论所指出的那样,这就是 VoiceOver 的工作原理。元素之间可能有一些语义意义,因此 VoiceOver 将在每个元素上停止。
虽然有一个解决方法,但它没有记录并且只影响 VoiceOver(不影响 JAWS 或 NVDA)。使用 role="text"
。但是,由于它没有记录在案,因此您 运行 有可能在将来的某个时候无法使用它。
请注意您的使用方式,因为您不想失去标题的语义。让我们从最初的问题开始,像这样:
<h1>hello <strong>there</strong> world</h1>
<h1>hello <span class="myclass">there</span> world</h1>
嵌入元素是语义 () 还是非语义 () 并不重要。
role="text"
不应 直接放在
上,因为那样会删除标题的语义:
<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->
相反,将所有内部文本嵌入 并在内部跨度上指定 role="text"
。
<h1><span role="text">hello <strong>there</strong> world</span></h1>
这将导致 "hello there world" 被视为一个元素,并且仍然会说整个内容是一个标题。
另一种解决方法是使用替代的隐藏内容。
例如:
<h1>This is a <b>bolder</b> word.</h1>
VO可能只读出“This is a”就停止了
添加隐藏内容:
<div>
<h1 aria-hidden="true">This is a <b>bolder</b> word.</h1>
<span class="hidden-text"> This is a bolded word.</span>
</div>
css .hidden-text
的样式:
.hidden-text{
position absolute;
opacity: 0;
}
之所以将它们包裹在同一个 div
中,是因为它允许焦点框的画外音正确定位该区域。
这对我有用,希望对你也有用!
我正在做一些屏幕 reader 可用性测试,我想知道是否有人可以向我解释为什么屏幕 reader 在到达 <span />
元素时停止。
示例:
<h1><span class="style1">Today</span> is a wonderful <span class="style2">day</span></h1>
屏幕 reader 将阅读 "Today" 然后停止而不是阅读整个 <h1 />
文本。
注意:我正在使用“设置”>“通用”>“辅助功能”菜单中 iPad 上可用的画外音。
这就是一些屏幕阅读器在遇到其他元素中的元素时的行为方式。经常使用屏幕阅读器等辅助技术的人可能会习惯这一点,所以我建议保持原样。
正如 @vanita 和我三年前在 Making an h2 tag with a strong tag inside accessible 中的评论所指出的那样,这就是 VoiceOver 的工作原理。元素之间可能有一些语义意义,因此 VoiceOver 将在每个元素上停止。
虽然有一个解决方法,但它没有记录并且只影响 VoiceOver(不影响 JAWS 或 NVDA)。使用 role="text"
。但是,由于它没有记录在案,因此您 运行 有可能在将来的某个时候无法使用它。
请注意您的使用方式,因为您不想失去标题的语义。让我们从最初的问题开始,像这样:
<h1>hello <strong>there</strong> world</h1>
<h1>hello <span class="myclass">there</span> world</h1>
嵌入元素是语义 () 还是非语义 () 并不重要。
role="text"
不应 直接放在
上,因为那样会删除标题的语义:
<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->
<h1 role="text">hello <strong>there</strong> world </h1> <!-- DO NOT DO THIS -->
相反,将所有内部文本嵌入 并在内部跨度上指定 role="text"
。
<h1><span role="text">hello <strong>there</strong> world</span></h1>
这将导致 "hello there world" 被视为一个元素,并且仍然会说整个内容是一个标题。
另一种解决方法是使用替代的隐藏内容。
例如:
<h1>This is a <b>bolder</b> word.</h1>
VO可能只读出“This is a”就停止了
添加隐藏内容:
<div>
<h1 aria-hidden="true">This is a <b>bolder</b> word.</h1>
<span class="hidden-text"> This is a bolded word.</span>
</div>
css .hidden-text
的样式:
.hidden-text{
position absolute;
opacity: 0;
}
之所以将它们包裹在同一个 div
中,是因为它允许焦点框的画外音正确定位该区域。
这对我有用,希望对你也有用!