3

I have an html structure like this

<div class="my-class" role="tablist" aria-label="upcoming week">
  <button id="Thu" class="title-box" role="tab" aria-controls="Thu-tab" aria-selected="false">Thu </button>
  <button id="Fri" class="title-box selected" role="tab" tabindex="0" aria-controls="Fri-tab" aria-selected="true">Fri</button>
  <button id="Sat" class="title-box" role="tab" tabindex="0" aria-controls="Sat-tab" aria-selected="false">Sat</button>
  <button id="Sun" class="title-box" role="tab" tabindex="0" aria-controls="Sun-tab" aria-selected="false">Sun</button>
  <button id="Mon" class="title-box" role="tab" tabindex="0" aria-controls="Mon-tab" aria-selected="false">Mon</button>
  <button id="Tue" class="title-box" role="tab" tabindex="0" aria-controls="Tue-tab" aria-selected="false">Tue</button>
  <button id="Wed" class="title-box" role="tab" tabindex="0" aria-controls="Wed-tab" aria-selected="false">Wed</button>
</div>

With using keyboard tab key, I can move to the next button. But with keyboard arrow keys it is not working.

Is it possible to navigate between these buttons using keyboard arrow keys to move forward or backward?

What attributes I am missing for the keyboard arrow keys?

Ahmad
  • 2,099
  • 10
  • 42
  • 79
  • you have to implement this, it isn't built in functionality. You also don't need `tabindex="0"` on buttons, they already receive focus. – GrahamTheDev Mar 26 '20 at 08:04
  • 1
    https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html start here, there is a JS file you can download that makes a good starting place for all functionality. – GrahamTheDev Mar 26 '20 at 08:06

1 Answers1

2

You haven't forgotten anything. Navigating with arrow keys isn't automatically provided by default. You will need to implement it on your own.

You will find examples and guidance at many places on the web, for example on this page: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

If you are using Angular, vueJS, React, or another framework of that kind, pay attention to the keyboard support of their components. Some are very well keyboard accessible, but most aren't.

QuentinC
  • 12,311
  • 4
  • 24
  • 37