Indicate required fields for screen readers

Screen readers announce form fields as required if they have the HTML attributes aria-required="true" or required on the form field.

Basic HTML examples

Using aria-required=”true”


<label for="name">Your name (required)</label>
<input
    id="name"
    type="text"
    name="name"
    autocomplete="name"
    aria-required="true"
    aria-invalid="false"
/>

Using required

<label for="name">Your name (required)</label>
<input
    id="name"
    type="text"
    name="name"
    autocomplete="name"
    required
    aria-invalid="false"
/>

The attribute required triggers the client-side form validation of the browser.

Client side validation may create accessibility and usability issues. The topic about feedback on form errors will address this in more detail.

If you decide to use required, also use novalidate on the form element to prevent the browser’s form validation from kicking in and enable you to handle validation server-side.

<form action="some-url" novalidate>

Note: the use of aria-invalid will be addressed later in the section Feedback on form errors.

Using aria-required or required in WordPress plugins

Gravity Forms

Gravity Forms adds aria-required="true" to required fields.

Other WordPress form plugins

We’d like to invite people familiar with form plugins to help us add instructions for WordPress form plugins. Like possibilities, settings and screenshots. Please contact us if you want to help us with this additional content.

WCAG Success Criteria

By indicating required fields, you meet WCAG success criterion 3.3.2 Labels or Instructions (Level A).

Resources

View this page on GitHub