How to indicate to screen readers that content is inline editable?

Question

My product has an area where we want to display a default value (let's say the name of a document page), but when the user focuses on it and hits the space bar, it becomes an editable field. We are trying to write accessible code, and I was wondering if anyone had guidance about how to indicate to someone using a screen reader that this content is editable?

The way we are currently handling it in the code is to have a div with the name and when the user clicks (or focuses and hits space bar), it turns into an input. (They can hit enter or a button to save.) Are there ARIA values we could leverage for this or some other native solution?

Default:

<div>Page title <button>Click to edit page title</button></div>

When editing:

<input maxlength="500" value="Page title" />

We don't have a button to save right now. You hit enter or remove focus from the input, and it automatically updates.

Celerity

why do people have to click / press space to edit? Is there a use case for that or could you just make it an input styled one way when not focused (so it just looks like text with a subtle hint that it is editable) and style it a different way when focused (with save on focus lost or via enter), that would remove a lot of accessibility workarounds and also make it a nicer experience for everyone. – Karim

Agree with @GrahamRitchie by making it an input element from the beginning you don't have to do much other than styling which would be a good practice in terms of accessibility. – Zoon

Makes sense, I'll look into whether I can restyle an input to match the design specs they're asking for. Thank you – Celerity

Answer 1

The ARIA in HTML document defines "Element with contenteditable attribute" as having an implicit aria-readonly="false" attribute. This property is only available for some ARIA roles according to ARIA documentation and the textbox role is the more appropriate in your case. In this case no button is needed.

If your editable section does not contain HTML code (like links), it seems useless to use a contenteditable section and you should use instead standard input or textarea elements with appropriate CSS design, respectful of WCAG standards (i.e. Editable fields have to be distinguishable from text)

If your editable section does contain HTML code, then you would have to use a contenteditable atttribute. You have to identify the section as being a role=textbox element and it must be focusable with tabindex=0 attribute. This can be done on page load (without button), or after clicking a button outside the section (if you need, for instance, to be able to activate the inner links in normal reading context).

Thurlow