Accessibility/RichContentKeyboardBehaviour

Summary

The article proposes a model of keyboard navigation through the web page content that can contain the rich text and UI elements. The keyboard navigation is enabled if the caret navigation mode is on or if the content is editable.

The keyboard navigation behaviour is considered under condition the following elements can be presented within keyboard navigable area.

• simple elements
  • simple text container elements (e.g. HTML:p)
  • structural elements (e.g. HTML:table)
• special content elements
  • integral elements
    • a non-editable element (e.g. HTML:span with contentEditable="false")
    • control elements
      • native control elements (e.g. HTML:form elements)
      • ARIA widgets (e.g. HTML:div with role="button")
  • compound elements
    • focusable elements (e.g. HTML:div with tabindex="0", HTML:a)

Special content element as a lexical unit

Special content element is a word

The special content element should be treated as a word when the user navigates through editable area.

The compound element will be referred as a compound word (for example, HTML anchor), any other element as a word (for example, HTML button). The term special word will be used to emphasize the word is represented by a special content element.

The number of characters of the special word depends on whether this is compound word or not. If the word is not compound then it hasn't any characters and it will be referred as an empty word. Otherwise the word contains all characters of the element's content.

In that way non editable area is treated as an empty word if caret navigation mode is turned off. Otherwise it is treated as a compound word consisted of a number of words equaled to a number of words non editable element consists of. The control element is treated as an empty word. The focusable compound element consists of a number of words equaled to a number of words of the element's content and it doesn't depend on caret navigation mode state.

Boundaries of the special word

The special word boundaries are designated by special autogenerated empty characters, used as a word delimiters. If the special content elements are placed each after other then each of them has empty character embedded between them, i.e. the elements don't share empty characters.

The empty characters are not presented visually, however they participate in keyboard navigation as normal characters.

In the following example

text<button>btn</button><a>link</a>text

conditional notation can be presented as "text|||link|text", where the empty character is marked by '|' symbol. Both the empty word for the button and the compound word for the link are wrapped by empty characters ('|' symbols of blue and red colors correspondingly).

The caret position and selection terms

If the caret position is immediately before/after left/right empty character of the special content element then it will be referred as the caret is immediately before/after the element.

If the caret position is between empty characters of the sibling special content elements then it will be referred as the caret is between the elements.

If the caret position is between empty characters of the integral element then it will be referred as the caret is on the element.

If the selection contains both empty characters of the special content element then it will be referred as the element is selected entirely.

Keyboard interaction with special content

In general special content behaviour on keyboard input is the same as usual. However there are subtleties that will be discussed in next sections.

No additional rules for non editable areas. The behaviour is defined by caret navigation mode.

Focusable compound elements have behaviour matched caret navigation mode.

Control elements has normal behaviour if focused and control action can be performed on pressed key. Otherwise editor rules are applied.

For example, if textbox (HTML:input) is focused then arrow keys move through its text. If caret reaches the end of the text then editor takes the focus and caret position is set immediately after the textbox element. If listbox (HTML:select) is focused then up/down arrow keys change selected item, if the last listbox option is selected and arrow down key is pressed then editor takes the focus and caret is moved to the text or control element placed below the listbox control. The exception might be made for combobox element when its popup is open which should be closed by user before he can continue the navigation and editor can take the focus.

Keyboard navigation

Navigation by words

If the editor is focused, i.e. the caret position is somewhere in the middle of the editable text, if the user navigates by words (ctrl + arrow key or alt + arrow depending on platform) and special content element is encountered on the way then the special content element should be skipped, i.e. the caret should be moved from the position before the element to the position after the element, the editor should stay focused.

If the control element is focused and the user navigates by words then

1. caret position should be moved after the control element if no action can be performed on the control element on the pressed key
2. otherwise the control's action should be invoked.

It's a rare case when control element has an action on the "move to the next/previous word" keyboard combination. The example of such control is textbox (like HTML input element) containing several words. In this case the user should navigate consecutively to the last word of textbox and then leave the control, i.e. editor should take the focus and caret should be set immediately after the control.

If the compound element is focused, the caret is somewhere in the middle of element's content and the user navigates by words then the caret should be moved by constituent words of the element until it reaches the end of the element's content. Then editor should take the focus and the caret should be set after the element. The behaviour is similar to described above behaviour of textbox.

Navigation by characters

If the user navigates through editable area by characters and special content element is encountered on the way then

1. if the element is focusable then it should be focused

and

1. if the element is compound then caret position should be set before the first character of the element's content
2. otherwise the caret should be set on the element.

For example, if the control element is disabled or if the caret navigation mode is off and the element is non editable area then the caret should be set on the element, the editor should stay focused. Visually it might look like dashed border around the element.

If the control element is focused and the user navigates by characters then

1. editor should be focused and caret position should be set after the control element if no control action can be performed on the pressed key
2. otherwise control action should be performed.

For example if two buttons (HTML button) are placed after another

text<button>btn1</button><button>btn2</button>

then right arrow key presses should traverse "text" by characters, then focus the 1st button, focus the editor and set caret position between buttons, then focus the 2nd button, then focus the editor and set caret position after the second button.

If the compound element is focused and the user navigates by characters then caret should be moved consecutively to the end of the element's content, then should be set after the element and the editor should take the focus.

For example, if the HTML anchor and HTML button are placed after another

<a href="">link</a><button>btn</button>

then caret should be moved through the "link" text, should be set after anchor element and then button should be focused.

Tab navigation

If the special content element is focused then pressing tab should navigate to the next focusable element in tab order. Next focusable element in tab order can be encountered either inside or outside of editable area. This requirement is applied to control elements and compound element both.

For example, if editable area contains two buttons (HTML and ARIA buttons) and there is one button outside of editable area

<div contentEditable="true">
  Text<button>btn1</button>text<div role="button" tabindex="0">btn2</button>text
</div>
<button>btn3</button>

and the 1st button is focused then pressing tab should move the focus to the 2nd button and then to the 3rd button.

If the editor is focused then pressing tab should insert '\t' character or its used analogue or move the focus outside of editable area to the next tabable element what depends on editor preferences or platform.

Home/end navigation

The user should be able to navigate to the begin/end of

• the current line (for example, Home/End keys)
• the editable area (for example, Home/End keys with pressed 'alt' modifier key).

Mouse interaction with special content

The special content element behaviour is the same on mouse input if the mouse isn't used to change the selection.

For example, if user clicks on combobox (HTML:select) then drop down list appears.

Managing the selection

When integral element participates in selection then it should be selected entirely always. If the integral element has own selection behaviour (like a HTML input) while the it's focused and the user starts the selection inside of it then there is no way to extend the selection out of boundaries of the element.

When compound element participates in selection then the editor should provide two opposite options to the user. It should be possible to select the element entirely so that its content wouldn't be selected. On the another hand it should be possible to select the content of the compound element so that the element itself wouldn't be selected.

Visually the selected entirely element might have blue border around it.

Keyboard selection

When user holds selection modifier key (for example, shift key) and moves through editable area then the editor stays focused.

At the same time if the integral element encountered on the way then the element is appended to the selection entirely.

If the compound element is encountered on the way while

1. the user moves by words then the element is appended to the selection entirely
2. the user moves by characters then the element's content is appended consecutively to the selection until the user reaches the end of the element.
   1. If the caret leaves the element then the element is appended to the selection entirely.
   2. If the user releases the selection modifier key then the compound element is focused while the caret stays inside of the element's content.

If the selection is started inside of compound element while is is focused then editor will take the focus once the caret leaves the compound element content.