选择一个选项可能会导致 VoiceOver 跳转到页面顶部答案

【问题标题】：Selecting an option can cause VoiceOver to jump to top of page选择一个选项可能会导致 VoiceOver 跳转到页面顶部
【发布时间】：2016-12-31 10:37:26
【问题描述】：

iOS9，启用 VoiceOver 的 Safari。

不是 100% 可重现，但只需选择一个选项就会导致 VoiceOver 焦点跳转到页面顶部的按钮。

现在可以监听被选中的选项，然后在几秒钟内强制关注元素，但这会导致不受欢迎的用户体验。

  :focus {
    background-color: pink;
  }

<div>
  <button tabindex="-1">close</button><br/><br/><br/><br/><br/><br/><br/><br/>
  <select>
    <option>Email</option>
    <option>Tobias</option>
    <option>Linus</option>
  </select>

</div>

<p>This example shows how to fill a dropdown list</p>

在生产代码（使用 AngularJS）中，在 2 秒超时后显式设置焦点解决了问题，但这并不理想！谢谢。

【问题讨论】：

在这里完全猜测，不太可能有帮助，但是您是否尝试过使用 <input type="button".. 而不是 <button.. ？我认为在表单中，如果没有指定提交按钮，<button> 作为默认操作有一些逻辑，这里可能会发生类似的事情吗？
你在使用 $anchorScroll 指令中内置的 Angulars 吗？
另一个论坛上也有人问过类似的问题。当 VoiceOver 聚焦在 iFrame 上时，页面滚动到顶部。虽然情况并不完全相同，但另一个论坛上的那个人的错误是特定于浏览器的，这可能意味着错误可能在 Safari 而不是 VoiceOver 中。 discussions.apple.com/thread/7537410?start=0&tstart=0
许多屏幕阅读器将<br> 宣布为“空白”，因此您的AT 用户将获得“空白空白空白空白空白空白空白空白”。没有充分的理由连续使用多个<br> 标签。如果您需要间隙，请使用 CSS（考虑边距、填充）。此外，请使用 <br role="presentation" />，除非您绝对希望宣布空行。
任何对可聚焦元素的页面重绘都会像烫手山芋一样将焦点抛向页面。是否包含在<form> 标签中？

标签： html accessibility voiceover

【解决方案1】：

也许这个css属性会派上用场：

.button {
 speak: spell-out;
}

【讨论】：

我认为 Safari 或任何主流浏览器都不支持这个 CSS 属性。这个“答案”也与问题无关。