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.

  • 4
    Ctrl + Tab is the hotkey to cycle through tabs in Firefox and Chrome, so that may not be the best idea
    – JohnB
    May 20, 2013 at 3:46

3 Answers 3


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

  • Many code editors on the Mac use ⌘] and ⌘[ for indent and outdent respectively, which is probably less risky.
    – Kit Grose
    May 21, 2013 at 1:19
  • If you add a mode switch, think about adding a shortcut for the mode switch itself, to avoid getting stuck. Although I'm not sure how to remind user of the shortcut at an arbitrary time, they'd have to be told once and remember it...
    – hsandt
    Feb 15 at 12:36

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.

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]".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.