Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

Why is it skipping tabindex 2 thru 4 when I tab through?

Here is my html:

<!DOCTYPE html>
<html>
<body>
    <main>
      <h2 class= "heading">Survey</h2>
      <div class="card">
        <div class="flex">
          <div class="container">
            <form class="survey">
              <fieldset>
                <legend>Member</legend>
                <p>Who is your favorite band member:</p>
                <input type="radio" name="res" id="john" value="John" tabindex="1">
                <label for="john">John</label>
                <input type="radio" name="res" id="hazzard" value="Hazzard" tabindex="2">
                <label for="hazzard">Hazzard</label>
                <input type="radio" name="res" id="bob" value="Bob" tabindex="3">
                <label for="bob">Bob</label>
                <input type="radio" name="res" id="sally" value="Sally" tabindex="4">
                <label for="sally">Sally</label>
              </fieldset>

              <p><label for="album-what">What is your favorite album:</label></p>
              <select id="album-what" name="select" tabindex="5">
                <option value="1">Party For An Angel</option>
                <option value="2">A Day Of Old</option>
                <option value="3">Finding My Shadow</option>
                <option value="4">Diamond Fireworks</option>
                <option value="5">Enjoy Your Desire</option>
                <option value="6">This Is For You</option>
                <option value="7">Music Of My Life</option>
                <option value="8">Song For Yesterday</option>
                <option value="9">Heroic Forever</option>
                <option value="10">Midnight Fires</option>
                <option value="11">Street Of The Rider</option>
              </select>
              <p><label for="album-why">Why is it your favorite album?:</label></p>
              <textarea id="album-why" tabindex="6"></textarea>
            </form>
          </div>
        </div>
      </div>
      <h2 class="heading">Newsletter</h2>
      <div class="card">
        <div class="flex">
            <div class="container">
              <form class="newsletter">
                  <p>
                    <label for="name">Name: </label>
                    <input id="name" type="text" name="textfield" tabindex="7">
                  </p>
                  <p>
                    <label for="email">Email: </label>
                    <input id="email" type ="text" name="textfield" tabindex="8"></p>
                  <p>
                    <label for="retype">Retype email: </label>
                    <input id="retype" type ="text" name="textfield" tabindex="9"></p>
                  <button type="submit" tabindex="10">Sign Up</button>
              </form>
            </div>
        </div>
      </div>
    </main>
</body>
</html>

When I view it in a webpage and try tabbing through it, it only tabs to the 1st tabindex, the first input, and the skips the 2nd 3rd and 4th, and goes straight to tabindex 5.

1 Answer

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

I think that's normal, as the radio buttons are all one button group and constitute one input on the form.

Once you tab to the group, you can move across the group with the arrow buttons. This is similar to moving through the drop-down selection options with the arrow buttons.