Text editor

Requirements

Users should be able to:

• Identify the input as a field for entering multiple lines of text.
• Understand the purpose of the input from its label.
• Edit the text within the field using assistive technology.
• Apply different styles to text using assistive technology.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the text style menu in the text editor.
• Pressing ‘tab’ from the text styling menu moves focus to the text area.
• Pressing ‘tab’ from the text area moves focus to the next interactive element on the page.
• Arrow left and Arrow right. Cycles the user between the different text styling options.
• Enter or Space. Activates the selected styling option. Typing in the text area applies the style.
• Pressing enter on the text editor adds new lines.

Design considerations

• Text editors should support the ability for users to copy and paste content as well as type within the input.
• Users should be able to apply different styles to text, such as bold and italics.
• Visually communicate that a text editor is multiline by giving it a greater height than surrounding text inputs.
• Make sure the text editor border has a 3:1 minimum contrast ratio with the background it's placed against.
• Make sure that text style buttons have a clear hover and selected state, to communicate that they are interactive. 

Development considerations

• The text editor should have a clear, visible label so that users can understand its purpose.
• The text styling buttons should be wrapped in a container with role=”toolbar” with an accessible name provided by an aria-label.
• Buttons within the toolbar should have an accessible name provided by an aria-label.
• Buttons within the toolbar should have an aria-pressed attribute which toggles between false and true to let screen reader users know if an option has been selected or not.
• The text editor should be a textarea with type=”text” so that users are able to input whatever characters they need to.
• If hint text is used, it should be associated with the text editor using aria-describedby pointing at the unique id of the hint text.
• If the text editor has a character count, this should be associated with the textarea using aria-describedby pointing at the unique id of the character count.
• As the character count updates, it should be announced using aria-live=”polite” so that screen reader users are informed when the screen reader is idle.
• Make sure any error or warning messages are programmatically associated with the field, so that they are announced to screen reader users.