Skip to main content

Keyboard Only

Hide your mouse pointer and test your interfaces only with your keyboard

☰
My Food
Sandwich

The Perfect Sandwich, A Real NYC Classic

Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.

Steak

Let Me Tell You About This Steak

Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.

Cherries

Cherries, interrupted

Lorem ipsum text praesent tincidunt ipsum lipsum.

What else?

Pasta and Wine

Once Again, Robust Wine and Vegetable Pasta

Lorem ipsum text praesent tincidunt ipsum lipsum.

Popsicle

All I Need Is a Popsicle

Lorem ipsum text praesent tincidunt ipsum lipsum.

Salmon

Salmon For Your Skin

Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.

Sandwich

The Perfect Sandwich, A Real Classic

Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.

Croissant

Le French

Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.

«1234»

About Me, The Food Man


Me

I am Who I Am!

With Passion For Real, Good Food

Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.


How to
  • Click on the Disable Mouse button
  • Check if this demo is accessible. (Spoiler alert: It's not 😀)
  • Can you press tab and navigate through the interface?
  • Can you navigate to landmark areas?

Rationale​

Suppose you - or a colleague of yours - is working on a component and with accessibility in mind (as you should). Then, hiding the mouse pointer might be an excellent way to test out possible regressions.

By not showing any mouse pointer on the screen, this little helper will "force" you to leave your pointing devices aside and think about all the possible ways your component needs to work like:

  • "Does this component/page work the same with the keyboard and a mouse"?
  • "Can I do the same things or, at least, achieve the same outcome"?
  • "Is the focus is visible"?
  • "Is it perceivable and operable with the keyboard"?

It might also point you towards learning how to operate an interface using a screen-reader, like VoiceOver, NVDA, Narrator or JAWS.

Of course, a component being operable with the keyboard is not the same as being accessible, but it's a good starting point.

💡 Tip

For instance, while developing, you can wrap all your content with the KeyboardOnly component, or place it as hight as you can on your tree. This helps you test if your content works as expected.

Of course, before committing or releasing to production, remove the component from the DOM.