在 IE10 中切换内容

Question

我正在开发一个 Angular 应用程序，其中一些 UI 元素需要通过按 Tab 键来访问，这是出于可访问性的原因。例如，当您单击/点击按钮返回时，我们的内容区域会打开和关闭。我不希望按钮触发页面刷新，所以我目前有一个空的 href。打开/关闭内容区域的链接如下所示

<a href>The link<a>

这在除 IE10 之外的所有浏览器中都可以正常工作，在 IE10 上，除非它包含例如值，否则您不能在 href 上使用 tab

<a href="#">The link<a>

有没有人知道在 IE10 中解决这个问题。我知道我可以编写一些 js 来防止默认操作，但如果有其他解决方法，我宁愿不必为类似的事情添加额外的 js。

Answer 1

您可能想使用button，而不是a。

a element without href attribute“表示一个占位符，用于放置链接，如果它是相关的，则仅包含元素的内容”。这似乎不是你想要传达的。

Button 状态中的button element 适合您的情况：

<button type="button">…</button>

它带有button WAI-ARIA role（“当点击或按下时允许用户触发操作的输入。”）并且默认情况下是可聚焦的。

Answer 2

有几种方法可以解决此问题：

1. 将tabindex="0" 添加到锚点
2. 将href="javascript:;" 添加到锚点，或
3. 将href="#" 添加到锚点

第一个和第二个选项的优点是它们不需要调用event.preventDefault() 来阻止页面不断滚动回顶部。