`readonly` attribute on `<textarea>`

← Return to main list

The boolean readonly attribute makes the element not mutable (not changable), meaning the user can not edit the control. The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled.

Example with readonly

Example without readonly

Code

<div class="form-group">
  <label for="aaa">Comment</label>
  <textarea id="aaa" readonly="readonly" rows="5">
    Hello
  </textarea>
</div>

<div class="form-group">
  <label for="bbb">Comment</label>
  <textarea id="bbb" rows="5">
    Hello
  </textarea>
</div>

Assistive technologies

VoiceOver

Chrome:
Comment. Clickable. Text. Hello.
Comment. Edit text. Hello, Insertion at beginning of text.
Firefox:
Comment. Edit text. Hello. Insertion at beginning of text. [readonly not announced]
Comment. Edit text. Hello. Insertion at beginning of text.
Safari:
Comment. Text. Hello. [Does not announce "Edit" so passes]
Comment. Edit text. Hello. Insertion at beginning of text.

NVDA

Chrome:
Comment. Edit. Read only. Multi-line. Hello.
Comment. Edit. Multi-line. Hello.
Firefox:
Comment. Edit. Read only. Multi-line. Hello.
Comment. Edit. Multi-line. Hello.
Edge:
Comment. Edit. Read only. Multi-line. Hello.
Comment. Edit. Multi-line. Hello.

JAWS

Chrome:
Comment. Read only. Edit. Hello.
Comment. Edit. Contains text. Type in text.
Firefox:
Comment. Edit. Read only. Type in text.
Comment. Edit. Type in text.
Edge:
Comment. Comment. Read only. Edit. Hello.
Comment. Edit. Hello. Type in text.