如何处理焦点和定义 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 参考资料了吗?