Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,696 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
216,135 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.