Javascript | Guide to: Using "tabindex" with CML

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.).
  • Through javascript; insert the prepackaged code below into the jQuery section of your javascript (refer here for how to do this) and use the untabMe class to turn off tabbing on the specified elements:
    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:

  1. 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).
  2. Typing tabIndex="-1" inside the opening <> of the element. For example, turn off tabbing for a link by re-writing <a href="#myModal"></a> as <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.

Was this article helpful?
1 out of 1 found this helpful

Have more questions? Submit a request
Powered by Zendesk