我正在进行一些屏幕阅读器的可用性测试,我想知道为什么当屏幕阅读器遇到一个 <span />
元素时会停止。
示例:
<h1><span class="style1">Today</span> is a wonderful <span class="style2">day</span></h1>
屏幕阅读器将会读取“今天”,然后停止,而不是读取整个
<h1 />
文本。注意:我正在使用iPad设置中的“通用”>“辅助功能”菜单中提供的VoiceOver功能。
我正在进行一些屏幕阅读器的可用性测试,我想知道为什么当屏幕阅读器遇到一个 <span />
元素时会停止。
示例:
<h1><span class="style1">Today</span> is a wonderful <span class="style2">day</span></h1>
<h1 />
文本。role="text"
。但是,由于它没有记录,您面临着在将来某个时候无法工作的风险。<h1>hello <strong>there</strong> world</h1>
<h1>hello <span class="myclass">there</span> world</h1>
无论嵌入的元素是语义化的(<strong>)还是非语义化的(<span>),都没有关系。
应该不要直接在<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>
当屏幕阅读器在其他元素中遇到元素时,它们的行为就是这样。经常使用辅助技术如屏幕阅读器的人可能已经习惯了这种情况,因此建议保持原样。
另一个解决方法是使用替代的隐藏内容。
例如:
<h1>这是一个<b>更加突出</b>的词语。</h1>
VO 可能只会读出 "这是一个" 并停止。
添加隐藏内容:
<div>
<h1 aria-hidden="true">This is a <b>bolder</b> word.</h1>
<span class="hidden-text"> This is a bolded word.</span>
</div>
.hidden-text
的CSS样式:
.hidden-text{
position absolute;
opacity: 0;
}
将它们包装在同一个div
中的原因是,这样语音提示框就可以适当地定位到该区域。
这对我很有效,希望对你也有用!
span
гҖҒstrong
гҖҒb
зӯүе…ғзҙ зҡ„h2ж ҮзӯҫеҸҜи®ҝй—®дёӯпјҢи®Ёи®әдәҶеҗҢж ·зҡ„й—®йўҳгҖӮ - unor