Attribute “aria-readonly” is unnecessary for elements that have attribute “readonly”.

A field with the readonly attribute is already exposed as read-only, so aria-readonly repeats the same information and can be removed.

The readonly attribute on an <input> or <textarea> tells browsers and assistive technologies that the user can't change the value. Adding aria-readonly="true" states the same thing a second time. The ARIA in HTML specification advises against it, and the validator reports it as a warning.

The same warning appears when aria-readonly repeats the exact value of readonly, as in readonly="readonly" aria-readonly="readonly", or an empty aria-readonly="" next to a bare readonly. In those cases the validator also reports a Bad value error, because aria-readonly only accepts true or false.

Remove aria-readonly and keep readonly. aria-readonly is meant for custom widgets, such as an element with role="textbox" or a grid cell, which have no native readonly attribute. If aria-readonly is set to false on a field with readonly, the two attributes contradict each other, and the validator reports that as an error instead.

Invalid example

<label for="account">Account ID</label>
<input type="text" id="account" name="account" value="AC-1042" readonly aria-readonly="true">

Valid example

<label for="account">Account ID</label>
<input type="text" id="account" name="account" value="AC-1042" readonly>

Learn more:

MDN Reference

MDN Web Docs: aria-readonly

→

MDN Reference

MDN Web Docs: HTML attribute: readonly

→

W3C Reference

W3C: ARIA in HTML

→