javascript - 单击 ‘load more’ 按钮时键盘焦点应该放在哪里

Question

单击“加载更多”按钮时，键盘焦点应该放在哪里？在显示此功能的网站上；单击按钮时焦点会移到页面顶部，或者焦点会移到新内容之外。

我发现这些方法存在问题，因为键盘用户和辅助技术用户如何知道新内容从哪里开始——并轻松移动到这一点。

我正在寻找解决方案，虽然我可以想出几种方法来解决这个问题，但我不确定从可访问性的 Angular 来看最佳方法是什么。

1. 焦点移动到新内容的开头。这可能是使用 tabindex-1 和脚本来设置焦点。
2. 在“加载更多”按钮保留后加载新内容位置和焦点仍然在按钮上。在新的结束内容会出现一个新的“加载更多”按钮。

我正在寻找可访问的最佳实践功能

网站已检查“加载更多”内容按钮功能

1. 显示更多按钮 https://amp.dev/documentation/examples/interactivity-dynamic-content/show_more_button/
2. 向您的内容添加加载更多按钮 https://www.solodev.com/blog/web-design/adding-a-load-more-button-to-your-content.stml
3. 如何为 HTML/CSS 页面添加加载更多按钮？
   How to add load more button for a HTML/CSS page?

Answer 1

这个问题没有单一的答案，但有一些 guidance from W3 regarding the opening and closing of modals (这也是 UI 可用内容的“批发”转变，因此具有可比性)。

还有this article , 和 these survey results (均来自尊敬的 Marcy Sutton)这可能有助于做出正确的选择。

一如既往，与您自己的实际用户代表组进行测试并使用分析将比为假想或“一般”用户设计更好地为您的用户服务。