Inclusive Design Tip : No mouse, no trackpad

A physical tip

Why do it

People with physical impairments use a keyboard instead of a mouse as it doesn’t require precise movements.

What to do

  • Browse your site using only your keyboard: use Tab and Shift + Tab to navigate forwards and backwards on the page.

Things to check

  • Can you see where you are on the page? Look for a visible :focus indicator as you navigate using the Tab and Shift + Tab keys.
  • Can you interact with every element on the page?
  • Can you use functionality (like tooltips) that you usually see on a hover action?

Things you could change

  • Use HTML elements like buttons and (a href) links instead of divs and spans. These automagically receive focus.
  • Use distinct, clear, :focus styles in your CSS. A change in background color and an outline are a good idea.