Applied Accessibility: Use tabindex to Add Keyboard Focus to an Element

I completed the challenge but I’m not sure what it means. This chapter itself wasn’t very visual so I couldn’t understand why the solutions worked.
So in this challenge (title^):
" Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a 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."

I completed it by
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>

but I don’t see how this impacts the UX. I tried changed from 0,-1,+5 (0, negative, positive) ,but I don’t understand why this solution works and what exactly it means.
A few questions, thus.
What does the value of tabindex, as it changes, do (either backend or frontend/UX)?
What does tabindex itself do? The challenge info said " automatically receive keyboard focus when a user tabs through a page", but what is…keyboard focus?

1 Like