If a developer is surprised to see the focus ring when they click the menu, they might use the following CSS to hide it: But adding a tabindex to an element causes all browsers to show a focus ring on that element if it is clicked with a mouse. Oftentimes they do this because the underlying behavior of focus can be difficult to understand, and styling focus can have surprising consequences.įor example, a custom dropdown menu should use the tabindex attribute to make itself keyboard operable. Unfortunately, many websites hide the focus ring using CSS. Problems with focusįor users who rely on a keyboard or other assistive technology to access the page, the focus ring acts as their mouse pointer - it's how they know what they are interacting with. If a user is tabbing through a form, the focus ring indicates which text field they can type into, or if they've focused a submit button they will know that pressing Enter or Spacebar will activate that button. The focus ring signals to the user which element will receive keyboard events. This is sometimes referred to as the "focus ring" because browsers typically put a solid or dashed ring around the focused element. When a user interacts with an element the browser will often show an indicator to signal that the element has "focus". It will also cause all CSS focus styles to match regardless of the input device that is interacting with the page. The Quick Focus Highlight will always display, even if a page has disabled focus styles using CSS. The Quick Focus Highlight is a user preference that causes the currently focused element to display an indicator for two seconds. This makes styling focus more predictable. The :focus-visible pseudo-class is a CSS selector that lets developers opt-in to the same heuristic the browser uses when it's deciding whether to show a default focus indicator. Chrome 86 introduces two new features that improve both the user and developer experience when it comes to working with focus.
0 Comments
Leave a Reply. |