iPhone VoiceOver 不会读出箭头的文字

Question

我有这个测试过的页面 http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (which might be edited here https://jsfiddle.net/wt3dqm8b/1/)。

不幸的是，当您从 iPhone 访问它并打开 VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON) 时，您会听到 "Link One link" 表示 "Link One" link（这很好），但是当您点击“>”箭头时，不会听到相同的 "Link One link"。单击“>”箭头时，只有 "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;
}

P.S。当然，我不想显着更改 html 代码，因此：

预计 JAWS 屏幕不会有重大变化 reader，
使用的键盘保持相同的行为 - 使用 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" class 更新的代码，它与 VoiceOver 配合得很好。我运行 iOS 12.1.2 iPhone.

我在导航到 link 时听到 "this text is not pronounced..."。

中包含的所有内容在 VoiceOver 中都被视为一个 "tab stop"，因此我无法专门滑动到“>”箭头。那是我期望的行为。你应该不使“>”箭头成为一个单独的link或制表位如果"link one"与“>”有相同的目的地（href） " 箭头.

iPhone VoiceOver 不会读出箭头的文字

iPhone VoiceOver doesn't pronounce text for the arrow

html

focus

accessibility

voiceover

jaws-screen-reader