# Move Focus to the First Invalid Form Field

> When a visitor submits a form with missing or invalid fields, moves keyboard focus to the first problem field and announces the browser's error message to screen readers.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: forms, validation, focus
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-focus-first-invalid-field/

## Code

```html
<div id="wpide-form-errors" role="alert" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"></div>
<script>
(function () {
    var region = document.getElementById('wpide-form-errors');
    var handled = false;
    document.addEventListener('invalid', function (event) {
        var field = event.target;
        if (handled) { return; }
        handled = true;
        setTimeout(function () { handled = false; }, 100);
        var label = '';
        if (field.labels && field.labels[0]) { label = field.labels[0].textContent.trim(); }
        label = label || field.getAttribute('aria-label') || field.name || 'A field';
        if (region) { region.textContent = label + ': ' + field.validationMessage; }
        field.setAttribute('aria-invalid', 'true');
        field.focus();
        field.addEventListener('input', function () { if (field.checkValidity()) { field.removeAttribute('aria-invalid'); } }, { once: true });
    }, true);
})();
</script>
```

## Notes

Uses the browser's built-in form validation, so it works with any form that uses required, type="email" and similar attributes.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Move Focus to the First Invalid Form Field" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/