2

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?

rndware
  • 173
  • 2
  • 9
  • 1
    what is it you are trying to create, semantics are very important and so this looks like it should be a `
      ` containing `
     – GrahamTheDev Oct 23 '20 at 13:49

2 Answers2

3

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.
FullOnFlatWhite
  • 3,642
  • 2
  • 18
  • 23
  • `role=button` is a promise to the user that you will implement all the event handling that a button element has. – steveax Oct 23 '20 at 15:33
0

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>
Anis R.
  • 6,656
  • 2
  • 15
  • 37
  • 2
    you should never really use a positive `tabindex`, it causes so many headaches for logical tab order as anything with a `tabindex` > 0 will be first in the document tab order, before anything that appears before it in the DOM that should be focusable. – GrahamTheDev Oct 23 '20 at 13:52