CODEWITHSUNDEEP
htmlcssdomaccessibilitytabindex
rndware
rndware

Reputation: 213

How to tab directly to child element and ignore parent

Currently I have a list like so:

<div class="list">
  <div class="padding">
    <div class="clickable-item">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item">item 2</div>
  </div>
</div>

With the keyboard I would like to tab to the clickable-items one after another.

Currently it's tabbing through the 'padding' elements instead.

Is there any way I can tell the browser to ignore the padded parent and tab straight to the child?

Upvotes: 2

Views: 2975

Answers (2)

Anis R.
Anis R.

Reputation: 6922

You can set the tabindex attribute on the desired elements. The tab index number determines the order in which the elements are visited.

Edit: As FullOnFlatWhite and Graham Ritchie mentioned, it's generally better to use tab indices of zero (not positive), or use role="button" on your div.

<div class="list">
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 2</div>
  </div>
</div>

Upvotes: 0

FullOnFlatWhite
FullOnFlatWhite

Reputation: 3672

Here's a few things to think about:

  1. <div class="clickable-item" /> isn't indicating that it's a clickable item. See: Making a clickable <div> accessible through tab structure? on why using a div isn't always the best solution and using a button or a tag is better for accessibility.
  2. Unlike what Anis R. said, if you want to keep the logical flow for tabbing based on the ordre of the page, you want to use tabindex="0" on the elements.
  3. If you must use a div, think about using <div class"clickable-item" role="button" /> on your div in order to indicate that it is indeed something clickable.

Upvotes: 3

Related Questions