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

我正在开发一个聊天网络应用程序。我想确保每个人都可以访问它。目前，当我点击聊天内容时，焦点会转到聊天中的第一条消息，即屏幕顶部。要访问最新的消息，用户必须通过选项卡浏览所有消息。有没有一种方法可以覆盖这种行为，使选项卡从屏幕底部开始？我不能修改DOM中元素的顺序，因为这样会显示无序的消息，并使不使用屏幕阅读器的用户感到困惑。此外，用户仍然需要通过制表符浏览所有消息才能访问输入以发送消息。如何确保选项卡不会滚动到屏幕顶部？

您可以使用tabindex属性：

---

您可以在特定元素上设置

tabindex

number属性。

tabindex

的递增顺序将是选择顺序

阅读更多信息。

错误答案 可以使用正的tabindex值，但这是一种不好的做法。 关于它为什么不好有很多解释不要使用tabindex

简单回答 经常使用tab导航的人通常也知道，他们可以使用shift+tab向后移动。 所以，如果你没有做什么特别的事情，你是安全的，只要假设他们足够聪明，可以向后导航，以便快速到达最后的消息

更好的答案 问自己这样一个问题：每条消息真的必须是单独聚焦的吗

答案可能是否定的，或者至少不直接用tab

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

• 按tab键进入列表，再次按tab键进入列表外的下一个元素
• 由于单个选项卡足以跳过所有消息，因此只需两个或三个选项卡就可以访问输入字段来表示内容
• 如果我想逐一阅读这些消息，我会转到列表，然后可以使用箭头键和home/end在列表中的消息之间导航。注意家/终点，他们经常被遗忘，在非常多话的房间里，箭是不够的
• 当离开列表后又回到列表中时，应该像离开列表时一样再次关注相同的消息

事实上，经常被遗忘的是键盘导航不仅仅是标签。还有箭头键、home/end、空格键和enter键等。 互联网上有很多关于在什么情况下应该做什么的书面建议。搜索例如“WAI创作实践”

通常，最有用和最常用的元素必须能够快速访问。

---

请记住，如果必须按多个键才能访问某个内容，则可能无法创建设计良好的界面。

如果使用tab index one元素，则必须将其设置为所有其他元素。而且，我听说这是一种不好的做法