--- id: 587d7790367417b2b2512ab1 title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements challengeType: 0 videoUrl: 'https://scrimba.com/c/cmzRRcb' forumTopicId: 301028 dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements --- # --description-- The `tabindex` attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher. Setting a `tabindex="1"` will bring keyboard focus to that element first. Then it cycles through the sequence of specified `tabindex` values (2, 3, etc.), before moving to default and `tabindex="0"` items. It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it. Here's an example: `
I get keyboard focus, and I get it first!
` `
I get keyboard focus, and I get it second!
` # --instructions-- Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `1` to the `search` `input`, and a `tabindex` attribute set to `2` to the `submit` `input`. # --hints-- Your code should add a `tabindex` attribute to the `search` `input` tag. ```js assert($('#search').attr('tabindex')); ``` Your code should add a `tabindex` attribute to the `submit` `input` tag. ```js assert($('#submit').attr('tabindex')); ``` Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1. ```js assert($('#search').attr('tabindex') == '1'); ``` Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2. ```js assert($('#submit').attr('tabindex') == '2'); ``` # --seed-- ## --seed-contents-- ```html

Even Deeper Thoughts with Master Camper Cat

Inspirational Quotes

“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
- Chuck Norris

“Wise men say forgiveness is divine, but never pay full price for late pizza.”
- TMNT

``` # --solutions-- ```html

Even Deeper Thoughts with Master Camper Cat

Inspirational Quotes

“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
- Chuck Norris

“Wise men say forgiveness is divine, but never pay full price for late pizza.”
- TMNT

```