Accessible way to override tab key in textarea

Question

I'd like to create a textarea for code which would allow the user to press Tab and Shift + Tab to indent and outdent the content respectively, however I'm worried that overriding the Tab key would create a focus trap on the page for anyone trying to move around the page via keyboard.

Is there an accessible way to override the default behavior of the Tab key in a <textarea>?

My initial thought was to use Ctrl + Tab and Ctrl + Shift + Tab to change the field focus, but I'm not sure of the ramifications of this decision.

Answer 1

The modifiers for the tab key are already taken for important window management tasks:

Ctrl+Tab cycles through tabs in the browser as it is the common shortcut for cycling through open documents in the same application. Shift+Ctrl+Tab goes backwards. Alt+Tab switches between running applications.

It would be unexpected, and highly annoying, for a single web page to affect window management shortcuts. I've seen flash video players do that and it's not good.

Asana does it the other way around and uses Tab as a modifier for their shortcuts.

Another thing to consider is that for many coders Tab is purely muscle memory. They don't think about what key to hit for indentation. If you're going to require anything else than simply Tab, they'll probably have a hard time using it. Therefore, in some cases, overriding the default behavior might not be as bad as the alternatives. Github does that in their online code editor. Having to deal with anything different than Tab would be severly annoying for 99% of their user base. Their editor was designed to support writing a lot of code, so apparently they deemed that more important than the default behavior.

Since any change from simply using Tab is going to be different from what people are used to, you might as well use a completely different combination:

You could use Ctrl+Space and Shift+Ctrl+Space.

For short snippets that are part of a larger form this approach might be a nice compromise. In fact I bet many coders will be happy to see any kind of proper indentation support besides having to hit the spacebar hundreds of times.

Plan B would be to add a mode switch. Let users decide if they want to enable editing indentation with the Tab, or leave it at its default behavior. This will prevent users getting stuck at the text area when tabbing through your form, but also gives them easy access to proper indentation when they need to write more than a few lines of code.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

After reading much of the WAI-ARIA 1.0 Authoring Practices guide, I discovered that there was an explicit recommendation for how to handle the insertion of tabs into rich text editable documents:

Optionally, if the developer wishes to provide the ability to insert a tab into the document, it is recommended one of the following methods be used.

• Provide indent and outdent buttons in the menu. Keyboard shortcuts to the buttons should be Control+M for indent and Control+Shift+M for outdent.
• Provide a button in the menu to toggle the use of Tab between the two modes. If this button is used, then Control+M is recommended as a keyboard shortcut to toggle the button.

Answer 3

Only grab Tab for the field after something has been typed. This way navigating the page with keyboard shortcuts won't break.

Also give the user a clue as to what's going on, otherwise the behaviour may seem rather erratic. Provide some feedback that tab is now locked for indenting instead of form field navigation. Koen Lngeveen's answer has a good example of this, something like "Tab can now be used for indenting [release]".