tabindex
attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div
, span
, and p
, by placing a tabindex="0"
attribute on them. Here's an example:
<div tabindex="0">I need keyboard focus!</div>
Notetabindex
value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div
used for a pop-up window is activated), and is beyond the scope of these challenges.
tabindex
attribute to the p
tag and set its value to "0". Bonus - using tabindex
also enables the CSS pseudo-class :focus
to work on the p
tag.
tabindex
attribute to the p
tag that holds the form instructions.
testString: assert($('p').attr('tabindex'), 'Your code should add a tabindex
attribute to the p
tag that holds the form instructions.');
- text: Your code should set the tabindex
attribute on the p
tag to a value of 0.
testString: assert($('p').attr('tabindex') == '0', 'Your code should set the tabindex
attribute on the p
tag to a value of 0.');
```