html - iPhone VoiceOver 不发音箭头的文本
问题描述
我有这个经过测试的页面http://fiddle.jshell.net/wt3dqm8b/1/show/light/(可以在这里编辑https://jsfiddle.net/wt3dqm8b/1/)。
Settings -> General -> Accessibility -> VoiceOver ON
不幸的是,当您在打开 VoiceOver(">" 箭头。当您单击“>”箭头时,只有“链接”发音。尝试了很多方法,但没有一种方法能正常工作。
如何更改 html 代码,以便在单击“>”箭头时发出相同的文本“Link One link”?
这是上面页面中的代码:
HTML:
<ul class="master secondary">
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
<a tabindex="-1" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
<a tabindex="-1" href="https://google.com">
<span ><span > Link Two </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
和CSS:
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin-top: 60px;
}
.master {
margin: 0;
padding: 0;
list-style: none;
}
.master .main {
border-bottom: 1px solid #ccc;
}
.master .main>a {
position: relative;
display: block;
padding: 20px;
color: green;
text-decoration: none;
background-position: 15px;
}
.master .main > a .fa-angle-right {
position: absolute;
top: 50%;
right: 30px;
margin-top: -8px;
}
PS当然我不想显着改变html代码,所以:
- JAWS 屏幕阅读器预计不会发生重大变化,
- 使用的键盘保持相同的行为 - 当使用 Tab 键时,整个导航项仅聚焦一次,请不要更改此行为。
更新: 即使在下面的代码中
<ul class="master secondary">
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
</a>
</li>
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link Two </span></span>
<span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
</a>
</li>
</ul>
谢谢你。
解决方案
我用你的 CSS 和Bootstrap 3 中的什么是 sr-only 中的“sr-only”类运行了你更新的代码?它与 VoiceOver 配合得很好。我在 iPhone 上运行 iOS 12.1.2。
导航到链接时,我听到“此文本不发音...”。
<a> 中包含的所有内容在 VoiceOver 中都被视为一个“制表位”,因此我无法专门滑动到“>”箭头。这就是我所期望的行为。如果“链接一”与“>”箭头具有相同的目标 ( ),则不应将“>”箭头作为单独的链接或制表位href
。
推荐阅读
- java - 如何更改 ExpandableListView 中展开的 GroupView 背景颜色?
- java - 如何在 Spring 中从文件读取参数到 Schedule 注释?
- ios - iPhone 部署目标 12.1 或以下 (Swift) 的大型 iPA 大小
- amazon-web-services - Docker 容器在本地运行,但不在 AWS Elastic BeanStalk 上
- regex - 用于匹配特殊字母数字模式的正则表达式
- json - JSON 按特定值排序 - PERL
- angular - 在 Angular 5 中使用 ng2-pdf-viewer 导航和滚动 PDF 文件
- r - 连接单个数据框中的重复列
- c# - 如何将模拟的 httpservice 注入到 asp.net 核心控制器
- ios - Swift 中 Java 的 Integer.reverseBytes() 的等价物是什么?