使用Tab键时如何正确设置项目聚焦的顺序

Question

我正在使用聊天Web应用程序。我想确保每个人都可以使用它。当前，当我切换到聊天内容时，焦点将移至聊天中的第一条消息-位于屏幕顶部。要访问最新消息，用户必须在所有消息之间切换。有没有一种方法可以覆盖此行为，从而使制表符从屏幕底部开始？我无法修改DOM中元素的顺序，因为这将乱码显示消息，并使不使用屏幕阅读器的用户感到困惑。此外，用户仍然需要在所有消息之间切换以访问输入以发送消息。如何确定标签页不会滚动到屏幕顶部？

Answer 1

答案错误

您可以使用正的tabindex值，但这是一个不好的做法。 关于它为什么不好，存在许多解释。 不要使用tabindex 。

简单答案

经常使用制表符导航的人们通常也知道他们可以使用shift + tab向后移动。 因此，如果您没有做任何特别的事情，您会很安全，只是假设它们足够聪明，可以向后导航以快速到达最后一条消息。

更好的答案

问自己一个问题：每个消息是否真的必须要具有针对性？

可能答案是否定的，或者至少不是直接使用制表符就可以。

对于您的特殊情况，建议您制作一个列表框，而不是简单的消息系列。 理想情况下，您可能应该有这种行为：

• 按Tab键进入列表，再次按Tab键转到列表中的下一个元素。
• 由于单个标签足以跳过所有消息，因此只需两个或三个标签即可在输入字段中说些什么
• 如果要一一阅读消息，请转到列表，然后可以使用箭头键和起始/结束在列表中的消息之间导航。注意家庭/住所，它们常常被人遗忘，箭头在非常健谈的房间中还不够。
• 离开列表然后再返回时，与离开列表时一样，应该再次关注同一条消息

事实上，经常被遗忘的是键盘导航不仅仅与制表符有关。还有箭头键，Home / End，空格键和Enter等。 Internet上有关于在什么情况下应该做什么的书面建议。搜索例如“ WAI创作实践”。

通常，必须能够快速访问最有用和最常用的元素。 请记住，如果您必须按许多键才能找到某项内容，则可能无法制作出设计合理的界面。

Answer 2

您可以使用tabindex属性： https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 3

您可以在特定元素上设置tabindex数字属性。 tabindex的递增顺序将是选择顺序。

了解更多here。