iPhone 旁白不会为箭头的文本发音

Question

我有这个测试过的页面http://fiddle.jshell.net/wt3dqm8b/1/show/light/(可在此处编辑https://jsfiddle.net/wt3dqm8b/1/)。

不幸的是，当您在打开VoiceOver(Settings -> General -> Accessibility -> VoiceOver ON)的情况下从iPhone访问它时，您会听到"链接一"链接的"链接一链接"(这很好)，但当您点击">"箭头时，不会听到相同的"链接二链接"。只有当您点击">"箭头时发音为"link"。尝试了很多方法，但没有一个能成功。

如何更改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;
}

第页。S.当然，我不想大幅更改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>

谢谢。

Answer 1

我用CSS和What is sr only in Bootstrap 3中的"sr only"类运行了您的更新代码？它与VoiceOver配合得很好。我在iPhone上运行iOS 12.1.2。

导航到链接时，我听到"此文本不发音…"。

<a> 在VoiceOver中被视为一个"制表位"，因此我无法专门滑动到">"箭头。这是我所期望的行为。如果"链接一"与">"箭头具有相同的目的地(href)，则不应将">"箭号设为单独的链接或制表符。