3.7 KiB
3.7 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d7790367417b2b2512ab1 | Use tabindex to Specify the Order of Keyboard Focus for Several Elements | 0 | https://scrimba.com/c/cmzRRcb |
Description
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
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
.
Tests
tests:
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
testString: assert($('#search').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.');
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
testString: assert($('#submit').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.');
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
testString: assert($('#search').attr('tabindex') == '1', 'Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.');
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
testString: assert($('#submit').attr('tabindex') == '2', 'Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.');
Challenge Seed
<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>“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>
Solution
// solution required