How to navigate between buttons using keyboard arrow keys?

user_563466 0
Viewed 2208

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?

arrow-keys accessibility navigation keyboard
1 Answers

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.

user_19712160
Related