Navigating just using a keyboard

[Angelsaur]

Summary

Some of your users need to navigate without a mouse, just using a keyboard. You’ll need to do some checks to see how easy it is for them to do that.

The main keys you’ll be using to navigate are the space bar, ‘Tab’, ‘Enter’ and ‘Esc’ keys. ‘Tab’ is the key that lets you jump between page elements, while ‘Enter’ and ‘Esc’ let you interact with and dismiss those page elements. The space bar activates buttons, checkboxes and radio buttons.

You might need to enable the tabbing function if you’re using Safari.

Deadline

20/02/2021

What needs to be done?

• Check you can tell where you are on the page
  When you navigate just using a keyboard, you do not have the mouse cursor to let you know where the focus is on the page. You need to make sure there’s another way for users to orientate themselves and understand which page element they’re focusing on.

For example, if you tab through the GOV.UK homepage you’ll notice that the page element in focus is highlighted very clearly with a prominent orange block.

• Spend a few minutes tabbing through a few of the sample pages you selected. Ask yourself whether it’s clear where on the page you’re focused - if it takes you a while to notice which element is in focus then you’re probably not meeting this requirement.

• Check the order makes sense when tabbing
  While you were tabbing through the page elements, you should have noticed whether the tabbing moved in a logical order. For instance, if you tab on to a navigation bar, you’d expect to be able to tab through the entire bar without the focus jumping off elsewhere on the page.

• Spend a few minutes testing this on a few of your sample pages, to check you can tab in a logical order.

• Check nothing unexpected happens when tabbing through a page
  When you were tabbing through your sample pages, you should have noticed whether anything unexpected happened. For example, if tabbing onto an element triggered anything like:
  a new web page to open
  a navigation menu to open
  Another thing to look out for is whether you can interact with all the page elements you’d expect to.

For example, some websites like the Service Manual feature expandable, hide and reveal style navigation. If these navigational elements are marked up properly, you can expand and close them with a keyboard as you would with a mouse.

But if they’re marked up incorrectly, you’ll likely tab straight past them using just a keyboard. Look out for things like this.

• Check you do not get stuck when navigating through content
  While you’re tabbing through your sample pages, note down any places where you get stuck.
  Getting stuck means ending up somewhere you cannot navigate away from using just your keyboard. For instance, you might activate a pop-up or interactive element that you cannot skip away from just by using the ‘Esc’ key.
  People not using a mouse would not be able to move away from a page element like this, which could prove very frustrating.
  If you find you get stuck, you’re probably not meeting this requirement.

• Check forms are still usable without a mouse
  Take your sample of forms and see if you can complete them without using a mouse. This means using ‘Tab’ to jump between the form elements and ‘Enter’ to interact with any navigation elements, like ‘next’ or ‘submit’ buttons.
  If there are form elements you cannot get through using just your keyboard, then your website is not meeting this requirement.

• Check users can skip to the main content on a page
  Lots of websites contain several links and navigational elements in the header at the top of the page. Users need to be able to skip past these links straight to the main page content if they want to, so they’re not forced to tab through each item individually every time they open a new page.
  Some websites give users the chance to skip these header blocks. For instance, if you hit ‘Tab’ when you arrive at the GOV.UK home page, you’ll see the option to ‘Skip to main content’. If you hit ‘Enter’, the page will refocus past the header block down to where the actual page content begins.

See if the same thing happens when you hit ‘Tab’ after refreshing a page on your website.

Who can help?

[GeorgiaHCA]

This is a complex but important one. Are you able to test this out @JamesSCTJ?

[gedankenstuecke]

Made issue #369 to create an accessibility checklist that can be used for the MVP and going forward. Closing this along with other accessibility checklist items for now.