freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the...

---
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:

`<div tabindex="1">I get keyboard focus, and I get it first!</div>`

`<div tabindex="2">I get keyboard focus, and I get it second!</div>`

# --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
<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>


    <input type="search" name="search" id="search">
    <input type="submit" name="submit" value="Submit" id="submit">


  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```

# --solutions--

```html
<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>


    <input tabindex="1" type="search" name="search" id="search">
    <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">


  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`
			`id: 587d7790367417b2b2512ab1`
			`title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements`
			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/c/cmzRRcb'`
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558) 2019-08-05 16:17:33 +00:00			`forumTopicId: 301028`
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 02:31:00 +00:00			`dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --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.

feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`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.`
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`Here's an example:`

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`<div tabindex="1">I get keyboard focus, and I get it first!</div>`

			`<div tabindex="2">I get keyboard focus, and I get it second!</div>`

			`# --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'));`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			Your code should add a `tabindex` attribute to the submit `input` tag.
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			```js
			`assert($('#submit').attr('tabindex'));`
			```
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			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--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
			```html
			`<body>`
			`<header>`
			`<h1>Even Deeper Thoughts with Master Camper Cat</h1>`
			`<nav>`
			`<ul>`
			`<li><a href="">Home</a></li>`
			`<li><a href="">Blog</a></li>`
			`<li><a href="">Training</a></li>`
			`</ul>`
			`</nav>`
			`</header>`
			`<form>`
			`<label for="search">Search:</label>`
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 00:01:53 +00:00

feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`<input type="search" name="search" id="search">`
			`<input type="submit" name="submit" value="Submit" id="submit">`
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 00:01:53 +00:00

feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`</form>`
			`<h2>Inspirational Quotes</h2>`
			`<blockquote>`
			`<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>`
			`- Chuck Norris</p>`
			`</blockquote>`
			`<blockquote>`
			`<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>`
			`- TMNT</p>`
			`</blockquote>`
			`<footer>© 2018 Camper Cat</footer>`
			`</body>`
			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --solutions--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
fix(curriculum): Add solutions to 16 Applied Accessibility challenges #35751 (#35809) This commit adds 16 full working solutions to the responsive web design principles dealing with applied accessibility. 2019-04-24 13:42:46 +00:00			```html
			`<body>`
			`<header>`
			`<h1>Even Deeper Thoughts with Master Camper Cat</h1>`
			`<nav>`
			`<ul>`
			`<li><a href="">Home</a></li>`
			`<li><a href="">Blog</a></li>`
			`<li><a href="">Training</a></li>`
			`</ul>`
			`</nav>`
			`</header>`
			`<form>`
			`<label for="search">Search:</label>`


			`<input tabindex="1" type="search" name="search" id="search">`
			`<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">`


			`</form>`
			`<h2>Inspirational Quotes</h2>`
			`<blockquote>`
			`<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>`
			`- Chuck Norris</p>`
			`</blockquote>`
			`<blockquote>`
			`<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>`
			`- TMNT</p>`
			`</blockquote>`
			`<footer>© 2018 Camper Cat</footer>`
			`</body>`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```