The HTML aria-required attribute
Setting aria-required="true" tells assistive technology that a widget needs input before its form is submitted. Nothing enforces it, so an empty field with only this attribute still submits. On native fields, the HTML required attribute exposes the same state and blocks the submission too.
Overview
With aria-required, a widget declares that it needs user input before its form can be submitted. It mainly serves custom controls such as a <div role="textbox">, which can't use HTML's required attribute. It can go on HTML form elements too, not only on elements with an ARIA role.
It's supported on checkbox, combobox, gridcell, listbox, radiogroup, spinbutton, textbox and tree. The radio role isn't there, so in a custom radio group the attribute belongs on the radiogroup. Roles such as searchbox and switch inherit it.
A form whose empty input, select and checkbox carry aria-required="true" still submits, with no invalid event. The input's valueMissing stays false and checkValidity() returns true.
A custom textbox sits even further from the form. A contenteditable <div> isn't a form control, so it's absent from form.elements and from FormData. If such a box is empty, your script has to stop the submission. When it holds text, the script has to send that text as well.
Authors may use aria-required wherever HTML allows required, but ARIA in HTML names the native attribute first. It discourages pairing the two with true, and bans pairing them with false. Inputs in a novalidate form can keep required too, since they're still exposed as required.
Syntax
<span id="msg-label">Gift message *</span>
<div role="textbox" contenteditable="true" style="border:1px solid"
aria-labelledby="msg-label" aria-required="true"
aria-multiline="true"></div>Values
| Value |
|---|
| true | false |
Example
<form id="gift">
<p id="label" style="margin:0 0 4px">Gift message *</p>
<div id="message" role="textbox" contenteditable="true" aria-labelledby="label" aria-required="true" aria-multiline="true" style="border:1px solid #767676;padding:6px;min-height:32px"></div>
<p style="margin:8px 0"><button>Send gift</button></p>
<p id="out" role="status" style="overflow-wrap:anywhere"></p>
<p>Press Send gift with the box empty, then type a message and press it again. The * marks a required field.</p>
</form>
<script>
const form = document.getElementById('gift');
const box = document.getElementById('message');
const out = document.getElementById('out');
form.addEventListener('submit', function (e) {
e.preventDefault();
const text = box.innerText.trim();
box.setAttribute('aria-invalid', String(!text));
out.textContent = text
? 'Sent: ' + text
: 'The script stopped this. aria-required alone would have let it through.';
});
</script>Best practices
- Mark an
aria-requiredfield visibly as well, such as with an asterisk, since color isn't enough. - When the visible label already contains the word required, leave the attribute out, so screen readers don't read the word twice.
- Put it on the element with the form-control role, such as the textbox a user has to fill in, not on a plain wrapper around it.
- Report a missing value with aria-invalid once the user has tried to submit, not before.
Frequently asked questions
Does aria-required do the same job as the required attribute?
Should a native radio button use aria-required?
Do optional fields need aria-required=false?
Which selector styles a field marked with aria-required?
[aria-required=true]. CSS :required matches input, select and textarea elements with the required attribute, so aria-required alone doesn't trigger it.Can aria-required block a form at all?
preventDefault() there when it's empty.
