From Good to Great: Elevating Your Design Workflow with Inclusivity
In today's digital age, where technology plays a central role in our lives, the importance of accessible and inclusive design cannot be overstated. It's not just a matter of compliance; it's about creating digital experiences that everyone can enjoy and benefit from. In my job, I've had the privilege of working with numerous creative teams on projects that have evolved the way they approach design. In this article, I'll share insights and strategies to help you elevate your design team's workflow by integrating inclusivity into your processes.
"Shift left" in software development and testing means moving tasks from later stages to earlier in the process. Its purpose is to detect and address issues like defects or vulnerabilities early, reducing costs.
You may hear designers using this term to express shifting accessibility considerations into the design process. How do you approach this without in-depth WCAG knowledge? How can you do this without pausing all work for rule study, especially given its not written in a designer-friendly language? Beyond accessibility, what about inclusion and the work designers also need to do in considering the needs of all customers and audiences?
I find through my work, many designers and teams are completely overwhelmed by what taking on all of these additional considerations means for their workload, productivity and most importantly their creative freedom. There seems to be a lack of practical guidance for designers on how to actually make this happen, my goal is to provide some actionable takeaways that designers and design teams can implement through both their process and their toolkit.
Core Principles:
Understand the True Meaning of Inclusivity
Before diving into the practical steps, it's crucial to have a clear understanding of what inclusivity means in design. Inclusivity goes beyond just accommodating individuals with disabilities. It's about creating a user experience that welcomes and benefits everyone, regardless of their abilities, background, or preferences. Start by fostering a mindset of empathy within your team, encouraging them to view design from various perspectives. I go into more depth on this topic in this article.
In the realm of digital design, the journey towards accessibility and inclusion begins long before the first line of code is written. It starts with the design team, and it's important to understand that it's the design team's responsibility to deliver designs that are not only visually striking but also inclusive and accessible from the very start. The development team should not be expected to resolve fundamental design issues related to accessibility. Here's how to ensure that the designs you deliver to your engineering and development team are designed with accessibility and inclusion in mind:
Establish Accessibility & Inclusion as a Core Design Principle
The first step is to embed accessibility and inclusion as core principles of your design process. Make it clear to your design team that creating accessible designs is non-negotiable. Encourage a mindset where accessibility and inclusion are part of the creative DNA, not just a checkbox.
Recognize exclusion, Learn from diversity, Solve for one, extend to many. These are some principles shared by Microsoft and their design teams inclusive design methodology. Create your own set of inclusive design principles that speak to the product or service of your brand or business. These can be derived from examples like MS Design but customized further to speak to the unique voice or ethos of your brand.
Create Inclusive Design Guidelines
Develop a comprehensive set of design guidelines that explicitly address accessibility and inclusion. These guidelines should cover everything from color contrast and typography to navigation and interactive elements. Providing clear directives empowers your design team to implement inclusive design principles effectively. This should be apart of your brand style-guide and ultimately your design system.
Educate Your Design Team
Invest in ongoing education and training for your design team. Designers almost always share a common goal in creating things that people love to use, once they recognize certain design decisions may work against that shared interest it’s pretty easy to get “buy in” towards furthering education on this topic.
Ensure that they are well-versed in accessibility guidelines and best practices that specifically relate to design. This knowledge equips designers to make informed decisions during the design phase, preventing issues from arising later in development.
Empower Designers to Advocate
Empower your designers to advocate for inclusion within the design team and across the organization. Encourage them to champion inclusive design principles and share their expertise with colleagues.
Involve Diverse Voices
To ensure inclusivity, it's essential to have diverse voices at the table. Include team members from different backgrounds, experiences, and abilities in the design process. These diverse perspectives will help identify potential accessibility and inclusion challenges early on and inspire innovative solutions that cater to a broader audience.
Engage Users with Disabilities
One of the most valuable resources for accessibility testing is individuals with disabilities themselves. Invite users with various disabilities to participate in usability testing sessions. Their insights and feedback will provide firsthand experience of how your design performs in real-world scenarios.
Collaborate with Accessibility Experts
Consider involving accessibility experts or consultants in your design projects. Their expertise can be invaluable in identifying potential issues and providing guidance on inclusive design approaches. Collaborative efforts between designers and accessibility experts lead to more robust and accessible designs.
Shameless self-promotion moment… check out some of the industry experts I work with on the Thought Leadership team at Level Access.
Practical Steps:
In this section I’ll shift from the more fundamental practices into the more practical steps to include in your workflow:
Conduct Testing on Designs
Conducting thorough testing and validating is a cornerstone of inclusive design. It ensures that your designs are not just visually appealing but also usable by everyone. While historically we tend to think about testing as something that is done on coded and developed products, here is where we have a major shift in thinking and process. Designs need to be tested during the design process itself and prior to delivering anything to development to build.
Here's how you can make testing an integral part of your design workflow:
Use Accessibility Testing Tools for Designers
There are various tools available that can help you evaluate the accessibility of your designs. These tools check for issues such as missing alt text, help generate alt text, measure contrast ratios, flag text readability and typography requirements, identify issues in form elements, component design requirements, interaction patterns, and proper heading structures. Incorporate these tools into your design process to catch common accessibility issues early, while you are designing.
There are new tools being released constantly, I try to keep up with what new tools and plugins are available for designers. Here are some of my go-to tools and resources.
I’ve also compiled best practices and created a Figma community file for designers to help get you on the path to designing accessible buttons.
Focus on Keyboard Navigation
Keyboard navigation is a fundamental aspect of web accessibility. Ensure that all interactive elements, such as buttons and forms, can be easily operated using a keyboard alone. This is a crucial consideration for users who rely on keyboard navigation or assistive technologies like screen readers. Consider not only the ability for the interaction with those elements via the keyboard to be visible via a focus indicator, but also the order or flow in which you want the user to be able to tab through the interface. This is called visible focus indicator and focus order in WCAG.
Consider the Design Across Multiple Devices and Platforms
Ensure that your designs are accessible across a wide range of devices and platforms. Evaluate the usability and interactions across device types, this is an extension to the concept we are already familiar with in responsive design. Just as you consider your design layouts from desktop to tablet the mobile, pressure test those designs further against user-settings like text zoom in the browser or mobile device text enlargement settings. Consider these types of adjustments in your designs and how your elements will wrap and reflow in those scenarios.
Remember that devices and settings will vary not only because of disability needs but also often driven by factors like age demographic, socioeconomic status, geography and language preferences.
Evaluate Content and Media
Inclusive content and media considers the diversity of representation both visually and in voice. This may be driven by DE&I initiatives or core to the brand voice. Remember, disability inclusion should be a part of your DE&I content guidelines and accessibility is not a project, it needs to be a part of your definition of requirements and definition of done. Accessible content goes beyond text. Assess multimedia elements, such as images, videos, and audio, for accessibility. Provide alternative text for images, captions for videos, and transcripts for audio content to ensure everyone can access and understand the information.
Maintain a Dialogue with Developers
Communication is key. Maintain an open and ongoing dialogue with your development team. Dialogue can be either synchronous (via meetings and regular scheduled touch-points) or asynchronous (via annotations and click-through prototypes). Don’t assume your developers are mind-readers, if you have a certain interaction or experience in mind be sure to clearly document, demonstrate and communicate it.
Share insights and rationale behind design decisions related to accessibility and inclusion. Collaboration between designers and developers ensures that design intent is effectively translated into the final product.
Regularly Update and Retest
Web technologies evolve, and so do accessibility standards. Stay informed about the latest guidelines and updates related to accessibility. Regularly revisit your designs and conduct accessibility testing to address any new issues that may arise.
Review, Iterate and Collaborate
After development begins, continue to review the implementation of designs for accessibility. Address any issues promptly, and iterate on design solutions if necessary. This iterative approach ensures that accessibility remains a priority throughout the project lifecycle. Sometimes what you had intended may not be possible or may not work out exactly as you envisioned, include your developers in the conversation while you are trying to solution the iteration. They are likely well versed in available code & components libraries that may have solved your issue already.
Remember that creating accessible and inclusive designs benefits everyone and aligns with your goal of elevating your design workflow with inclusivity. By emphasizing these principles and practices in your design workflow, you not only meet compliance standards but also contribute to a more inclusive digital landscape.
Ultimately, it's the responsibility of the design team to deliver designs that consider accessibility and inclusion from the outset, making the development process smoother and the final product more welcoming to all users.
By integrating inclusion practices into your design workflow, you not only identify and rectify potential barriers but also demonstrate a commitment to creating digital experiences that are truly inclusive.
