The Best Keyboard Accessibility Guidelines for Keyboard Nerds
In this article, we will discuss four ways to improve online user experiences for people who do not use a mouse. Let's look at each individually.
Use the keyboard to access menus, buttons, and links.
A keyboard needs to be useful if it has all active controls within reach, or is "focused."
Fortunately, keyboard support has been built into interactive HTML elements such as buttons and drop-down form components. By default, they appear as part of the focus order in the browser and have standard keyboard commands associated with them.
However, things can become complex. Many modern web applications use custom controls. For example, accordions and custom dialog boxes. Widget toolkits provide many of these controls. They are usually coded with static HTML elements, such as divs, that do not support native keyboard input. Adding interactive behaviors to custom controls usually requires scripting, and these scripts usually address mouse operation, but rarely address keyboard focus and operation.
Scalable Rich Internet Applications, or WAI-ARIA, was created by the Web Accessibility Initiative in order to address accessibility issues in custom controls. Keyboard focus is emphasized in the standard.
A custom control can be made focusable with the HTML tab index attribute, which is very convenient when using a keyboard. In a drop-down navigation menu, a menu item should only receive focus when the menu is expanded. Giving the control the tab index of "0" places it in the order of focus in the menu. The code indicates this. By assigning tab index "-1" to a custom control, scripting can control when and how it becomes focusable. A custom control should be focused on using the arrow keys and not the tab key.
Utilize keyboard-based controls
An app or website with custom controls requires some scripting and careful planning. Custom buttons, for example, need to be scripted to support the standard method of activating buttons -- by using the SPACEBAR. Scripts must be written so that dialogs can be closed using the ESC key.
The Spacebar Is Most Comfortable To Most People. Therefore, it is necessary to add such custom controls to a website. There are many popular clicker websites that are available for this purpose. It's common for spacebar counter sites to add this custom control to their websites to encourage users to click the spacebar more often and increase CPS.
Here's where WAI-ARIA shines again. These WAI-ARIA Best Practices specify standard keyboard behavior for a range of widgets and controls you might use in your website or app. Make sure the widget or control you create or select supports keyboard commands according to WAI-ARIA Design Patterns.
Based on the WAI-ARIA design patterns document, here is the standard keyboard behavior for a slider widget:
- The Tab key shifts the focus into and out of the slider.
- A RIGHT ARROW and UP ARROW increase the slider's value.
- By clicking DOWN ARROW and LEFT ARROW, the slider value will be decreased.
- The values of HOME and END are the minimum and maximum of the slider.
- A given amount can be incremented or decremented by using the PAGE UP and PAGE DOWN buttons.
It is not possible to script these behaviors into the custom control--they do not appear automatically from the HTML or WAI-ARIA markup.
Basically, you can't place code div role = "slider"> on a page and expect it to work as a slider, or that the browser will support the expected keyboard commands, as it does with HTML button, link, and input elements To create an interactive, accessible, and precise custom control, all the control information, and behaviors must be provided in code.
Therefore, native controls should be used whenever possible. Custom controls should only be used as a last resort when no native controls are available. HTML buttons, for instance, support keyboard accessibility by default. Creating a custom button is not necessary.
In addition, even if a complex design pattern keyboard can be made accessible, simplicity of interaction is often the best way to minimize errors and maximize the user experience.
Controls should be arranged logically in a sequence
It can be tedious to interact with complex web applications using the keyboard, as users must navigate through every element on a page to reach the one they need. Keep your focus when using a keyboard.
- The focus order should match the visual layout. Pay attention to how the controls are sequenced so the underlying code sequence reflects the visual layout.
- After you have revealed hidden features such as drop-down menus and expandable content, pay attention to them. Keyboard users don't need to click through hidden drop-down menu items.
Display which control is in focus
A focus indicator is one of the easiest ways to improve keyboard usability; however, they are often overlooked. Separating the control that has focus visually from other controls simplifies navigating through an interface and reduces the chance of a user accidentally activating a control.
Many modern browsers use a clear focus indicator, but some use a light gray dotted border as the default indicator, making it more difficult to spot the focus. Moreover, some websites explicitly remove the focus outline, so there is no visual indication of the focus. Stylesheets containing "reset.css" often set the outline to "0" or "none".
With just one line of CSS, you can make sure that the focus is clearly visible. If your design already includes a visual change for mouse hover events, then apply it to controls that receive keyboard focus. When links receive focus, a 2-pixel solid blue border is created around them:
a: focus {outline: 2px solid blue;}
The focused approach should be applied to all elements that receive attention, including custom controls.
Below is a sample
Usually, a dotted outline is used to indicate focus in browsers (such as Firefox). When focusing on using the keyboard, the Pastry Box Project's link text changes from black to blue to reinforce the visual indication.
In the focus area, a blue dotted outline appears around the link. Changing the background color of the link text or adding a solid border could further enhance the visual indication.
Usability test for keyboards
Evaluations of observed usability provide the best feedback and insights into usability. You can, however, test keyboard usability yourself.
You can navigate all active controls in an interface using the TAB key (SHIFT + TAB reverses tab focus order). It should be possible to navigate through a combo box menu using the arrow keys if it has focus, each control should receive focus and have a visible indicator, each control should receive focus in a logical sequence, and each control should be operable using standard keyboard commands. Examples include.
After you fix any problems you find, you will have a great keyboard experience.