如果移除HTML元素，应该将焦点设置在哪里？

Question

我有以下简化版HTML：

<ul>
  <li><a id="1" onclick="removeItself(1)" href="#">first</a></li>
  <li><a id="2" onclick="removeItself(2)" href="#">second</a></li>
</ul>
<input type="text"></input>

如果其中一个链接被点击，它将被移除。在我的情况下，移除后整个列表将重新呈现。

有很多问题，但总的来说，如果焦点元素被移除，应该把焦点设置在哪里？

例如，如果第二个列表元素被移除或者所有元素都被移除，焦点应该设置在哪里？

在这种情况下，什么解决方案是网络可访问的？是否可以始终将焦点设置在列表中的第一项，但如果所有项目都被移除，则将焦点设置为下一个（输入）或上一个元素？

在IE中，焦点将被重置，并且将从页面开头开始。

- drazen

Answer 1

我会应用以下原则：

1. 如果存在下一个元素，则将焦点放在下一个元素上，
2. 否则，如果存在前一个元素，则将其放在前一个元素上，
3. 否则，将其放在某个有意义的前后元素上，如果没有，则不进行任何操作

这是我修改过以按照此方式运行的Angular.js TodoMVC应用程序（尽管您可以认为我在上述第3点方面做得不够好）。

http://dylanb.github.io/todomvc/index.html#/

这是一篇关于删除功能制作流程的博客文章。

http://unobfuscated.blogspot.com/2015/02/angularjs-accessibility-deleting-todo.html

- unobf

---

很遗憾，这些链接已经失效了。 - xmedeko

Answer 2

根据问题在列表中删除项目后放置焦点的位置的答案，我所做的是：

遵循“最小惊讶原则”，我会保留空格并在其中放置“[已删除]”，直到光标移出列表，此时可以关闭该空格。

场景：

假设列表中有3个项目，用户使用上/下箭头进行导航，并聚焦于第二个项目。

用户操作：

列表项内有一个删除按钮，用户切换到它并按下回车键。

反馈：

删除成功后，焦点将被放置在一个不可见的项目上，该项目位于第二个项目原来的位置，并包含文本“已删除”（屏幕阅读器将宣布“已删除”）。

清理：

然后用户仍然可以使用上下箭头来移动焦点到前一个/后一个项目（或者您之前实现的内容），不可见的项目将在触发onblur事件后被删除。

- Alessia