# Attribute “aria-readonly” must not be specified with a different value than attribute “readonly”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-aria-readonly-must-not-be-specified-with-a-different-value-than-attribute-readonly
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A field with the `readonly` attribute has an `aria-readonly` value that doesn't match it: remove `aria-readonly` and keep the native attribute.

`aria-readonly` only accepts `true` or `false`. A value such as `TRUE`, `1`, `undefined` or `readonly` is neither, so the validator reports two errors on the same field: a `Bad value` error for `aria-readonly`, and this one, because the value differs from what `readonly` states. Values like these usually come from a template that prints a variable straight into the attribute, for example a boolean that the template language writes as `1` or `True`.

The `readonly` attribute already exposes the read-only state to assistive technologies, so the field doesn't need `aria-readonly` at all. Remove it. If you're building a custom widget that has no native `readonly` attribute, such as an element with `role="textbox"`, write `aria-readonly` as exactly `true` or `false`.

Other values give different messages. `aria-readonly="false"` next to `readonly` is its own error, because it contradicts the native attribute. `aria-readonly="true"`, or a value that exactly repeats the value of `readonly` (such as `readonly="readonly" aria-readonly="readonly"`), only gets a warning that the attribute is unnecessary.

## Invalid example

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

## Valid example

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