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/

相关文章:

ios - BottomBar BarButtonItem Voice Over 辅助功能已损坏

javascript - 使用 Jquery 图像 slider 进行直播

javascript - 文本区域中的列选择

javascript - 在highChart图表中拖动缩放后,如何获取图表的最小值和最大值?

javascript - 日期和时间分开

javascript - Ajax IndexedDB 删除当前成功上传

javascript - 检测字段是否使用JavaScript或jQuery更新

user-interface - 响应式 UI - 修改屏幕阅读器中的阅读顺序?

html - 创建现代形式、可访问等的最佳实践是什么?特别是,标签与占位符之争

javascript - 如何根据日期范围过滤掉对象数组中的数组?