WebAIM - Web Accessibility In Mind

E-mail List Archives

Fixing a focus trap in WYSIWYG input field

for

From: N Robichaud
Date: Sep 24, 2018 7:25PM

Hello,

I'm looking for advice or shared accounts of past experience.

I'm tackling a problem with a WYSIWYG input field that I'm sure someone has
solved before. It's in a web app that allows users to have an email
conversation via the app. Users can use tab to change focus and navigate
the page until they focus on the input field, which allows tabbed
indentation. Once the focus lands there, there is no way for users to move
on and access the rest of the page using a keyboard.

I know some products approach this by making tab do different things based
on where the blinking cursor is:
If the blinking cursor is in a bulleted list, pressing tab or shift+tab
changes the indentation.
If the blinking cursor is in a table, pressing tab or shift+tab moves
between cells.
If the blinking cursor is in plain paragraph text, then pressing tab or
shift+tab changes focus in the page.

Other products introduce a custom keyboard shortcut for changing
indentation within the composer input field, and tab and shift+tab are only
used to change focus.

Can anyone share some advice on this? If you have addressed this problem in
the past, what did you do and how did it go?

Thanks,
Nicolette