aria-readonly attribute on <input>
← Return to main list
The boolean aria-readonly attribute makes the element not mutable (not changable), meaning the user can not edit the control.
Example with aria-readonly
Example with aria-readonly
Code
<div class="form-group">
<label for="aaa">Full name</label>
<input id="aaa" type="text" value="Hello" aria-readonly="true">
</div>
<div class="form-group">
<label for="bbb">Full name</label>
<input id="bbb" type="text" value="Hello">
</div>
Assistive technologies
VoiceOver
- Chrome:
Hello. Content selected. Full name. Edit text. [readonly not announced]
Hello. Content selected. Full name. Edit text.
- Firefox:
Hello. Insertion on word: Hello. between characters: and Full name. Edit text. [readonly not announced]
Hello. Insertion on word: Hello. between characters: and Full name. Edit text.
- Safari:
Hello. Content selected. Full name. Edit text. [readonly not announced]
Hello. Content selected. Full name. Edit text.
NVDA
- Chrome:
Full name. Edit. Selected. Hello. [readonly not announced]
Full name. Edit. Selected. Hello.
- Firefox:
Full name. Edit with autocomplete. Selected. Hello. [readonly not announced]
Full name. Edit with autocomplete. Selected. Hello.
- Edge:
Full name. Edit. Selected. Hello. [readonly not announced]
Full name. Edit. Selected. Hello.
JAWS
- Chrome:
Full name. Edit. Hello. Type in text. [readonly not announced]
Full name. Edit. Hello. Type in text.
- Firefox:
Full name. Edit. Hello. Type in text. [readonly not announced]
Full name. Edit. Hello. Type in text.
- Edge:
Full name. Full name. Edit. Hello. Type in text. [readonly not announced]
Full name. Edit. Hello. Type in text.
← Return to main list