Focus

When to show focus outline

When to show focus outline
  1. What is focus outline?
  2. Should I use focus or focus-visible?
  3. What elements should be focusable?
  4. What is the purpose of testing for 2.4 7 focus-visible?

What is focus outline?

Focus outline provides visual feedback for users who can't use a mouse, or have visual impairment, when using Tab on their keyboard for navigation. example.css. /* 🚫 don't do this */ :focus outline: none;

Should I use focus or focus-visible?

Adding the :focus pseudo-class to an element will make it show a focus specific styles and disregard browsers heuristics. The :focus-visible , in contrast, applies custom styling only if it would be shown natively. It's a win-win situation, a nice custom look and years of research in one CSS property.

What elements should be focusable?

Elements of the following type are focusable if they are not disabled: input , select , textarea , button , and object . Anchors are focusable if they have an href or tabindex attribute. area elements are focusable if they are inside a named map, have an href attribute, and there is a visible image using the map.

What is the purpose of testing for 2.4 7 focus-visible?

The purpose of this success criterion is to help a person know which element has the keyboard focus. “Mode of operation” accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used.

Right side drawer in a web app
What are drawers on a website?What are drawers in UI?What is a drawer in mobile? What are drawers on a website?The side drawer allows you to save on...
Which guideline includes Accessibility when using Nielsen's Heuristics?
What are the characteristics of Nielsen's heuristic?Is accessibility a heuristic?How many heuristic principles was stated by Nielsen? What are the c...
How to make an accessible RWD multi-level main navigation without hamburger menu?
How do you make a hamburger menu accessible?What is multi level menu?What is a hamburger on a website? How do you make a hamburger menu accessible?W...