如何解决<legend> 在关注项目时不被对讲/画外音读取
当焦点位于输入元素上时,我试图弄清楚如何使对讲/画外音宣布图例。大白鲨阅读了传说。唯一的问题是对讲/画外音。我知道当焦点移动时,屏幕阅读器会读取焦点下的元素。如果是这种情况,那么不确定 Jaws 在桌面上的表现如何。我尝试了 aria-labelledby
,但我必须在很多地方添加,而且它认为该区域为 region
,这不是有意的。
setTimeout(() => document.getElementById('f1').focus(),3000);
<!doctype html>
<html lang="en-US">
<body>
<form name="form1">
<fieldset class="address" name="billto">
<legend>Billing Address</legend>
<section>
<label for="f1">Street</label>
<input id="f1" name="street">
<br>
<label for="f2">City</label>
<input id="f2" name="city">
<br>
<label for="f3">State</label>
<input id="f3" name="state">
<br>
<label for="f4">Zip code</label>
<input id="f4" name="zipcode">
<br>
</section>
</fieldset>
</form>
</body>
</html>
解决方法
如果您的代码在语义上是正确的,那么您就不必做任何事情。让各个屏幕阅读器按照他们认为合适的方式处理它。在您的简单代码示例中,使用 iOS 上的 VoiceOver(我没有 Mac 可以尝试),当我向右滑动时,我的 VO 焦点转到“帐单地址”边框,并显示为“帐单地址,表单开始”。如果我滑动到任何输入字段,我不会听到 <legend>
。
使用 NVDA,如果我向下箭头浏览 DOM,类似于使用 VoiceOver 向右滑动,我会听到“分组,账单地址”。如果我 tab 到输入字段而不是向下箭头,从而跳过 <legend>
文本,文本仍会在第一个字段宣布之前宣布,“帐单地址,分组,街道编辑有自动完成空白”。
所以它似乎工作正常。如果对讲没有正确宣布,则是对讲的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。