The tabIndex="" property lets you set whether links, buttons, and other HTML elements can be selected by hitting the tab key. The property is regular HTML5 - not specifically CML - but using it thoughtfully can make your contributors more efficient (reads: increase throughput) by skipping non-critical elements in your form.
The tabIndex property is especially useful in:
- jobs with many form inputs per unit
- jobs where you specifically instruct contributors to use the tab key in order to increase speed
You can implement tabIndex in two ways:
- Directly, by disabling tabbing on any element using tabIndex="-1". You can also set the tabbing order using tabIndex="1" (or 2, 3, etc.).
jQuery = $(".untabMe").attr('tabIndex',-1);
Class = .untabMe
- note: the '.' in .untabMe is just to indicate it is a class; the '.' prefix is a selector used by CSS & jQuery. The class itself is just untabMe
- example: <a href="#awesomeFAQModal" role="button" class="btn untabMe cml-blue" data-toggle="modal">Frequently Asked Questions</a>
The easiest (and generally most effective) way to use tabIndex is:
- Identify all elements normally selected by a contributor tabbing through your form that are not critical to them completing the task (for example, the right-hand dashboard on this content-generation job).
- Typing tabIndex="-1" inside the opening <> of the element. For example, turn off tabbing for a link by re-writing
<a href="#myModal" tabIndex="-1"></a>
You can experiment with using positive values for tabIndex; however, this can work differently than expected because of the interaction with CML, so be careful to double-check your work using the crowdflower internal interface if you attempt to use tabIndex in this way.