简体繁体 English

如何处理焦点和定义 ARIA 角色

[英]How to handle focus and define ARIA roles

原文 2021-10-23 14:08:57 6 1 javascript/ html/ reactjs/ user-experience/ wai-aria

In the 1001st implementation of carousel I would like to "properly" handle the focus.在轮播的第 1001 次实现中，我想“正确”处理焦点。 The cyan arrow buttons are fine.青色箭头按钮很好。 They have role="button".他们有角色=“按钮”。

A few quick questions related to UI/UX of this component:一些与此组件的 UI/UX 相关的快速问题：

the arrows and the page navigation can accept focus if the TAB key is used.如果使用 TAB 键，箭头和页面导航可以接受焦点。 Should I keep the focus on the arrow button after a click event?单击事件后，我应该将焦点放在箭头按钮上吗？ Is it possible to do it wo calling element.focus() method - like pure HTML/CSS solution?是否可以通过调用element.focus()方法来做到这一点 - 就像纯 HTML/CSS 解决方案一样？
the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button (the tiny greyish rect) is pressed?页面导航区域应该处理箭头键输入 - 同样的问题：一旦按下页面导航按钮（微小的灰色矩形），我应该保持焦点吗？ Is it doable wo element.focus() ? wo element.focus()可行吗？ What should be ARIA role for this component?这个组件的 ARIA 角色应该是什么？
the design requires 4px height navigation buttons - really hard to click on mobile.该设计需要 4px 高度的导航按钮 - 在移动设备上真的很难点击。 In order to make them useable, a div is added as a child of a navigation button (the pink areas).为了使它们可用，添加了一个 div 作为导航按钮（粉红色区域）的子项。 Is there better way to extend the "hot zone"?有没有更好的方法来扩展“热区”？
how can I exclude the redish divs so that the focus rectangle is as shown (a dirty solution is to put outline: none to parent component and to use :focus selector)如何排除红色 div 以便焦点矩形如图所示（一个肮脏的解决方案是将轮廓：无添加到父组件并使用:focus选择器）

1 个解决方案

Regarding focus, you ask if the focus can be kept on the buttons without using focus() .关于焦点，您询问是否可以在不使用focus()情况下将focus()保持在按钮上。 Absolutely.绝对地。 In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden.事实上，当你点击一个按钮时，焦点不会移动，除非你特意移动它或者你点击的元素被隐藏了。 So if your desire is to leave the focus on the button, then you don't have to do anything.因此，如果您希望将焦点放在按钮上，那么您无需执行任何操作。

That's the preferred behavior - leave the focus on the button.这是首选行为 - 将焦点放在按钮上。 If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter .如果我正在浏览轮播幻灯片并且我是键盘用户，我将导航/标签到“下一步”按钮并按enter 。 I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide.我将查看幻灯片，如果它不是我想要的，我将再次按Enter （假设我的注意力仍停留在“下一个”按钮上）以查看下一张幻灯片。 If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide.如果您强制焦点从按钮移到轮播内容，那么我必须导航回“下一个”按钮才能查看下一张幻灯片。 It can be annoying to have to keep navigating back to the element I just selected.不得不继续导航回我刚刚选择的元素可能会很烦人。