The Invisible Barriers of the Digital World
Imagine Sara, a web developer with a degenerative eye condition, trying to buy a new coding course online. She uses a screen reader and keyboard to browse websites. After finding the perfect course, she tries to click the “Buy Now” button using her keyboard, but nothing happens. While the button looks like a standard button visually, the website developer created it using a decorative element that her screen reader can’t recognize as a button, and her keyboard can’t interact with. Her screen reader doesn’t even announce it as a clickable button. Despite her skills and willingness to pay, Sara can’t complete her purchase because of the improper implementation of ARIA roles and a lack of keyboard accessibility.
This scenario plays out countless times each day across the web. According to recent accessibility research, there has been a dramatic increase in the use of accessibility features on websites, but many are implemented incorrectly. This suggests that while website owners are increasingly aware of accessibility, many are applying the solutions improperly, potentially creating new barriers rather than removing them.
But what if we could design websites that seamlessly accommodate all users? This is where proper ARIA roles and keyboard accessibility enter the picture, not as technical checkboxes to tick, but as essential parts of creating truly inclusive digital experiences with accessible navigation.
ARIA: Making Websites Speak to Assistive Technologies
What Is ARIA and Why Does It Matter?
ARIA (Accessible Rich Internet Applications) is a set of special labels added to website elements that help assistive technologies understand what these elements do. Think of these ARIA roles as providing spoken instructions for parts of your website that might otherwise be silent to someone using a screen reader.
For example, a typical dropdown menu might be obvious to someone who can see it, but without proper ARIA roles, a screen reader user might not know it’s a dropdown, whether it’s currently open or closed, or which option is selected.
The Golden Rule: Use ARIA Only When Necessary
The first rule when considering implementing ARIA roles is surprisingly simple: “No ARIA is better than bad ARIA.” This means that properly built website elements usually don’t need additional ARIA labels at all. Well-designed websites use standard building blocks whenever possible, since these come with built-in keyboard accessibility features.
For example, instead of creating a custom-made button that looks pretty but doesn’t function properly for keyboard users, ask your developer to use a standard button element and style it to match your design. The standard button automatically works with keyboards and screen readers without any extra effort.
How ARIA Works: The Three Building Blocks
When implementing ARIA roles is needed, it consists of three main parts:
- Roles: Tell assistive technologies what an element is (like “This is a menu” or “This is a search box”)
- States: Communicate the current condition (like “This menu is currently expanded” or “This checkbox is checked”)
- Properties: Provide additional information (like “This button controls the following panel” or “This field requires information”)
These work together to create a complete picture for people using assistive technologies. Without them, many interactive features of modern websites remain invisible or confusing to a significant portion of your audience.
Learn more: Web Accessibility Initiative ARIA Overview
Why Keyboard Accessibility and ARIA Go Hand-in-Hand
Proper ARIA roles help assistive technologies understand your website, but this is only half the solution. Without proper keyboard accessibility, many users still can’t interact with your website, regardless of how well ARIA describes it.
This is where the true connection between ARIA roles and keyboard navigation becomes clear. ARIA tells users what elements are, while keyboard accessibility ensures they can use them.
Beyond Screen Readers: Who Benefits from Keyboard Navigation?
Keyboard accessibility isn’t just for screen reader users. Many people rely on keyboards to browse the web:
- People with motor disabilities who cannot use a mouse
- People with temporary injuries (like a broken arm)
- People using alternative input devices that mimic keyboard functions
- Mobile users with external keyboards
The ability to navigate a website using only a keyboard benefits an incredibly diverse range of visitors to your site.
The Three Pillars of Keyboard Accessibility
1. Meaningful Focus Indicators
When someone tabs through your website, each interactive element should clearly show when it’s “in focus” (currently selected). This visual indicator is critical for keyboard users who can see the screen. The best practice is maintaining visible focus indicators rather than removing them for aesthetic purposes. Well-designed focus states can be both attractive and functional.
Learn more: Keyboard Accessibility – Nielsen Norman Group
2. Skip Links: The Highway Past Navigation
Imagine having to press the tab key 20+ times on every single page just to get past the navigation menu and reach the content you want. That’s the reality for keyboard users on many websites.
‘Skip links’ allow keyboard users to bypass repetitive navigation elements and jump directly to the main content. They’re typically invisible until a keyboard user tabs to them, at which point they appear at the top of the screen. They let the user jump straight to the main content area when activated.
Adding a simple “Skip to main content” link at the very beginning of your website can make a tremendous difference in enabling accessible navigation for keyboard users.
Learn more: WebAIM: Skip Navigation Links
3. Logical Navigation Order
Interactive elements should be navigable in a logical sequence, typically matching the visual flow of the page. When someone tabs through your website, the focus should move predictably, rather than jump randomly around the page. This predictability is essential for keyboard users to navigate efficiently.
Common Pitfalls and How to Avoid Them
Custom Interactive Elements Without Keyboard Support
Many modern websites include custom-designed elements like dropdown menus, tabs, carousels, and modal dialogs. These often work fine with a mouse but fail for keyboard users. The key is to implement proper keyboard accessibility for all interactive elements, ensuring they can be accessed, operated, and navigated using only keyboard controls. Implementing the correct ARIA roles is also critical for these custom components.
Hidden Content That’s Still in the Tab Order
Sometimes websites contain elements that are visually hidden but still receive keyboard focus. This creates a confusing situation where keyboard users tab to something they can’t see. The solution for this is to remove hidden elements from keyboard navigation until they become visible. This approach creates a more logical experience where users only interact with elements they can actually see on the screen.
Missing or Inadequate Focus Styles
Some websites remove the visual focus indicator because designers consider it unattractive. This leaves keyboard users with no way to know which element they’re currently on. Ask your developer to create visually appealing focus indicators rather than removing them altogether. Proper keyboard accessibility relies on clear visual indicators.
Bringing It All Together
ARIA roles and keyboard accessibility work hand-in-hand to create truly inclusive websites. ARIA provides the context that assistive technologies need to understand your website, while keyboard accessibility ensures users can interact with it.
By considering both aspects as part of a unified approach to accessibility, you can ensure your website works for everyone, regardless of how they navigate the web. This isn’t just about compliance with accessibility guidelines – it’s about creating digital spaces that genuinely welcome and include all potential visitors through thoughtful accessible navigation.
Take the Next Step Towards True Accessibility:
- Is your website’s implementation of ARIA roles hurting rather than helping? Are keyboard users hitting dead ends? Discover hidden barriers with Pluro.ai’s free website accessibility audit.
- See firsthand how Pluro.ai can help you master ARIA roles, conquer keyboard accessibility challenges, and maintain accessible navigation and compliance. Book your personalized demo today.
