Key Takeaways

1. Accessibility Starts with Empathy: Designing for visually impaired users requires understanding their unique needs and challenges through real-world testing and user feedback.
2. Semantic HTML is Crucial: Using proper HTML structures ensures screen readers can interpret content accurately, making navigation easier for blind users.
3. Focus Management Improves Usability: Correctly directing user focus during interactions—like forms or modals—creates a smoother experience for assistive tool users.
4. Collaboration Is Key: Designers and developers must work together to implement accessible components, leveraging tools like ShadCN, Tailwind CSS, and Storybook.
5. Accessibility Benefits Everyone: Accessible design principles improve overall usability, creating better digital experiences for all users, not just those with disabilities.

Technology holds the power to transform lives in today’s interconnected world, yet, for many visually impaired individuals, barriers to digital access still persist. Making tech truly inclusive requires more than a checklist; it demands a commitment to understanding user needs, applying thoughtful design principles, and ensuring robust technical implementation.

A recent project, My New Behavior , undertaken by Lizard Global’s development team illustrates this journey, highlighting the challenges and breakthroughs of building technology that welcomes all users.

The Challenge: Designing for Different Levels of Visual Impairment

Creating an accessible platform for visually impaired users wasn’t just a technical task—it was an entirely new way of thinking. While many design principles prioritize readability for sighted users, they don’t account for the needs of blind or partially sighted individuals.

The project began with a commitment to align with the Web Content Accessibility Guidelines (WCAG) Level 2. This set of standards outlines best practices for making web content more accessible to individuals with disabilities, including those with visual impairments.

Eric, Lizard Global’s Director of UI/UX Design , spearheaded the initial efforts, focusing on key accessibility principles. These included ensuring sufficient color contrast for readability, selecting fonts that balanced style and clarity, and structuring components in a way that made navigation intuitive. But it wasn’t just about ticking off requirements; it was about designing with empathy. “Accessibility is about more than compliance,” Eric reflected. “It’s about imagining how someone interacts with technology in ways that are completely different from our own experiences. That’s where real inclusion begins.”

The design team leveraged tools like Figma, which offers plugins to evaluate design elements for accessibility. These plugins assess factors such as contrast, font readability, and text size, helping designers identify issues before handing off work to developers. Eric described the process as empowering: “It’s amazing how many resources are out there once you start looking. Even if an app doesn’t require full accessibility, incorporating these principles becomes second nature.”

The Design Process: From Concept to Collaboration

The design phase involved a blend of creativity, technical precision, and close collaboration with both the development team and the client.

1. Using Simulators for Validation

Once the design screens were completed, the team used accessibility simulators to test their usability. These tools allowed them to simulate how users with various impairments would interact with the platform. Key considerations included color contrast, text size, and a linear layout compatible with screen readers.

2. Building Trust Through Communication

Open communication played a critical role. The team maintained regular discussions with clients and developers, staying one sprint ahead of development to ensure alignment. This proactive approach not only built trust but also laid the groundwork for potential future phases of development.

3. Simplifying for Impact

Eric emphasized a minimalist approach: “Building minimally is often better than chasing perfection. Start small, talk to your users, and grow along the way. That’s when it starts to look like a million bucks.”

After refining the designs, the team came together to review them. They wanted to ensure the concepts were not just visually accessible but also practically usable when implemented. This collaboration set the stage for the development phase, where ideas transformed into tangible solutions.

From Design to Development: Bridging the Gap

The transition from design to development often reveals gaps that need addressing, and this project was no exception. Developers faced the challenge of turning the accessible designs into functional components that worked seamlessly for both visually impaired and fully blind users.

One of the team’s earliest decisions was to incorporate semantic HTML—a foundation for accessible web design. Semantic HTML ensures that screen readers, the primary tool for blind users, can correctly interpret and convey the structure of a webpage. Simple elements like header, main, and footer give clarity to the page hierarchy, while descriptive tags for images and meaningful label tags for form elements provide context.

Focus management became another critical focus area. For instance, when a user opens a pop-up form, their focus should automatically shift to the first question, ensuring they don’t need to hunt for the starting point. Similarly, closing the form should return focus to a logical place, like the button that triggered it. Without this structure, visually impaired users might find themselves lost in the interface.

To streamline the development process, the team turned to ShadCN, a customizable UI library that supports accessibility. Unlike other libraries such as Ant Design, which had limitations in this regard, ShadCN allowed developers to tailor components to meet specific needs. It also facilitated close collaboration with the design team, ensuring consistency and usability across the application.

Understanding the Users: The Power of Real-World Testing

While the team initially designed with visually impaired users in mind, their understanding of the user experience evolved during testing. Early assumptions centered around partially sighted users, but as they dug deeper, they realized they needed to accommodate fully blind users as well.

To bridge this gap, they tested their platform with tools like JAWS, a popular paid screen reader for Windows, and macOS’s built-in VoiceOver. These tools translate on-screen elements into auditory feedback, allowing users to navigate the web without sight.

Meeting actual users was a turning point for the team. Watching how blind individuals interacted with their prototype brought to light unforeseen challenges. For example, some elements technically functioned but didn’t behave as users needed. A button might announce itself as "clickable," but without clear functionality or feedback, it left users stuck.

“It’s humbling to see how users adapt to technology, but also how small oversights can create massive barriers,” Wan, the project’s backend developer, shared. “Testing with real users showed us where we needed to improve.”

Building a Better Workflow: Collaboration Across Teams

The project’s success hinged on seamless collaboration between designers, developers, and testers. Using a suite of modern tools, the team ensured their workflow stayed efficient while prioritizing accessibility.

• ShadCN: Enabled the team to create flexible, accessible components.
• Next.js Framework: Provided a scalable foundation for the project’s web application.
• Tailwind CSS: Allowed developers to style components efficiently without compromising accessibility.
• Storybook: Acted as a showcase for individual components, making it easier to test and refine them in isolation.

Whenever new components were added, the team conducted design reviews to assess their accessibility. These reviews sparked discussions about whether the new additions could be implemented effectively and how they could serve users better. “It kept us on our toes,” Joan, the project’s front-end developer, noted. “Every new element was a chance to think critically about accessibility.”

The Broader Impact of Accessibility

Beyond the technical and design challenges, the project underscored a critical truth: accessibility is a win for everyone. Accessible designs often result in cleaner, more organized code and more user-friendly interfaces, benefiting all users—not just those with disabilities.

However, the team recognized that not all projects would prioritize accessibility to the same degree.

Joan remarked, “It’s a bit niche and not always relevant for every project. But understanding these principles gives us the ability to make a strong case for accessibility when it matters.”

Wan added, “This project was an eye-opener. Spending time on best practices helps us reach a wider audience and creates better digital experiences for everyone.”

One of the most rewarding moments came when users expressed their appreciation for the platform. “It feels incredible to know that the steps we took made a real difference,” Eric said. “It’s not just about functionality—it’s about people feeling valued and included.”

Toward a More Inclusive Digital World

Making technology accessible to visually impaired users isn’t just about meeting a standard—it’s about opening doors to a world of opportunities. For this team, the journey involved learning from users, collaborating across disciplines, and solving unique challenges at every stage.

The result wasn’t just a product that worked for visually impaired users. It was a reminder of the power of inclusive design to transform lives and bring people closer to a digital world that belongs to everyone.

As Eric reflected on the project, he summed it up best: > “Accessibility isn’t just a box to check. It’s a mindset. And when you embrace it, you create something truly extraordinary.”

Lizard Global’s Commitment to Inclusivity and Innovation

Here at Lizard Global, we believe that technology should empower everyone, regardless of their abilities. This project showcased how innovative solutions, collaboration, and user-centered design can break down barriers and create truly inclusive digital experiences.

Our team’s expertise in accessibility design and development means we can help our clients build solutions that meet the highest standards of usability and inclusivity. Whether it’s through semantic coding, accessible components, or rigorous user testing, we’re dedicated to ensuring your technology reaches and resonates with a broader audience.

By choosing us as your software development partner, you’re not just investing in exceptional technology—you’re embracing a vision of inclusivity and innovation that has the power to transform lives. Let us help you build digital experiences that are not only innovative but also accessible to everyone. Together, we can make technology a space where no one is left behind.