Interacting with the UI using Mouse, Touch and Keyboard

Introduction

Hello there! My name is Ericson. I’m an associate software engineer at goodfrontend.dev with a passion for creating engaging and user-friendly web applications. My role is to bring ideas to life on the internet by building web applications that are not only visually appealing but also functional and intuitive for users to navigate. Moreover, I am committed to promoting accessibility (a11y) to ensure everyone, regardless of ability, can access and interact with the content seamlessly.

In today’s mobile driven world, a mobile first website is essential. With over half of internet users accessing the site through mobile devices, It’s crucial to prioritize the user experience on smaller screens. It gives businesses a competitive edge, caters to a wider audience, and ensures accessibility for all users.

It’s also crucial to make sure everyone can access and use websites and applications easily. That’s why conducting an accessibility audit is important. This audit helps identify any barriers that might prevent people with disabilities from fully using the websites and applications. By doing this, not only do you follow legal requirements, but you also create a better customer experience for everyone.

Discovering the gaps

Our previous project’s accessibility audit shed light on the barriers faced by individuals with disabilities on our website. The findings highlighted inadequate color contrast, limited keyboard navigation, missing controls for motion, and accessibility specific HTML attributes, which hindered their full engagement with our platform. Moreover, the audit points out addressing accessibility barriers and the pivotal role of assistive technologies, such as screen readers. By optimizing our website for screen readers and assistive tools, we ensure that all users can access content seamlessly.

Embracing Accessibility

We believe everyone should have easy access to online content. That’s why we make accessibility a top priority. We ensure our websites cater to diverse needs, such as screen readers for the visually impaired, captioned videos for the hearing impaired, and easy keyboard navigation. It’s not just about following rules or laws. It’s about creating an inclusive environment where all users can participate fully.

After the accessibility auditors finished conducting the audit, the team prioritized identifying the issues affecting the highest number of users. One of the key areas we chose to focus on was enhancing keyboard navigation support, which is crucial for users with motor disabilities or those who prefer not to use a mouse. Additionally, we addressed screen reader compatibility to ensure that visually impaired users can access and navigate our website effectively. To ensure the changes aligned with the website’s mobile first approach, we tested accessibility improvements on various mobile devices. By doing so, we verified that the changes enhanced keyboard navigation and screen reader compatibility while maintaining a seamless user experience on mobile platforms.

Reaping the Benefits

Enhancing keyboard navigation on your website brings positive results. It helps you avoid legal issues and gain more customers, as people with disabilities and others appreciate a better user experience. It also gives you a competitive edge by showing that your business cares about accessibility. Additionally, it improves your website’s SEO and allows you to help more people, expanding your audience and increasing user satisfaction.

Expected Success and Impact

The expected success and impact are an enhanced user experience, a wider reach of audience, improved search engine optimization (SEO), and a positive perception of the brand, all while demonstrating a commitment to inclusivity for all users.

Final Thoughts

In my previous project that supported keyboard navigation, we encountered common errors such as:

• Lack of focus indicators
• Skipping focusable elements
• Improper tab order
• Inaccessible drop down menus
• Non-semantic HTML structures
• Missing aria attributes
• Lack of focus management for dynamic content
• Focus traps

Having gained valuable experience in making project more keyboard-friendly, here are some simple tips for better keyboard navigation during development:

1. Use native HTML elements
2. Semantic HTML
3. Keyboard testing tools such as Axe or Wave
4. Tab Key Navigation
5. Landmarks and Aria Roles
6. Every mouse interaction should have an equivalent keyboard shortcut
7. Handling Focus Trap (Sliders, Trays, Modals)
8. Focus Order

To learn more about keyboard accessibility you can visit any of the following sites

1. WebAim
2. W3C
3. MDN

In part 2, we will solve common keyboard navigation challenges.