如何处理焦点和定义 ARIA 角色
How to handle focus and define ARIA roles
第1001次实现轮播我想“妥善”处理焦点
几个与此组件的 UI/UX 相关的快速问题：
- 如果使用 TAB 键，箭头和页面导航可以接受焦点。单击事件后我应该将焦点放在箭头按钮上吗？是否可以调用
element.focus() 方法 - 就像纯 HTML/CSS 解决方案一样？
- 页面导航区域应该处理箭头键输入 - 同样的问题：按下页面导航按钮后我应该保持焦点吗？可以吗
element.focus()？该组件的 ARIA 角色应该是什么？
- 该设计需要 4 像素高度的导航按钮 - 在移动设备上很难点击。为了使它们可用，添加了一个 div 作为导航按钮的子级，因此点击区域的高度扩展到 +20px。有没有更好的方法来扩展“热区”？
- 如何排除额外的 div 以免影响焦点矩形区域
关于焦点，你问是否可以在不使用focus()的情况下将焦点保持在按钮上。绝对地。事实上，当您单击一个按钮时，焦点不会移动，除非您专门移动它或者如果您单击的元素被隐藏。因此，如果您希望将焦点放在按钮上，则无需执行任何操作。
这是首选行为 - 将焦点留在按钮上。如果我正在浏览轮播幻灯片并且我是键盘用户，我将 navigate/tab 到“下一步”按钮并按 enter。我将检查幻灯片，如果它不是我想要的，我将再次按 enter（假设我的焦点仍然在“下一步”按钮上）以查看下一张幻灯片。如果您强制将焦点从按钮移到轮播内容，那么我必须先导航回“下一步”按钮，然后才能查看下一张幻灯片。不得不一直导航回我刚刚选择的元素可能会很烦人。
我不明白你的第三个或第四个问题。
您看过关于轮播的两个 W3.org 参考资料了吗？
第1001次实现轮播我想“妥善”处理焦点
几个与此组件的 UI/UX 相关的快速问题：
- 如果使用 TAB 键，箭头和页面导航可以接受焦点。单击事件后我应该将焦点放在箭头按钮上吗？是否可以调用
element.focus()方法 - 就像纯 HTML/CSS 解决方案一样？ - 页面导航区域应该处理箭头键输入 - 同样的问题：按下页面导航按钮后我应该保持焦点吗？可以吗
element.focus()？该组件的 ARIA 角色应该是什么？ - 该设计需要 4 像素高度的导航按钮 - 在移动设备上很难点击。为了使它们可用，添加了一个 div 作为导航按钮的子级，因此点击区域的高度扩展到 +20px。有没有更好的方法来扩展“热区”？
- 如何排除额外的 div 以免影响焦点矩形区域
关于焦点，你问是否可以在不使用focus()的情况下将焦点保持在按钮上。绝对地。事实上，当您单击一个按钮时，焦点不会移动，除非您专门移动它或者如果您单击的元素被隐藏。因此，如果您希望将焦点放在按钮上，则无需执行任何操作。
这是首选行为 - 将焦点留在按钮上。如果我正在浏览轮播幻灯片并且我是键盘用户，我将 navigate/tab 到“下一步”按钮并按 enter。我将检查幻灯片，如果它不是我想要的，我将再次按 enter（假设我的焦点仍然在“下一步”按钮上）以查看下一张幻灯片。如果您强制将焦点从按钮移到轮播内容，那么我必须先导航回“下一步”按钮，然后才能查看下一张幻灯片。不得不一直导航回我刚刚选择的元素可能会很烦人。
我不明白你的第三个或第四个问题。
您看过关于轮播的两个 W3.org 参考资料了吗？