Question

我有这个经过测试的页面http://fiddle.jshell.net/wt3dqm8b/1/show/light/（可以在此处https://jsfiddle.net/wt3dqm8b/1/进行编辑）。

不幸的是，当您在打开VoiceOver（Settings -> General -> Accessibility -> VoiceOver ON）的情况下从iPhone访问它时，您会听到“链接一链接”的“链接一”链接（很好），但是听不到相同的“当您点击“>”箭头时，“链接一个链接”。当您单击“>”箭头时，只有“ link”发音。尝试了很多方法，但是没有人能很好地工作。

如何更改html代码，以便在单击“>”箭头时读出相同的文本“链接一个链接”？

这是上面页面中的代码：

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屏幕阅读器预计不会有重大变化，
使用的键盘保持相同的行为-使用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”类来运行更新的代码，并且在VoiceOver上运行良好。我在iPhone上运行的是iOS 12.1.2。

导航到链接时，我听到“此文本未读...”。

中包含的所有内容在VoiceOver中均被视为一个“制表位”，因此我无法专门滑动到“>”箭头。这就是我所期望的行为。如果“链接一个”与““>”箭头具有相同的目的地（href），则应该不将“>”箭头设置为单独的链接或制表符。

iPhone VoiceOver不会为箭头发音

1 个答案: