Focus Order – Initial focus on edit field

The initial focus is a technique that is used to set the focus on a particular element when any application or website is loaded. For example, when a user opens a form on a website, the initial focus might be set on the first input field of the form instead of the start of the page.

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.

<form>
    <div class="form-control">
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" id="firstname" autocomplete="given-name" autofocus>
    </div>
    <div class="form-control">
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname" autocomplete="family-name">
    </div>
    <div class="form-control">
        <label for="email">Email</label>
        <input type="email" id="email" autocomplete="email" name="email">
    </div>
    <div class="form-control">
        <label for="phone">Phone</label>
        <input type="tel" name="phone" autocomplete="tel" id="phone" maxlength="14">
    </div>
</form>

input {
    display: block;
    margin-bottom: 0.2rem;
    padding: 0.8rem;
    border: 1px solid #000000;
    line-height: 1.15;
    width: 40%;
    border-radius: 4px;
}

.form-control {
    margin-bottom: 0.8rem;
}

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

form {
    margin-bottom: 10%;
}

@media screen and (max-width: 600px) {
    input, textarea {
        width: 90%;
    }
}

window.addEventListener('DOMContentLoaded', function() {
    var element = document.getElementById('firstname');
    element.focus();
});

Focus Order – Initial focus on edit field

Implementation

Why is it important

Working Example