Web Governance
Can all functionality be operated with keyboard?
Additionally, keyboard operability benefits blind and low-vision users who often cannot see or track a pointer on the screen. Screen readers and braille displays are optimized for keyboard input, which enables these users to interact with content in a logical sequence. Similarly, individuals with low vision may find keyboard navigation more efficient and less visually demanding than relying on a mouse. When you ensure full keyboard accessibility, websites become inclusive for a broad range of users, including both those with mobility impairments and those with visual disabilities.
Sandra is 38 years old. At the age of 16, her life took an unexpected turn during a sports accident on the basketball court. While attempting a daring dunk, she landed in an awkward manner, resulting in a spinal cord injury. Unfortunately, this event left her paralyzed from the waist down.
"As someone who relies on dictation software to get through my day, it is super frustrating when I hit a wall with certain booking systems. The calendar picker? Forget it. It is like the software does not even recognize it as something I can interact with. I will say ‘click’ a hundred times, and nothing happens. So, I am forced to grab the mouse, which might not sound like a big deal, but on my bad days? Every little movement hurts. It turns a simple task like scheduling an appointment into this painful, drawn-out ordeal. I just want to be able to do things on my own terms, without unnecessary barriers."
This section provides some examples of the issue.
A series of icons that allow users to follow a company on social media is implemented as <div> elements, which cannot receive keyboard focus.
Web Governance<div style="width: 40px; height: 40px; background-image: url('linkedin-icon.png'); background-size: cover; cursor: pointer;" onclick="window.open('https://www.linkedin.com', '_blank')"></div>
<div style="width: 40px; height: 40px; background-image: url('youtube-icon.png'); background-size: cover; cursor: pointer;" onclick="window.open('https://www.youtube.com', '_blank')"></div>
<div style="width: 40px; height: 40px; background-image: url('x-icon.png'); background-size: cover; cursor: pointer;" onclick="window.open('https://www.x.com', '_blank')"></div>The use of <div> elements, which cannot receive keyboard focus, makes the functionality of the icons inaccessible to users who rely on keyboard navigation.
A series of icons that allow users to follow a company on social media is implemented as <a> elements, which support keyboard focus by default.
<a href="https://www.linkedin.com" target="_blank" style="display: inline-block; width: 40px; height: 40px; background-image: url('linkedin-icon.png'); background-size: cover; margin: 5px;" aria-label="Follow us on LinkedIn"></a>
<a href="https://www.youtube.com" target="_blank" style="display: inline-block; width: 40px; height: 40px; background-image: url('youtube-icon.png'); background-size: cover; margin: 5px;" aria-label="Follow us on YouTube"></a>
<a href="https://www.x.com" target="_blank" style="display: inline-block; width: 40px; height: 40px; background-image: url('x-icon.png'); background-size: cover; margin: 5px;" aria-label="Follow us on X"></a>The use of <a> elements, which by default can receive keyboard focus, ensures that users who rely on keyboard navigation can also navigate to and activate icon functionality.
This section provides information about how to identify and review the issue.
The Web Governance platform highlights all pages for keyboard review.
You must review all interactive elements on the page and ensure that they can be operated with the keyboard.
1. Examine the page to identify all interactive elements such as links, buttons, menus, dropdown lists, and anything else you can use with a mouse.
2. Test whether each element can be accessed and operated with only the keyboard.
Use the Tab key to move forward through the interactive elements on the page, and Shift + Tab to move backward. For more complex components, such as groups of radio buttons, dropdown menus, or date pickers, you may need to use the arrow keys to navigate or select values within those components. Typically, you will use the Spacebar or Enter key to activate an element, such as a link or button.
Unfortunately, there are no strict rules for how keyboard navigation should work in every case. However, with the key combinations mentioned above, you should be able to navigate the page and test all functionalities.
If you can focus on and operate all elements on the page, you can mark it as Reviewed.
For instructions on how to set an issue to Reviewed, visit How to review an accessibility issue.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.