Accessibility During the Design Stage | Webinar & Office Hours

This is what to look for during the design stage. Imagine a world where hold on my I’m very laggy right now I’m going to start my video on Zoom, apologies. Imagine a world where every digital interaction is seamless and inclusive, where every person, regardless of ability, can engage with content effortlessly. This isn’t just a nice to have. It’s a necessity to make this vision a reality, we need to shift left, incorporating accessibility into the design phase, not just as a final check before launch, addressing accessibility early helps us catch potential issues before they become costly problems, saving time and ensuring a smoother user experience.

Today, we’ll explore how we as designers can build accessibility into our digital products from the very beginning, we’ll discuss how using figma and following best practices can lead to designs that are both visually appealing and universally acceptable. Our journey will cover essential topics, such as utilizing W3c design patterns, ensuring proper contrast and touch targets and incorporating visible labels and alt text. We’ll look at designing for cognitive disabilities and how simple, intuitive layouts can make a big difference. We’ll also introduce the accessible web annotation kit, a tool that enhances our digital design workflow by ensuring all accessibility details are effectively communicated to developers. Finally, we’ll discuss the broader uses of the annotation kit from remediation to building accessible design systems and presenting complex designs to stakeholders.

By the end of this talk, you’ll have a clear understanding of how integrating accessibility at the design stage creates a better, more inclusive experience for everyone. Standards are there to help us, guiding us to create better, more inclusive designs. The World Wide Web Consortium, or W3c has put together some design patterns specifically focused on making our websites and apps more accessible to everyone.

Think of these patterns as best practices that cover how we use common elements, like menus, buttons and forms. For instance, when it comes to a navigation menu, these patterns show us how to make sure people can easily move around our site using just a keyboard or a screen reader. They also give us tips on how to make buttons work properly, so that when someone clicks or taps, they get the feedback that they need to know that it worked. And for forms, which can be tricky for some users, these patterns suggest how we can how we should label inputs so they are clear and understandable for everyone. Starting with something as simple yet powerful as color contrast, think about trying to read a book and dim lighting. It’s challenging right? Imagine you have a visual impairment. Every day can be like reading in that dim light. This is why contrast is so crucial.

High Contrast ensures that text and other essential elements stand out, making them readable for everyone. By prioritizing contrast in our designs, we are making sure that our content is visible and engaging for all users, not just a select few. Think about the last time you tried to tap a tiny button on your smartphone and accidentally hit the wrong thing, frustrating, isn’t it? Now imagine you have motor impairments. This frustration becomes a barrier. Designing with adequate touch targets ensures that users can interact with our designs accurately and comfortably. It’s about respecting the diversity of ways people interact with technology and ensuring that no one is left out because of how we design.

Imagine navigating a form without any visible labels, just blank spaces where you have to guess what to enter. For many people, this isn’t just confusing. It’s completely inaccessible. Visible labels are essential for clarity and usability, not just a design preference. They guide users, provide context and ensure that everyone, including those using assistive technologies like screen readers, can accurately understand what’s required. And this goes beyond just forms. The same principle applies to images and other elements. Alt text for alternative text is crucial for describing images to those who can’t see them, ensuring that the meaning and function of the image isn’t lost. Similarly accessible names help describe the purpose of buttons and other interactive elements, allowing screen readers to convey this information. Effectively addressing these elements in the design phase is vital. By embedding clear, persistent labels, descriptive, alt text and accessible names directly into our design process, we’re building accessibility into the foundation of our work. This proactive approach ensures that by the time our designs reach development, they are already optimized for all users.

As we’ve been discussing, accessibility isn’t something we can afford to overlook, and it’s best addressed right from the design phase. But how do we ensure that every aspect of our design, especially those critical for accessibility, it’s accurately communicated to developers. That’s where the accessible web annotation kit comes into play. Currently, accessible web is developing a powerful annotation kit that gives designers the ability to annotate a wide range of accessibility features directly within their figma designs. This kit is designed to fill the gaps left by Figma’s built in tools allowing designers to annotate any part of the design that isn’t inherently communicated through figma itself. With this annotation kit, we can clearly mark things like ARIA attributes, which define roles and states of UI components, add labels and accessible names and specify alt text for images. It allows us to define roles, set heading levels for better content structure and established focus order, which is crucial for users who rely on keyboard navigation. The goal of this annotation kit is to ensure that every accessibility consideration, no matter how detailed or nuanced, can be clearly annotated. This helps bridge the communication gap between designers and developers, ensuring that accessibility is not lost in translation during the development process.

By integrating these annotations into our design workflow, you make accessibility a core part of our digital products, leading to more inclusive and user friendly experiences. Now that we’ve talked about how the annotation kit helps bridge the gap between design and development, let’s explore some of its other powerful uses. This tool isn’t just about making designs accessible, it’s about enhancing every aspect of the design process and beyond. One key use of the annotation kit is in remediation, when we discover accessibility issues in existing designs or products, the annotation kit can be used to clearly mark what changes need to be made. By providing specific annotations on accessibility features that are missing or need improvement, we can efficiently guide teams in fixing those issues, ensuring our products meet accessibility standards without guessing games. The annotation kit is also invaluable when building accessible design systems. By annotating components with specific accessibility attributes, such as Aria, roles, labels and focus orders, we can create a consistent, reusable library of accessible elements. This not only speeds up the design process, but also ensures that every new project adheres to the same high standards of accessibility.

Beyond Visual Design, annotations can play a crucial role in editorial processes, for instance, marking where specific alt text is required, suggesting accessible language for labels, or even guiding the use of consistent terminology across a product. This attention to detail ensures that content is inclusive and accessible from the start. Lastly, the annotation kit is an excellent tool for presenting complex designs to stakeholders. It helps stakeholders clearly understand the functionality of different elements in the design by annotating how interactive components work, what accessibility features are in place, and how users will interact with these elements. Stakeholders gain a better grasp of the design’s functionality. This transparency not only helps in gaining approval, but also builds confidence in the inclusivity and user friendliness of the final product. In summary, the annotation kit is not just a tool for accessibility compliance, it’s a versatile resource that supports better design practices, efficient workflows and clear communication across all stages of a project. By incorporating annotations into our process, we ensure our designs are thoughtful, inclusive and easily understood by everyone involved. Throughout this presentation, we’ve seen how integrating accessibility into the design phase is critical for creating inclusive, user friendly digital experiences.

By utilizing W3c design patterns, we establish a solid foundation for accessibility in common elements like menus, buttons and forms. Prioritizing contrast and touch target sizes ensures that our designs are not only visually engaging, but also practical for users with visual or motor impairments. We’ve also highlighted the importance of visible labels, alt text and accessible names, which are essential for clarity and usability, especially for users who rely on assistive technologies. Considering cognitive disabilities by maintaining simplicity, clarity and consistency, helps make our designs intuitive and reduces cognitive load for all users, the introduction of the accessible web annotation kit provides a way to communicate accessibility features. Effectively to developers, ensuring that our accessibility intentions are carried through from design to implementation. Beyond this, the annotation kit can be used for remediation, building consistent design systems, guiding content strategy and presenting complex designs to stakeholders.

If you’d like a demo of the annotation kit, please reach out and we can set up a call.

Let’s commit to making accessibility a core part of our design process. Start incorporating W3c design patterns. Prioritize contrast and touch target size and use clear labels and alt text. Embrace the use of tools like the accessible web annotation kit to ensure that every detail is communicated clearly to developers, making our designs more inclusive from the start by shifting left and addressing accessibility early, we not only create better experiences for all users, but also streamline our workflows, reduce costs associated with late stage fixes, and build trust with stakeholders and end users alike. Let’s make inclusivity a fundamental part of our digital products, ensuring that everyone can access and enjoy the content that we create.