Html iPhone画外音没有'；t为箭头发音

我有这个测试页面（可能在这里编辑）

不幸的是，当您在iPhone上打开画外音（

Settings->General->Accessibility->VoiceOver on

）访问它时，您会听到“Link One Link”对应的“Link One Link”（很好），但当您点击“>”箭头时，却听不到相同的“Link One 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>

@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;
}

当然，我不想对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和“仅限sr”类运行了你的更新代码，它与VoiceOver配合得很好。我在iPhone上运行iOS 12.1.2

我在导航到链接时听到“此文本不发音…”

---

在画外音中，包含在中的所有内容都被视为一个“制表位”，因此我无法专门滑动到“>”箭头。这是我所期望的行为。如果“link one”与“>”箭头具有相同的目的地（

href

），则不应将“>”箭头设置为单独的链接或制表位。

我真的不明白为什么您的代码如此复杂。为什么在

li

上需要

tabindex

，而其中只有一个可聚焦元素（

a

，带有

href

属性）？为什么

li

有

aria标签，尤其是复制链接文本的标签？为什么链接需要
target=“\u self”
？说得严厉一点，所有这些看起来都是多余的废物。@Christophen Strobbe你说得对，我通过删除target=“\u self”更新了上面的代码，因为它与这个问题无关（代码被简化）。还有一件事。。。你有什么建议可以让它工作吗？谢谢。@ChristophenStrobbe，我已经添加了另一个仅使用sr类的示例（在我问题的最后）并基于您的评论。仍然不走运。我同意你的观点，如果“link one”与“>”箭头具有相同的目的地（href），我不应该将“>”箭头作为单独的链接或制表位。我并不像你们所看到的那样，按照我的代码建议：a href包装一切。测试你的结果。谢谢你的帮助。我已经将iOS更新为12.1.2，并将更新后的代码粘贴在这里：我相信这就是你尝试过的代码，对吗？它不会对我说“这段文字不发音……”。只是“链接”。代码本身可以在这里看到：仍然缺少一些东西。我刚刚尝试了你的新代码，它对我很好。当我向右滑动直到到达链接时，我再次听到“此文本不发音…”。而且“>”不会作为单独的滑动显示。