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

标签 javascript jquery accessibility lazy-loading

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

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

我正在寻找解决方案,虽然我可以想出几种方法来解决这个问题,但我不确定从可访问性的 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?

最佳答案

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

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

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

关于javascript - 单击 ‘load more’ 按钮时键盘焦点应该放在哪里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57351754/

相关文章:

Javascript - 如何在不干扰页面中 HTML 的情况下添加指向页面中单词的链接

javascript - 如何从多重选择的 activeObjects[] 元素中获取原始坐标?

javascript - 告诉屏幕阅读器页面已在 Backbone/Angular 单页应用程序中更改

javascript - 正确的链接使用

html - 一个标签内的两个输入字段

javascript - 在滚动时查找位于可见屏幕(视口(viewport))中间的元素

javascript - 将 PHP 数据注入(inject) JavaScript 代码

javascript - 将每个输入的值保存在 js 对象中

php - 保护音频文件不被下载,同时仍可通过 JQuery JPlayer 播放

javascript - 动态地将方法应用于 JavaScript 对象