Focus Indicator

The focus indicator is a visible outline or highlight around the active interactive element. The focus indicator provides an important visual cue indicating which interactive element currently active. This is particularly useful for users who navigate the webpage using input devices other than a mouse.

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

Most of the user agents have their own default focus indicators. Hence, avoid providing a custom focus indicator unless required.
Select a color that provides a clear and sufficient contrast against the background to meet the contrast requirement as listed under the Color Requirements.
Ensure the shape and pattern of the focus indicator is clearly visible, such as a rectangle with solid line.
Ensure the focus indicator does not obscure any content or interfere with the user's ability to interact with the page.
Ensure that the visual focus indicator is visible around the currently focused interactive element.
A focus indicator can be shown by change in color of the interactive elements such as background, text color and so on.
Various types of focus indicators CAN be used such as border, box, underline and so on.
Focus indicators SHOULD be defined using CSS focus pseudo class.
- CSS properties such as outline-offset, outline, box-shadow, background-color and so on CAN be used.
  - outline-offset: This property specifies the space between the outline and border of an interactive element such as border of an input field.
  - outline-style: Used to define the style of the focus indicator.
  - outline-color: Used to define the color of the focus indicator.
  - outline-width: Used to define the width of the focus indicator.
  - outline: This property specifies the outline-width, outline-style, and outline-color in one declaration.
  - box-shadow: Used to provide shadow effect to an element when it receives focus.
  - background-color: Used to define the background color of the element when it receives focus.
While defining a focus indicator, outline:0 or outline:none SHOULD NOT be used.
The color of the focus indicator SHOULD NOT be same as the background color as this affects visibility.

For example,

<!-- Default focus indicator of Chrome browser -->
<!-- HTML example 1: -->
<label for="fullname">Name</label>
<input type="text" id="fullname">

<!-- CSS example 1: -->
<style>
:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

input:focus-visible {
    outline-offset: 0px;
}
</style>
  
<!-- Custom defined focus class -->
<!-- HTML example 2: -->
<button>Submit</button>

<!-- CSS example 2: -->
<style>
button:focus {
    outline: 0.1em solid #000000;
    outline-offset: 1px;
}
</style>

<form>
    <div class="container">  
        <h2>Register</h2>
        <p>Please fill in this form to create an account.</p>
        <label for="fullname">Name</label>
        <input type="text" id="fullname">
        
        <div>
            <fieldset>
                <legend><strong>Gender</strong></legend>
                <input type="radio" id="option1" name="options" value="1">
                <label for="option1">Male</label>
                
                <input type="radio" id="option2" name="options" value="2">
                <label for="option2">Female</label>
            </fieldset>
        </div>

        <label for="role_select">Role</label>
        <select id="role_select">
            <option value="Educator">Educator</option>
            <option value="Learner">Learner</option>
        </select>
        
        <div class="inline">
            <input type="checkbox" id="myCheckbox">
            <label for="myCheckbox" style="font-size: 14px;">
                I agree to the Terms of Use and acknowledge the Privacy Policy.
            </label>
        </div>
        <button>Submit</button>
        <span>Have a Pearson account? <a href="https://www.pearson.com/en-us.html"> Sign in.</a></span>
    </div>
</form>

body {
    font-family: Arial, Helvetica, sans-serif;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
}

:focus{
    outline: .10em solid #000000;
}

.container {
    display: flex;
    flex-direction: column;
    width: 30vw;
    padding: 1rem;
    border: 3px solid #7f7f7f;
}

h1, span {
    text-align: center;
    margin: 0.5em;
}

input[type=text] {
    margin: 0.25em 0em 1em 0em;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

select {
    margin: 0.25em 0em 1em 0em;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

button {
    padding: 0.75em;
    border: none;
    background-color: #003057;
    color: white;
    border-radius: 40px;
    font-size: 16px;
}

button:hover {
    background-color: #037d76;
}

button:focus {
    outline: .10em solid #000000;
    outline-offset: 1px;
}

h1 {
    text-align: center;
}

.inline {
    display: inline-flex;
    margin: 0.5em;
}

fieldset {
    margin: 0.5em;
}

#myCheckbox {
    margin-right: .5rem;
}

@media screen and (max-width: 600px) {
    .container {
        width: 80%;
    }
}

@media screen and (max-width: 900px) {
    .container {
        width: 60%;
    }
}

Focus Indicator

Color Requirements

Implementation

Why is it important

Working Example