Performing a basic keyboard test is neither time-consuming nor technically challenging. It’s a straightforward way of testing in the process of making sure your site is accessible to everyone.
If you’re using the Greyd Theme, you’re already ahead of the curve, as its default output is designed with keyboard accessibility in mind. But testing your site for keyboard accessibility is recommended as standard procedure at all times. Keyboard accessibility can be affected by several factors during the building process of a site.
For example, when third-party plugins are added, or custom code, or you choose another theme to use in conjunction with Greyd.Suite, testing your site for this aspect is essential to avoid accessibility issues like missing focus indicators or keyboard traps.
Anyone can test keyboard accessibility
You don’t have to be a developer or a designer to perform this test. Once you know the shortcuts and what to look for, you’re good to go. In the video below you can see what is meant by keyboard navigation:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Performing a basic keyboard test is neither time-consuming nor technically challenging. It’s a straightforward way of testing in the process of making sure your site is accessible to everyone.
Supporting keyboard navigation is about meeting legal standards, enhancing usability, and, as such, broadening your audience. Accessibility guidelines like WCAG emphasize the importance of keyboard-friendly websites, and many accessibility laws require it. Beyond compliance, a site designed with keyboard users in mind often delivers a better experience for everyone, from power users to those navigating assistive devices.
The keyboard shortcuts
Before you start testing, it’s good to know the keyboard shortcuts.
Tab
Moves forward from one interactive element to the next (e.g., buttons, links, form fields).
Shift + Tab
Moves backward through interactive elements.
Enter
Activates a link or button, or submits a form.
Spacebar
Typically used to select or clear a checkbox, or to activate a button if Enter doesn’t work.
Esc
Closes menus, modals, or other pop-up elements.
Usage of Arrow Keys
Arrow keys are particularly useful in certain contexts for finer navigation:
Scrolling Content: When focus is within a scrollable area (like a text box or a section with overflow), arrow keys can scroll the content up, down, left, or right.
Interacting with Sliders: On sliders or range inputs, arrow keys can adjust the value. The Left Arrow and Right Arrow usually decrease and increase the value, respectively.
Navigating Between Radio Buttons: In a group of radio buttons, arrow keys can be used to select different options.
Navigating between tabs in a Tabs Block.
Navigating Complex Widgets: In complex widgets like data grids, calendars, or tree views, arrow keys can navigate between individual elements or change dates.
Usage of Arrow Keys
Arrow keys are particularly useful in certain contexts for finer navigation:
Scrolling Content: When focus is within a scrollable area (like a text box or a section with overflow), arrow keys can scroll the content up, down, left, or right.
Interacting with Sliders: On sliders or range inputs, arrow keys can adjust the value. The Left Arrow and Right Arrow usually decrease and increase the value, respectively.
Navigating Between Radio Buttons: In a group of radio buttons, arrow keys can be used to select different options.
Navigating between tabs in a Tabs Block.
Navigating Complex Widgets: In complex widgets like data grids, calendars, or tree views, arrow keys can navigate between individual elements or change dates.
Conducting a keyboard test:
Navigate using your Tab key
Reload the page (CMD + R on Mac and CTRL + R on Windows). Then press the Tab key to start navigating through the page. It should be visible to you that you landed on a focusable element (for example a link, a button or a form field) by a visual indicator. While you are tabbing, the focus should move logically from one interactive element to the next in a predictable order.
Check focus visibility
Ensure that when an element is focused, it is clearly visible. This can be through a change in color, an outline (a border around it), or other visual cues. This visual indicator must have sufficient color contrast.
Test all interactive elements
All interactive elements, such as links, buttons, form fields, and custom controls, must be operable using the keyboard. This includes being able to activate or select these elements.
Check focusable elements in blocks
If the feature includes blocks with focusable elements, ensure that each element can be focused and operated via keyboard. The focus order should reflect the visual order.
Ensure there are no keyboard traps
Make sure there are no points where a keyboard user can get trapped in a loop or unable to move forward or backward. A notorious example of third-party plugins causing keyboard traps are popups like cookie banners. Can you choose your options and close it? Or does it obscure the page and do you see the content flow by while you are tabbing? That is a classic example of a keyboard trap.
Test with different browsers
Make sure you perform these tests in several browsers, like Chrome, Safari, Edge, and Firefox. To enable keyboard navigation in Safari you have to enable it in the system settings first.
Turning on full keyboard navigation in Safari
- Open Safari, and got to Preferences ( ⌘ + , )
- Advanced (the last tab)
- Accessibility.
- “Press tab to highlight each item on a webpage” checkbox.
What can you do when you discover an issue?
If you discover issues with keyboard accessibility on your site, don’t panic. There are steps you can take to address them. Start by reaching out to your theme or plugin provider. Many developers are happy to help resolve accessibility issues, as it reflects well on their product. At Greyd, we’re quite vocal about this in general, and we too are always happy to get feedback if accessibility are found, so we can resolve them quickly.
If you’re comfortable coding, you can add fixes directly, such as ensuring focus indicators are visible or correcting focus order. For example, use CSS to define a clear outline for focused elements or JavaScript to adjust the tabindex if needed. If coding isn’t your strong suit, consider hiring an accessibility expert to assist. By addressing these issues, you’re not only making strides in ensuring your website meets accessibility standards but you also improve the usability of your site for everyone.
Would you like to take Greyd.Suite for a spin? You can test it for free!
