The major key to digital accessibility is a user-friendly site. You want your website to be easily navigable by all people who want to use your services, buy your products, or interact with your business. In order for blind and visually impaired users to access your site with ease, a keyboard navigation option is a must.
Users who have Braille keyboards and those with motor disabilities rely on their traditional or modified keyboards to navigate websites instead of a mouse. Other assistive technologies also depend on keyboard accessibility (voice recognition software and screen readers).
When using keyboard navigation, the following keys are fundamental:
-
TAB: Navigate forward
-
SHIFT+TAB: Navigate backward
-
SPACE: Check or uncheck boxes
-
ENTER: Activate a link
-
Left, right, up, and down arrow keys: Navigate between or to options
To create an accessible keyboard experience you need the following:
Clearly defined Keyboard Focus Indicator
Keyboard focus is a visual indicator letting the user know where to tab to to activate keyboard navigation. (Links, buttons, and form controls are already accessible to keyboard users, so those don’t need an indicator.) It’s coded by default into common web browsers (usually a thin, grey dotted line or blue solid border), but some web designers remove it for appearance purposes. As we know, sites are more than aesthetics and accessibility trumps that every time.
Instead of removing the focus indicator, have your team design it in a way that’s consistent with your company’s branding. No matter what design you use, make sure it is highly visible with adequate contrast.
Accessible interactive elements
Interactive elements can add to a site’s user experience and design from quizzes to videos and more. Make sure that all drop-down menus, buttons, and other added widgets are accessible and are able to be “Tabbed” through.
Intuitive navigation order
Keyboard navigation should follow the visual flow of the page, even if users are unable to see it. The page should flow from left to right and top to bottom starting with the header first, followed by main navigation, then page navigation, and ending at the footer. This can all be done via coding on the backend of your website.
Add a “Skip Navigation” option
Tabs are used to help visually inclined users scan a web page to find the elements they want to navigate to and interact with by clicking their mouse. While it’s helpful to those who are sighted, it can be tedious for keyboard users to tab through lengthy navigation like a long list of links.
Providing a link to “Skip navigation” or “Skip to main content” makes it more user-friendly and efficient for those using keyboards.
Comments