Understanding Keyboard Accessibility

Basically, it is required that all interactive elements should be accessible and operable via keyboard. It makes sense if the standard keys work. However, this is not mandatory.

Article Content

• Keyboard operation checklist
• Main shortcut keys (Windows)
• Focus Management
  • • Best practices for effective focus management:
• Requirements
• Further information
• Testing

Keyboard operation checklist

• All clickable elements are keyboard accessible and can be interacted.
• All editable elements are keyboard editable.
• The focus of the keyboard is always clearly visible.
• The order of keyboard operation makes sense.

Please also check the focus of dynamically displayed elements such as modal dialogs or expanding navigations. Basically, the focus should be on the modal dialog. For drop-down menus, the focus should descend into the opened menu. When he reaches the end of the menu, he moves to the next clickable item.

Tab Index is not used if possible. If Tab Index is used, the value should be 0 or negative.

If non-standard keyboard shortcuts are used or if the application provides its own keyboard shortcuts, these must be documented and easy to find.

Keyboard traps are forbidden, i.e. areas from which the focus can no longer be moved. These include in particular frames, programmed elements, WYSIWYG editors or areas with endless scrolling. With the latter, you need to ensure that the user is given a mechanism to move out of the scrolling or to skip that area.

According to WCAG 2.2, the focus must at least meet the following requirements:

• It must be at least two pixels wide.
• It must have at least 3:1 to adjacent colors.
• The focused element must be mostly visible, i.e. the focused element must not be predominantly outside the viewport.
• The focus must of course frame the element, that is, it must not overlap the element that is in focus.

When it comes to focus highlighting, please pay particular attention to background images, color gradients and similar things, especially if they can be changed dynamically or through the content manager. There is practically no guarantee that the focus requirements will be met. This can be influenced by changing the entire color of the focused element.

Recommendation: Although allowed by WCAG, avoid inverting colors when focusing. The problem is that many visually impaired users already work with inverted colors, for example light text on a dark background. If you invert the colors, the user will most likely end up with the combination of dark text on a light background that she wanted to avoid because of her sensitivity to glare.

Main shortcut keys (Windows)

Focus Management

Focus management refers to the ability of a website or application to direct the user's focus to the relevant content or features. It's about ensuring that users with different skillsets and preferences can find and use the information and features they need without being distracted by unnecessary or confusing content. Effectively managing focus can reduce barriers for people with cognitive impairments, visual impairments, or motor disabilities.

Accessibility for people with visual impairments: For people who rely on screen readers or alternative input methods, a clearly defined focus is crucial. By highlighting relevant content, they can navigate and gather information more effectively. The lack of a clear focus can lead to confusion and frustration.

Ease of use for people with physical disabilities: Users with physical disabilities who use alternative input methods such as keyboards or voice control benefit from a clear focus on interactive elements. The right order and highlighting makes it easier for them to switch between different functions and perform actions.

Reducing distractions and cognitive overload: Effective focus management helps eliminate unnecessary visual or textual clutter that can overwhelm users with cognitive impairments. By highlighting important information and reducing visual noise, it reduces cognitive load and improves the user experience.

Best practices for effective focus management:

Clear visual focus: Use visual cues like colors, contrasts, or borders to draw focus to interactive elements like links, buttons, or forms. This helps users to more easily identify and understand the relevant content. A focus of 2 pixels wide and a contrast of 3:1 to adjacent colors is recommended.

Logical Tab Order: Ensure that the order in which items are tabbed is logical and intuitive. This allows for easy navigation for users using keyboards or alternative input methods.

Dynamic content focus management: When content changes or updates dynamically, ensure focus remains on the updated content. Users should not suddenly lose focus due to automatic updates or animations.

• When new elements such as dialog boxes are added, the focus should usually be set to the top clickable element in the new area.
• If elements are removed, the focus should be set to the element that triggered the insertion of the new element.

Clear error notices: If a user makes a mistake while entering information, clearly draw focus to the error notice or location to facilitate troubleshooting.

Ease of Keyboard Navigation: Ensure that all interactive elements are keyboard accessible and that focus remains consistent and visible as the user moves between elements.

Requirements

• Guideline 2.1 Keyboard Accessible
• Success Criterion 2.4.7 Focus Visible

In WCAG 2.2 the following are added:

• 2.4.11 Focus Not Obscured (Minimum) (AA)
• 2.4.12 Focus Not Obscured (Enhanced) (AAA)
• 2.4.13 Focus Appearance (AAA)

Testing

Basically, the accessibility via keyboard should be tested directly with the keyboard.

Tab Index is an HTML attribute. So it can be found by simply searching for it in the source code.

You can view the tab order using the Accessibility Inspector in Firefox. To do this, go to the "Extras" menu, then to "Browser tools", then to "Tools for web developers". In the tools, select "Accessibility" and then check "Show tab order".

Read more on accessible Development

• Hypertext Markup Language
• Cascading Stylesheets
• Javascript, AJAX & Dynamic
• Accessible Rich Internet Applications - ARIA
• Semantic and Machine Readibility for Accessibility