To make the web truly accessible, it’s crucial to first understand how different people interact with it and the barriers they might face. Building this understanding is not just a technical requirement — it’s about recognizing the diverse needs of real users and incorporating them into your development process. For some, the typical setup of a mouse, keyboard, and monitor simply isn’t enough. These users rely on assistive technologies and adaptive strategies to navigate the digital world.

• Assistive technologies include both hardware and software solutions, like screen readers or switch controls, that enable individuals with disabilities to use digital products.

• Adaptive strategies are the techniques these users employ to interact with the web, such as adjusting browser settings or increasing text size.

In the following sections, we’ll delve into some of these assistive technologies and adaptive strategies, shedding light on how people rely on them every day to access the web. More importantly, we’ll hear from the voices of those who use and depend on these tools, providing a perspective that’s often missing from the conversation around accessibility.

Imagine navigating the digital world without the use of your hands. For many, this is a daily reality. Greg, a quadriplegic YouTuber, offers us a window into his life, where he showcases how he uses an iPad with the help of a mouthstick. This assistive technology allows individuals with limited mobility to interact with touchscreens and keyboards by holding a stick in their mouth, tapping, swiping, and typing with precision and patience.

Although Greg doesn’t directly mention any challenges in the video, you might have thought of some potential issues. Here are a few common obstacles that people using mouthsticks might encounter:

• Too-small interactive elements: Think about how frustrating it would be to try and tap a tiny button with the end of a stick. The solution? Make your targets big enough to be easily clickable — whether with a finger, a mouthstick, or any other tool.

• Multitouch gestures: Some actions, like pinching to zoom or swiping with two fingers, can be nearly impossible with a mouthstick. Providing alternatives, such as buttons for zooming or single-tap actions, ensures that everyone can use your site effectively.

• Time-sensitive elements (e.g. carousels): Trying to navigate a page where elements change automatically before you’ve had a chance to interact with them can be challenging. For users relying on mouthsticks, this can be incredibly frustrating. The solution here is twofold:

  • Be transparent: Show how much time is left before an element changes.

  • Offer control: Allow users to disable autoplay and give them the time they need to interact with content.

Navigating the web without the ability to see or hear is a reality for many people. Ramona shows us how she overcomes these challenges by using a Braille tablet to take notes and read them later. Braille displays are powerful tools that enable individuals who are blind, deaf, or both to participate fully in the digital world, translating on-screen text into Braille that can be read by touch.

Here are some common pitfalls that can make using a Braille display difficult:

• Poorly structured HTML: Clear, logical HTML structure is essential for Braille displays to convey information accurately. Disorganized or improperly nested elements can make content confusing or even inaccessible.

• Inconsistent or erratic focus: A stable and predictable focus is crucial for users relying on Braille displays. If the focus jumps around the page unpredictably, it can be difficult for them to follow the content.

• Inadequate or missing alt text: Alt text provides essential descriptions of images and other non-text content. Without descriptive and accurate alt text, users may miss out on important information.

• Unclear or missing page titles: Page titles are often the first piece of information a user encounters. A clear and descriptive title helps users understand the context of the page and its content right from the start.

Meet Tyler, a quadriplegic man who effortlessly navigates his smartphone using only his breath. With the help of a Sip-and-Puff device, Tyler can interact with his phone by simply inhaling or exhaling through a tube, sending specific commands to his device. This ingenious piece of assistive technology allows people like Tyler to engage with the digital world in ways that would otherwise be impossible.

The Sip-and-Puff device is just one of many tools that enable those with limited mobility to participate fully in the online experience. Different types of these devices offer various levels of control, and they’re often paired with button switches to provide a range of functionalities. However, using these devices isn’t without its challenges — especially when it comes to poorly designed websites.

Consider the following common issues that users of Sip-and-Puff devices and button switches might face:

• Incorrect focus order: Imagine trying to navigate a webpage, but the focus jumps erratically between elements, making it nearly impossible to move through the content logically. The fix? Ensure that the focus order is intuitive and follows a natural flow, guiding users smoothly from one element to the next.

• Dynamic content with improper focus management: When a modal opens, it’s essential that the focus shifts to the new content, allowing the user to interact with it immediately. Likewise, when the modal is closed, the focus should return to the element that triggered it. Without this, users like Tyler might find themselves lost on the page, struggling to regain control.

• Missing focus highlights: For those relying on assistive devices, a visible focus highlight is crucial. Without it, users can’t easily tell where they are on the page, leading to confusion and frustration. Ensure that focus states are clearly visible, with distinct and easily recognizable styles.

• Complex or poorly structured content: A cluttered or disorganized website can be a nightmare for someone using a Sip-and-Puff device. Simplify your layout and organize content logically to make navigation as straightforward as possible.

In this video, Jason, who is blind, shows us how he uses a screen reader to interact with digital content. Screen readers are crucial tools that convert on-screen text into synthesized speech or Braille, allowing users who are blind or have low vision to access websites, apps, and documents. While Jason uses specialized screen reader software, it’s worth noting that most modern operating systems, like Windows, macOS, iOS, and Android, come with built-in screen readers. This widespread availability highlights just how common this technology is and why it’s essential to design content that is accessible to screen reader users.

Here are some common issues and solutions to consider:

• Poorly structured HTML: Screen readers rely heavily on the underlying HTML structure to navigate content. Proper use of heading levels (H1, H2, H3, etc.) is crucial for helping users understand the hierarchy and structure of the content. A clear structure with appropriately used headings allows screen reader users to navigate the page efficiently and understand the relationship between different sections.

• Missing alt text: Alternative text for images is vital for conveying the content of visual elements to screen reader users.

• Lack of ARIA roles and landmarks: Accessible Rich Internet Applications (ARIA) roles and landmarks help screen reader users navigate complex web applications. By correctly implementing ARIA roles, developers can create landmarks that screen reader users can jump to, improving their ability to move through content efficiently.

• Inconsistent focus management: Users need to know where their focus is at all times. Dynamic content changes, such as pop-up modals or interactive components, should ensure that the focus is appropriately managed.

• Auto-playing content: Auto-playing videos or audio can be disruptive for screen reader users, as it can interfere with the screen reader’s speech output. Providing users with the ability to control or disable auto-playing content is essential for a smoother experience.

Up to this point, we’ve explored various assistive technologies that help people with disabilities navigate the digital world. But technology is only part of the solution. In this chapter, we’ll dive into adaptive strategies, practical techniques that individuals with disabilities use to interact with digital content. Marta, who is both blind and deaf, will guide us through her experience, showcasing how she combines assistive technologies with adaptive strategies to overcome everyday challenges.

Here are some of the strategies Marta uses:

• Using a physical magnifying glass: This simple yet effective tool helps her read printed text or view content on a screen, but it requires the content to be clear and legible at a closer range.

• Using an on-screen magnifier: This tool enlarges specific areas of the screen, making it easier for Marta to navigate. However, a clear and well-structured page with distinguishable headings is crucial for helping her orient herself within the content.

• Increasing text or document size: Marta enlarges the text to read more comfortably, but horizontal scrolling can be problematic. Ideally, zooming in a browser should allow users to only scroll vertically, maintaining the flow of the content.

• Using sign language: For communication, Marta relies on sign language, emphasizing the importance of accessible multimedia content, such as videos with sign language interpretation or captions.

As you observe Marta’s methods, reflect on how these adaptive strategies could be supported or hindered by different web design choices. By understanding and accommodating these strategies, we can create a more inclusive digital environment for everyone.

As we’ve explored throughout this blog post, simply engaging with the topic of accessibility — by talking to those affected and experimenting with assistive technologies — can reveal many a11y problems and their solutions. The issues and fixes we’ve discussed, and likely the ones you discovered yourself, are all addressed in the Web Content Accessibility Guidelines (WCAG). This is no coincidence; the WCAG was developed with input from people who face these challenges every day. The key takeaway here is that often, just by using common sense and putting yourself in the shoes of those affected, you can identify potential accessibility issues. This is something everyone should do when creating or developing something new. By doing so, you’re already making a significant impact. You can always refer to the WCAG later to ensure you’ve covered everything. Ignoring this topic or sticking to the way things have always been done is certainly the wrong approach.

As mentioned at the beginning, accessibility offers benefits for everyone. We’ve seen how easy it is to recognize and resolve obvious issues ourselves. Furthermore, there’s potential to tap into new user groups who can benefit from improved accessibility. For instance, the growing number of older adults using the internet presents a significant opportunity. Companies that recognize this expanding user base and adapt their products accordingly can gain a strong competitive advantage.

This blog post has shown us that accessibility is a topic that benefits everyone and that we all should engage with. By simply thinking about it and exchanging ideas with those affected and their technologies or strategies, you can develop a good understanding of this important area. However, this alone isn’t enough to ensure that everyone can participate fully in the digital world. That’s why it’s essential to understand how to use the WCAG, review your products accordingly, and be aware of the tools available for this purpose. These more technical topics will be covered in future blog posts. So, be sure to check back regularly or subscribe to our RSS feed to make sure you don’t miss out on any updates.