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.
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).