Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
3  
Ctrl + Tab is the hotkey to cycle through tabs in Firefox and Chrome, so that may not be the best idea –  JohnB May 20 '13 at 3:46
add comment

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Many code editors on the Mac use ⌘] and ⌘[ for indent and outdent respectively, which is probably less risky. –  Kit Grose May 21 '13 at 1:19
add comment
up vote 2 down vote accepted

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.
share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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