How to handle tabbing for accessibility with a textarea that uses the tab button?

user_172350 0
Viewed 2648

I have a webpage that includes a <textarea> that uses JavaScript in order to utilize keyboard inputs like the tab key in order to indent lines, etc, just like a normal word processor or text editor.

When ensuring my webpage is accessible for screen readers, how does one handle the tab key in this situation? The user can tab around the webpage just fine but when they tab into the textarea they cannot tab out of it because the tab key is being used in the textarea for a different purpose.

What is the best solution to ensure that screen readers don't have an issue with this?

accessibility html
3 Answers

Great question and thanks for considering accessibility. This problem is not only for screen reader users but others that have mobility problems and can't use a mouse and rely solely on the keyboard for input.

The issue you're trying to prevent is WCAG 2.1.2 No Keyboard Trap.

Using the tab key to allow indentation of text is a natural thing to provide for textareas. One way around the problem is to allow esc to get you out of "edit mode" so that the tab key can now naturally move the focus to the next object.

I'm guessing you have a keyboard event handler that calls preventDefault() for tab. If the user presses esc, change the way you're handling tab by letting it bubble up naturally (ie, don't call preventDefault()). To go back into "edit mode", the user can press enter or they can tab off the textarea then tab back to it (ie, go into "edit mode" onfocus).

One key point of WCAG 2.1.2 is

if [tabbing off the object] requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

So if you use esc, you'll need some onscreen directions that tells the user to press esc then tab to move the focus off the object, and those directions should be associated with the <textarea> via aria-describedby so that screen readers know about it.

<div id="foo">Press ESC then TAB to move the focus off the field</div>
<label for="stuff">Enter your info here</label>
<textarea id="stuff" aria-describedby="foo"></textarea>
user_767140

There can be couple of possible solutions.

1.Override the default behavior of tab for textarea (you can do change tabindex or focus change, when user hits tab).

2.You can provide a shortcut(key combination e.g CTRL+M) on your page to change the TAB behaviour.

user_38402130

According to UI Events / Keyboard Event Types / keydown

If the key is the Tab key, the default action MUST be to shift the document focus from the currently focused element (if any) to the new focused element, as described in Focus Event Types

So, as long as your implementing this in a web browser, you must not use the Tab key for indentation. Handling the space bar use on the beginning of lines to add the correct number of spaces (or a tab char), in combination with any other shortcut (to indent multiple lines for instance), is a good alternative.

user_45401410
Related