A11y Lablearn by doing
0/20

Keyboard and color · 19

Rove focus through a toolbar

A composite toolbar should occupy one Tab stop while arrow keys move focus among its controls.

What to do

  1. Keep exactly one toolbar button at tabindex="0".
  2. Set every other toolbar button to tabindex="-1".
  3. Use Arrow Right and Arrow Left to move both focus and the zero tabindex.
/index.html
Preview
updating…

Result

Run the checks

Edit the HTML and select “Check solution”. The preview updates automatically.

If you are stuck

Start Bold at 0 and the other three at -1. The preview’s roving-focus adapter handles arrow keys.

Read the exact rule or pattern

Exercise 19 of 20

axe-core

Automated audit