This second video looks at Keyboard Interaction.

Transcript

Hello! In this episode, I’ll explain why this key, the tab key, is so important for making the web accessible.

I’m Eric Eggert, a Web Accessibility Expert. You can follow me as @yatil — Y-A-T-I-L — on social media. If you have questions about this or other videos, or want to propose a topic use the hashtag #askYatil on Twitter.

Keyboard Accessible, Guideline 2.1, is one of the most important Guidelines in WCAG 2: All functionality on a website or in an app must be available from a keyboard.

This allows users to use it without using a mouse or another pointer, for example the finger on touch screens.

Why is this important?

Many users of assistive technologies use the keyboard to interact with a website. For example, screen reader users usually use the keyboard to navigate around a page when they are on a computer.

On mobile, often no physical keyboard is used (but it can be!) but the gestures are translated to keyboard input.

One could say that keyboard input is used like an API between the website or app and the assistive technology.

WCAG 2 and keyboard interaction

WCAG has six success criteria on Levels A and AA covering the bulk of keyboard interaction.

• 2.1.1 Keyboard makes sure that all interactions are available to keyboard users (with some exceptions that cover painting or other interaction where the timing of pressing keystrokes is essential — the example named is a helicopter model simulation).

• 2.1.2 No Keyboard Trap protects users from getting stuck while using the keyboard to navigate through the page.

• 2.1.4 Character Key Shortcuts prevents single key presses to initiate an action.

In addition to those three main success criteria, WCAG also has some rules that talk about the focus, that is the place of the specific element that a user has navigated to.

• For orientation purposes, 2.4.3 Focus Order makes sure that the order of the focus makes sense for the content.

• 2.4.7 Focus Visible allows users to quickly identify where they are on a website.
  Note that the exact nature of “visibility” is not defined here. It’ll be precisely defined in WCAG 2.2.
  Click the “subscribe” button and the notification bell to get informed once WCAG 2.2 is available and I release a video about the new requirements.

• Last, but not least, 3.2.1 On Focus makes sure that the website or application does not trigger an action just for navigating to a certain item.

How does keyboard interaction work?

After loading a page, pressing the tab key navigates to the first “focusable” element on the page.

Not all elements on the page can be navigated to using the keyboard as that would be very cumbersome for users. Instead, only interactive elements like links, buttons or input elements are considered “focusable” by default.

Once a “focusable” element is selected, it gets in the focused state. Screen readers read the focused element’s accessible name and role.

On most operating systems and browsers, the current position of the focus is by default indicated by an outline, a special type of border, or a colored focus ring. When the focus is on a text field, a cursor is placed into the field, indicating that you can start typing.

Note how nothing on the page changes just by using the tab key to focus around and explore the page. You can go back to the previously focused item by holding shift and pressing the tab key.

Once you arrive at interactive elements, you have two choices to activate them. Most elements, like links, are activated simply by pressing the return or enter keys.

Buttons and checkboxes activate when you press the space bar. On input fields, return or enter should submit the form.

A group of radio buttons is considered one interactive element, so they have one collective “tab stop” in the focus order.

Like select boxes, the arrow keys are used to make a selection.

To allow users to know where they are on the page, a prominent outline should be displayed. This focus indicator should be more prominent than equivalent hover states as you generally look in the direction you move your mouse, but the focus can jump around significantly and unexpectedly.

What are the most common issues with keyboard interaction?

Most issues stem from an interpretation of the web as a purely visual medium. Many designers do not design for anything else but mouse interaction because that is what they use all day. That often means hover styles for mouse users are defined but focus styles are forgotten. Often, it is sufficient to re-use the hover styles for the focus indicator.

In addition, many developers do not use appropriate HTML elements for interactive elements. It happens quite frequently that a <div> element is used instead of a link or a button, which means that it is not in the focus order.

While it is possible to retroactively add keyboard functionality and semantics to <div>s, it is usually easier to just use a button instead.

Sometimes the default focus outline is considered as ugly or not fitting the design and therefor removed. I would recommend finding a visually nice focus style and use that instead.

Notice that the default focus can be considered invisible in some cases, for example in Firefox the black dotted outline is almost impossible to see when the background of the focused element is dark.

Avoid outline: 0; or outline: none; in your CSS at all cost. They remove the outline, which indicates the keyboard focus, altogether. Your website is then not navigable by keyboard anymore.

Usually, I recommend using a high contrast color and at least a two or three pixel thick outline, so that the indicator is easy to see. Using outline-offset in CSS, you can have some distance between the outline border and the focused content.

Keyboard traps rarely occur these days, but they can still happen if you use JavaScript to manipulate the focus, so watch out for them.

To conclude:

• Make sure your content is reachable using the keyboard by frequently testing that you can reach all interactive elements.

• Use standard elements, so users can use learned interaction patterns with links, buttons and other form elements.

• Use a prominent focus style that makes it easy for users to see where they are on the page.

Stay tuned to learn more about web accessibility on my channel. Make sure to click subscribe and hit the notification bell icon to not miss anything. And of course you can support me on Patreon at patreon.com/yatil or follow me at twitter.com/yatil — that's Y-A-T-I-L — where you can send me questions using the #askYatil hashtag.

Thanks for watching and see you in the next video.