All rules

Sheath rule

a11y-no-autofocus

Avoid the autofocus attribute as it can cause accessibility issues.
Package
Core
Category
Accessibility
Default severity
warning by default
Auto-fix
Auto-fix available

(dangerous)

#Why

autofocus moves focus and the viewport without user input. This can skip important context for screen reader users and disorient users of magnification tools.

#Examples

#Bad

<!-- Autofocus on input -->

<input type="text" autofocus>



<!-- Autofocus on button -->

<button autofocus>Submit</button>



<!-- Autofocus on textarea -->

<textarea autofocus></textarea>



<!-- Autofocus with other attributes -->

<input type="search" autofocus placeholder="Search...">

#Good

<!-- Let users navigate naturally -->

<input type="text">



<!-- No autofocus on buttons -->

<button>Submit</button>



<!-- Use JavaScript for conditional focus when appropriate -->

<input type="text" id="search">

<script>

    // Focus only when user intends to search

    document.getElementById('search-toggle').addEventListener('click', () => {

        document.getElementById('search').focus();

    });

</script>

#Auto-fix

The fixer removes the autofocus attribute. This is marked as a dangerous fix because it changes page behavior:

<!-- Before -->

<input type="text" autofocus>



<!-- After -->

<input type="text">

The fix is withheld when the autofocus value is dynamic (for example a Blade echo), since removing the attribute would delete the expression with it.

#Notes

  • Skip links let a user reach the main content on their own terms, rather than having focus moved for them
  • If autofocus is necessary, ensure it's the first focusable element
  • Use JavaScript focus management for modals and dialogs instead
  • WCAG 2.2 Success Criterion 3.2.1 (On Focus) relates to this issue

#References

#Related Rules