Simple Text Inline Edit solutions considered

Goals of inline edit

High-level goal

Making quick, on-the-fly edits to [fluid:small bits of] text.

Core interaction model

In-focus to edit, out-of-focus to save/finish

Solutions considered

Solution #1: No buttons (not really, at least)

To edit:
- Any focus on editable text: click using mouse, or tab to and press enter

To save:
- Press enter, or
- Unfocus/blur: click outside using mouse, or tab out

Notes:
- No visual buttons, but the editable text reads as a button to screen readers

Pros:
- Maintained the core interaction model (in-focus to edit, out-of-focus to finish)

Cons:
- Editable text reading as a button is semantically confusing/inaccurate
- Screen reader users may not know how to save edits

Solution #2: Hidden buttons

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to hidden edit button and press enter

To save:
- Press enter, or
- Tab to hidden save button and press enter, or
- Unfocus/blur: tab twice to get out of edit mode, or click outside using mouse

Notes:
- Hidden edit button has aria-role of button

Pros:
- Fixes "editable text as button" semantics problem from solution #1
- Screen reader users know to save by focusing on the save button and pressing enter

Cons:
- For visual users, first tab goes nowhere, and two tabs are needed to get out of focus
- Screen readers users have no foreknowledge that there's a save button after the text field

Solution #3: Visible buttons

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Tab to visible save button and press enter, or
- Click save button, or
- Unfocus/blur: tab twice to get out of edit mode, or click outside

Pros:
- More transparent and honest to the user
- Makes affordances for edits and saves very explicit

Cons:
- Users are trained to use inline edit with button clicks, which breaks core interaction model of a quick in-focus to edit and out-of-focus to save

Solution #4: aria describedby

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Unfocus/blur: tab once or click outside using mouse

Notes:
- No save button
- Edit button/icon has aria-role of button
- Edit area has an aria describedby which gives instructions to screen reader users ("Press ESC to cancel, and enter or tab to finish")

Solution #5: aria tooltip + describedby

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Unfocus/blur: tab once or click outside using mouse

Notes:
- No save button
- Edit button/icon has aria-role of button
- Edit area has a tooltip with instructions
- Edit area has an aria describedby which points to an aria tooltip which gives instructions to screen reader users ("Press ESC to cancel, and enter or tab to finish")