HTML5 Contenteditable attribute

Contenteditable is a new attribute in HTML5. This is a global attribute. The properties of the elements such as <p>, <span>, <table> will be overwritten by the contenteditable attribute.

If the author specifies contenteditable attribute to true on a <p> element, the paragraph becomes editable text field. The property inherits to the child element if the contenteditable attribute is used on a parent element. This means, if this attribute is set to true on table element, the properties will also be applied to <th> and <td> elements of the table.

Using HTML5 Contenteditable property

Contenteditable is a global attribute. It has two possible values.

 

  • Contenteditable=”true”: Means the element and its children elements can be editable.
  • Contenteditable=”false”: This is equal to not having the attribute at all.

Browser / Screen Reader support for Contenteditable attribute

Latest JAWS and NVDA supports this attribute. NVDA on Mozilla FireFox an JAWS on Google Chrome seems to have best support.

These elements can also be pulled out from the forms option in NVDA elements list dialog box (NVDA + f7). These items are displayed as unlabeled elements except for those marked with <th>.
NVDA Forms List with Contenteditable elements

When JAWS forms list dialog box is pulled (JAWS + f5) only the <span> with contenteditable is displayed and that too on Google Chrome.

Example

Below are few examples with contenteditable attribute set to true.

Contenteditable on a paragraph element

This paragraph can be edited by the user.

Content editable to true on a table element

Name 1 Name 2
ABC DEF

Contenteditable to true on a span element.

This content is editable span element

Observe that the above elements can be navigated with tab key considering them as form elements, edit text command of NVDA “e” and can be pulled from elements list dialog under forms in NVDA.

Comments are closed.