Home » Blog » We ❤ Keyboard Navigation

We ❤ Keyboard Navigation

Illustration of pirate doodles sailing on a ship that's made out of a giant keyboard.

Accessibility is an issue that’s near and dear to our ❤s here at We ❤ Health Literacy Headquarters. We’ve shared accessibility tips before, but today we wanted to steer your attention specifically to keyboard navigation. (Get it?!)

Keyboard navigation is when users browse a website’s links and content using the tab and enter keys instead of a mouse or touch screen. It’s used by people with physical disabilities who can’t operate a mouse — and by blind and visually impaired people who rely on screen readers. (Curious how screen readers work? Check out this demo video.)

We know that most people skim and scan web pages to quickly find what interests them. But if you’re using keyboard navigation, you don’t have that option — you have to go through each link or section of content in order. Of course, dear readers, we’re sure that your content is already in the best possible order. How about your links and page elements?

To make sure your website is smooth sailing for people using keyboard navigation, try these tips — or share them with your favorite web developer:

  • Pay attention to focus order (also called tab order) — that’s the order that links and page elements “come into focus” as you tab through them. A focus order that makes sense will help users easily navigate your site.
  • Include skip links, especially if you have a lot of links in your top navigation. This lets users skip to the main content without rereading the navigation on every page.
  • Test, test, test! Take your hand off the mouse and try to navigate your site using the tab and enter keys. If you have access to a popular screen reader like JAWS, use it to test your site — or try a free screen reader plugin for Chrome or Firefox.

The bottom line: For people who use keyboard navigation, a few small tweaks to your website can make a big difference.  

Tweet about it: Is your website #accessible for keyboard navigation? Find out: http://bit.ly/1SPCu4Y #a11y #HealthLit via @CommunicateHlth

Comment:

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*