I
Ilknur
Guest
A small CSS decision can have a much bigger impact on how easily someone is able to navigate your website.
We can adjust a property's outline’s width, style and color with the
Sometimes developers use this property to completely remove the outline an element might have on focus. For example:
It feels like a small design request. A designer might not want an outline on focus and the page might not match the mockup. A developer takes the request, adds 3 lines of code and removes the outline. The page passes automatic accessibility checks and the team believes the task is done. However, the little outline has a big accessibility task. When the outline is gone, some people may not be able to use the page at all. This article will cover why the outline is important for accessibility, WCAG standards and how to fix the issue in an accessible way.
The outline is the browser's way of showing which element has focus. Focus is the one spot on the page that's ready to receive keyboard input right now. Press Tab, and focus moves to the next link, button, or form field. Press Enter or Space, and you activate whatever has focus.
If you use a mouse, you rarely think about this. Your cursor shows you where you are.
But many people don't use a mouse. Some use only a keyboard. Some use a switch device, a sip-and-puff controller, or voice commands that mimic keyboard actions. Some have tremors that make a mouse hard to control. And plenty of people use the keyboard simply because it's faster.
For all of them, the focus outline is the cursor. Remove it, and they're pressing Tab through an invisible page. They know they're somewhere. They just can't see where.
Open any page. Press Tab a few times. Can you tell where you are? Can you tell when you've landed on the link you want? If the answer is no, that page has a focus problem.
WCAG (the Web Content Accessibility Guidelines) is the international standard most accessibility laws and audits point to. Each rule is called a "success criterion" and has a level: A is the baseline, AA is what most organizations aim for, and AAA goes further.
A few rules apply directly to focus. Here they are in plain language.
2.1.1 Keyboard (Level A). Everything you can do with a mouse, you must be able to do with a keyboard. Removing the outline doesn't break this rule on its own. But it makes keyboard use so hard that it often fails in practice.
2.4.7 Focus visible (Level AA). When an element has keyboard focus, there must be a visible indicator. This is the rule outline: none breaks. It's also the single most common focus failure in audits.
1.4.11 Non-text contrast (Level AA). Visual indicators, including focus rings, need at least 3:1 contrast against the colors next to them. A pale gray ring on a white background looks tidy but fails this rule.
2.4.11 Focus not obscured, minimum (Level AA, new in WCAG 2.2). The focused element can't be fully hidden behind something else, like a sticky header or a cookie banner. If a user tabs to a link and it's covered up, that's a failure.
2.4.13 Focus appearance (Level AAA, new in WCAG 2.2). This sets a specific size and contrast for the indicator itself. The ring should be at least as large as a 2-pixel border around the element, with 3:1 contrast between its focused and unfocused states. It's AAA, so not required for most audits, but it's a good target. The examples below meet it.
If you're aiming for AA, the checklist is short: every focusable element shows a visible indicator, that indicator has 3:1 contrast, and nothing hides the focused element from view.
You're allowed to change the outline design. You just have to keep a visible one. Pick a color and thickness that fits your design and passes contrast checks.
outline-offset adds a little space between the element and its ring. It helps the outline stand out against busy backgrounds.
A focus style can be technically present but still hard to see. Check it against:
Remember the 3:1 contrast rule from 1.4.11. A two-color ring, such as a dark outline with a light inner shadow, works on almost any background:
The focus outline is not decoration. It's how a whole group of people navigate. Remember to include a focus indicator for users that rely on keyboard navigation.
We can adjust a property's outline’s width, style and color with the
outline property.
Code:
outline: [width] [style] [color];Sometimes developers use this property to completely remove the outline an element might have on focus. For example:
Code:
button:focus {
outline: none;
}It feels like a small design request. A designer might not want an outline on focus and the page might not match the mockup. A developer takes the request, adds 3 lines of code and removes the outline. The page passes automatic accessibility checks and the team believes the task is done. However, the little outline has a big accessibility task. When the outline is gone, some people may not be able to use the page at all. This article will cover why the outline is important for accessibility, WCAG standards and how to fix the issue in an accessible way.
What the outline is for
The outline is the browser's way of showing which element has focus. Focus is the one spot on the page that's ready to receive keyboard input right now. Press Tab, and focus moves to the next link, button, or form field. Press Enter or Space, and you activate whatever has focus.
If you use a mouse, you rarely think about this. Your cursor shows you where you are.
But many people don't use a mouse. Some use only a keyboard. Some use a switch device, a sip-and-puff controller, or voice commands that mimic keyboard actions. Some have tremors that make a mouse hard to control. And plenty of people use the keyboard simply because it's faster.
For all of them, the focus outline is the cursor. Remove it, and they're pressing Tab through an invisible page. They know they're somewhere. They just can't see where.
Open any page. Press Tab a few times. Can you tell where you are? Can you tell when you've landed on the link you want? If the answer is no, that page has a focus problem.
What WCAG says
WCAG (the Web Content Accessibility Guidelines) is the international standard most accessibility laws and audits point to. Each rule is called a "success criterion" and has a level: A is the baseline, AA is what most organizations aim for, and AAA goes further.
A few rules apply directly to focus. Here they are in plain language.
2.1.1 Keyboard (Level A). Everything you can do with a mouse, you must be able to do with a keyboard. Removing the outline doesn't break this rule on its own. But it makes keyboard use so hard that it often fails in practice.
2.4.7 Focus visible (Level AA). When an element has keyboard focus, there must be a visible indicator. This is the rule outline: none breaks. It's also the single most common focus failure in audits.
1.4.11 Non-text contrast (Level AA). Visual indicators, including focus rings, need at least 3:1 contrast against the colors next to them. A pale gray ring on a white background looks tidy but fails this rule.
2.4.11 Focus not obscured, minimum (Level AA, new in WCAG 2.2). The focused element can't be fully hidden behind something else, like a sticky header or a cookie banner. If a user tabs to a link and it's covered up, that's a failure.
2.4.13 Focus appearance (Level AAA, new in WCAG 2.2). This sets a specific size and contrast for the indicator itself. The ring should be at least as large as a 2-pixel border around the element, with 3:1 contrast between its focused and unfocused states. It's AAA, so not required for most audits, but it's a good target. The examples below meet it.
If you're aiming for AA, the checklist is short: every focusable element shows a visible indicator, that indicator has 3:1 contrast, and nothing hides the focused element from view.
What to do instead
Style it, don't delete it
You're allowed to change the outline design. You just have to keep a visible one. Pick a color and thickness that fits your design and passes contrast checks.
Code:
:focus {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
}outline-offset adds a little space between the element and its ring. It helps the outline stand out against busy backgrounds.
Make sure it's visible everywhere
A focus style can be technically present but still hard to see. Check it against:
- Dark backgrounds and light backgrounds
- Images and colored buttons
- Elements at the edge of a container, where the ring might get clipped by overflow: hidden
Remember the 3:1 contrast rule from 1.4.11. A two-color ring, such as a dark outline with a light inner shadow, works on almost any background:
Code:
:focus {
outline: 3px solid #1a5fb4;
box-shadow: 0 0 0 5px #ffffff;
}Conclusion
The focus outline is not decoration. It's how a whole group of people navigate. Remember to include a focus indicator for users that rely on keyboard navigation.