单击“加载更多”按钮时键盘焦点应该放在哪里
Where should keyboard focus go when a ‘load more’ button is clicked
单击“加载更多”按钮时，键盘焦点应该放在哪里？在显示此功能的网站上；单击按钮时焦点移到页面顶部，或者焦点移到新内容之外。
我发现这些方法有问题，因为键盘用户和辅助技术用户如何知道新内容从哪里开始——并轻松移动到这一点。
我正在寻找解决方案，虽然我可以想出几种方法来解决这个问题，但我不确定从可访问性的角度来看最好的方法。
- 焦点移至新内容的开头。这可能是
使用 tabindex-1 和脚本来设置焦点。
- 新内容在“加载更多”按钮保留后加载
位置和焦点仍然在按钮上。在新的结束
内容会出现一个新的“加载更多”按钮。
我正在寻找同样可用的最佳实践功能
站点已检查 'Load more' 内容按钮功能
- 显示更多按钮 https://amp.dev/documentation/examples/interactivity-dynamic-content/show_more_button/
- 向您的内容添加加载更多按钮 https://www.solodev.com/blog/web-design/adding-a-load-more-button-to-your-content.stml
- 如何为 HTML/CSS 页面添加加载更多按钮？
How to add load more button for a HTML/CSS page?
这个问题没有单一的答案，但有一些 guidance from W3 regarding the opening and closing of modals（这也是 UI 可用内容的 'wholesale' 转变，因此具有可比性）。
还有 this article, and these survey results（均来自尊敬的 Marcy Sutton）可能有助于做出正确的选择。
一如既往，与您自己的实际用户代表组进行测试并使用分析将比为虚构或 'generic' 用户设计更好地为您的用户服务。
我们必须考虑新内容是否属于某个组。基于HTML语义，一个组是一个列表（无序列表或有序列表）或一组无线电buttons/checkboxes（字段集）。
新内容不属于群组
用户已经浏览了可见元素，因此当他单击 'load more' 按钮时，将焦点移动到新内容的第一个元素是最好的解决方案。用户将看到新内容作为可见内容的扩展。
新内容属于群组
差异主要出现在屏幕 reader 用户身上。屏幕 reader 宣布有多少元素属于该组。通过单击 'load more' 按钮，组中的元素数量增加（可见元素 + 新内容）。在这种情况下，屏幕 reader 应该知道组中有多少元素以及新内容。我提出了两个解决方案，应该用屏幕 reader 用户进行测试。
- 遍历可见元素两次
将焦点移到第一个可见元素上将更新组中元素的数量，但用户将浏览两次可见元素。
- 宣布新内容加载结束
添加一个 aria-live 区域，它宣布新内容加载结束并将焦点移动到新内容的第一个元素。
单击“加载更多”按钮时，键盘焦点应该放在哪里？在显示此功能的网站上；单击按钮时焦点移到页面顶部，或者焦点移到新内容之外。
我发现这些方法有问题，因为键盘用户和辅助技术用户如何知道新内容从哪里开始——并轻松移动到这一点。
我正在寻找解决方案，虽然我可以想出几种方法来解决这个问题，但我不确定从可访问性的角度来看最好的方法。
- 焦点移至新内容的开头。这可能是 使用 tabindex-1 和脚本来设置焦点。
- 新内容在“加载更多”按钮保留后加载 位置和焦点仍然在按钮上。在新的结束 内容会出现一个新的“加载更多”按钮。
我正在寻找同样可用的最佳实践功能
站点已检查 'Load more' 内容按钮功能
- 显示更多按钮 https://amp.dev/documentation/examples/interactivity-dynamic-content/show_more_button/
- 向您的内容添加加载更多按钮 https://www.solodev.com/blog/web-design/adding-a-load-more-button-to-your-content.stml
- 如何为 HTML/CSS 页面添加加载更多按钮？
How to add load more button for a HTML/CSS page?
这个问题没有单一的答案，但有一些 guidance from W3 regarding the opening and closing of modals（这也是 UI 可用内容的 'wholesale' 转变，因此具有可比性）。
还有 this article, and these survey results（均来自尊敬的 Marcy Sutton）可能有助于做出正确的选择。
一如既往，与您自己的实际用户代表组进行测试并使用分析将比为虚构或 'generic' 用户设计更好地为您的用户服务。
我们必须考虑新内容是否属于某个组。基于HTML语义，一个组是一个列表（无序列表或有序列表）或一组无线电buttons/checkboxes（字段集）。
新内容不属于群组
用户已经浏览了可见元素，因此当他单击 'load more' 按钮时，将焦点移动到新内容的第一个元素是最好的解决方案。用户将看到新内容作为可见内容的扩展。
新内容属于群组
差异主要出现在屏幕 reader 用户身上。屏幕 reader 宣布有多少元素属于该组。通过单击 'load more' 按钮，组中的元素数量增加（可见元素 + 新内容）。在这种情况下，屏幕 reader 应该知道组中有多少元素以及新内容。我提出了两个解决方案，应该用屏幕 reader 用户进行测试。
- 遍历可见元素两次 将焦点移到第一个可见元素上将更新组中元素的数量，但用户将浏览两次可见元素。
- 宣布新内容加载结束 添加一个 aria-live 区域，它宣布新内容加载结束并将焦点移动到新内容的第一个元素。