Lesson 10The design process: how to make room for web accessibility?

Notion 74

The importance of keyboard-only navigation

Target skills

Identify the necessity of designing your site for keyboard-only visitors and some related functionalities.

Keyboard navigation offers an overall better user experience on a website. Being able to carry out all the different actions on a web page by using only your keyboard makes a significant impact on user efficiency. It also makes your website keyboard accessible in the eyes of the Web Content Accessibility Guidelines. On the other hand, using a mouse can be difficult for users with motor disabilities, visual impairments or for those with hardware limitations. In addition, complex mouse interactions can limit the accessibility of your web page.

Here are some actions in which the keyboard can replace a mouse.

To begin, you can see in this Canva the keyboard keys mainly used for navigation on an accessible website:

Clicking with a keyboard

The Enter key is considered the equivalent of clicking on a button or submitting a form. Once a web page element is focused, Enter will trigger its actions. Drag-and-drop actions can be tricky without a mouse and should have a keyboard alternative like, for example, one based on numerical values or action buttons.

Focusing on elements

The mouse is a great tool to point at something on the screen. To provide users with the same experience, keyboard accessibility should also ensure that any element of interest is focusable, like buttons, links, or menus. Some HTML anchors, such as anchors on the navigation menu and in the main sections or titles, can also help browse pages more easily with the keyboard.

Scrolling with a keyboard

Scrolling a page with a keyboard is a native function in HTML, too, and you should therefore not limit users' scrolling to only a mouse. Beware of trapping the visitor in a frame without the possibility to exit! A situation like this may occur with modals, forms or menus.

On a keyboard, the Tab key is also a good way to browse the whole web page and all its elements quickly.

Providing visitors with feedback

When browsing and focusing on an element, the visitor should know the mouse cursor's location. It helps to know when to click on something or where on the page the cursor is looking. Do not override the outline on focus option; otherwise, some users might lose the cursor!