The article cover shows an artwork on a dark background with a yellow keyboard TAB key.

Sexy and accessible focus state on keyboard navigation

Accessible keyboard navigation can follow your brand’s visual standards

But what the hell is keyboard navigation?

A “buy now” link is getting keyboard focus, no customization, showing the blue and white outline around it.
Keyboard focus on a link without customization

But then I need to use the infamous blue outline?

How to make features navigable from the keyboard

HTML code of a link with tabindex attribute
HTML code of a link with tabindex attribute

Everything can be good with CSS

Sample customization in code
3 examples of yellow “learn more” buttons are shown in different states: default, hover and focus.

Et voilà!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jahde Vaccani

Product Designer, Web Accessibility at Descomplica and Writer hobbyist.