Inclusive Design in Action: How Design, Engineering, and Product Collaboration Can Enhance Website Accessibility For Everyone
Without collaboration, individual efforts may overlook important aspects of accessibility and may not fully address the needs of people using our products.
Given Bloom Housing’s goal of centralizing and facilitating the affordable housing process, we must be removing barriers, at each step of development, to ensure that all visitors can use Bloom regardless of their ability.
At Exygy, we strive to design accessible products because the tools we create to build healthy and resilient communities must be usable by everyone. We are continuing to integrate this ideology of empathy into our entire design and development process by facilitating consistent collaboration between Design, Product, and Engineering.
One of the ways we have strengthened our accessibility process is by partnering with LightHouse for the Blind and Visually Impaired (LightHOuse SF). As subject matter experts, they inform accessible design across various projects, focusing on Exygy’s Bloom Housing.
“Collaboration is the key to designing digital experiences that truly work for everyone. When LightHouse SF works with Exygy and involves every member of their product team, as well as access tech user testers and access tech experts, we ensure that the products we design together not only meet baseline accessibility standards but result in usable experiences that are equitable for all users, regardless of any disabilities or access needs.” - Sean Dougherty, Manager of Corporate Relationships, Access Tech at LightHouse SF.
Detroit Home Connect site, one of Bloom Housing’s projects, was thoroughly audited by Exygy and Google.org before we brought in Lighthouse for additional insight. Throughout this process, we realized that there was an opportunity to be more intentional about prioritizing accessibility on Bloom. So, we formed a team made up of design, product, and engineering to tackle the audit findings, and also take a more holistic look at how we incorporate accessibility into our feature design.
Building an accessible product is a multidisciplinary effort, and requires close collaboration between design, engineering, and product. Here are the key takeaways from each discipline as they approached working collectively to make the site more accessible.
Design
The Problem
Design plays a critical role in ensuring that digital content is inclusive and can be used by people with diverse abilities. According to a Deque case study (2020), 67% of accessibility issues originate in design. Common design issues that can lead to accessibility barriers include inadequate color contrast, lack of alternative text for images and other non-text elements, inaccessible navigation, and poor form design. This means that failing to design for accessibility from the beginning can result in excluding a significant portion of the population from accessing information, products, and services online.
The Approach
To gain a clearer understanding of where we could make impactful improvements, our team consulted with Lighthouse SF to run a functional accessibility review of the Detroit Home Connect website.
Accessibility documentation in Figma.
People with disabilities encounter unique challenges when interacting with digital content and getting their direct feedback can help identify and fix issues that may otherwise be missed. Being able to observe blind and visually impaired users navigating our website inspires a different angle of thinking about how we might approach and document future designs to make them more accessible. Inviting people with disabilities into the design process also helps raise awareness around digital accessibility and promotes a culture of inclusion and diversity throughout Exygy’s organization.
The Solution
By involving the product trio (product, design, engineering) throughout the entire accessibility audit process, we were able to generate a collaborative and empathetic working style that felt as empowering as it did impactful.
The learnings from this audit have set us on a clearer path toward accessibility compliance, but more importantly, we have all learned how to incorporate new, more informed practices into our respective functional routines that speak cohesively to the greater accessibility initiative.
Product
The Problem
At least 15% of the world’s population has a recognized disability, and all of us can temporarily be disabled at any time. Further, accessibility features improve usability for all users, especially older people and those with older devices. Because of this, it’s incredibly important for Product Managers to advocate for accessibility in the feature development process, and make sure that this sizable user group can use a product to its fullest extent.
The Approach
As a result of our Lighthouse audit, we aimed to improve the accessibility of our Detroit home connect site, particularly with screen reader usability. From a Product Manager's perspective, it was vital to be able to address the specific findings we found on the Detroit page, as well as build a framework for ensuring that new features meet our accessibility standards.
The Solution
As an outcome of this partnership, we were able to define ways to incorporate accessibility into our routine product development process. In our conversations with LightHouse, they emphasized that accessibility is always a work in progress, due to the unique ways each individual can interact with a product. With that in mind, we wanted to go beyond the specific findings and build in room for iteration and improvement on our site’s accessibility over time.
In addition to remediating the issues from the audit, our team developed a method of working together that clarified each team member’s responsibilities. Going forward, the product team is responsible for communicating accessibility requirements early in the project lifecycle, ensuring that each team member understands their role in the development process, and building accessibility into initial story writing.
Given the values of Bloom and statistics of lessening accessibility, Exygy made it a priority to dedicate team members to the goal of a more accessible affordable housing experience in Detroit
Through our meetings with LightHouse SF, we discussed user paths that were confusing or generally undesirable experiences and presented our improvements based on this feedback. This process helped to verify that our solutions work across different devices, browsers, and screen reader technologies, and not just on the engineers' devices or simulated environments. But more importantly, this direct comparison ensured that our solution fully addressed their concerns and that no part of the original pain point was lost through issue writing, design, or implementation. This collaborative approach to quality assurance maintained the goal of keeping LightHouse and their detailed feedback at the center of our process until the very last step.
LightHouse SF and Exygy collaborate on making the screenreader experience more accessible.
The Solution
Exygy strengthened the accessibility of the site by eliminating specific points of confusion in aria-labeling, header level alignment, and authoring more detailed, unique alt-tags. Furthermore, we improved overall navigability with the following changes:
“New page” experience overhaul - These changes served to align the “new page” screen reader experience across screen reader technologies and addressed accessibility difficulties with client-side routing. As a result, screen reader users are now clearly alerted that they have navigated to a new page and the title of that page. Additionally, the focus is reset such that the first focusable element is the “Skip to main content” link described below.
“Skip to main content” link - This is an established pattern in accessibility development and was a simple yet impactful change to the website. It allows screen reader users to have a shortcut to the information that they are most interested in and avoids an overly repetitive screen reader experience.
“Find rentals for you” improvements - This multi-page form is central to assisting users in finding the right affordable housing for them. We improved this experience by implementing custom focus management to further reduce repetition in the screen reader experience and emphasize the progress the user has made thus far.
Beyond technical changes, we created a screen reader QA guide to promote the long-term integration of these learnings. We are also in the process of capturing valuable insights within pull requests, LightHouse discussions, and engineering implementation so that we incorporate accessibility into every engineering decision rather than in an isolated step.
Conclusion
“By working together, our teams create digital solutions that are inclusive and empower every user to effectively navigate web-based and app-based environments on their own.” - Sean Dougherty
Improving website accessibility is not just the responsibility of a single individual or team, but rather a shared effort that involves collaboration between product managers, designers, developers, and users. By working with people who primarily use screen readers and other assistive technologies to audit our products, we can gain a deeper understanding of their needs and experiences, and become more empathetic in our approach.
As we continue to learn new things together, being vulnerable fosters trust and empowerment within our teams. Our work with accessibility will never be finished but sharing our learnings can help drive buy-in and improve organizational-wide processes. This leads to a greater impact in making our digital spaces more inclusive and accessible to a wider audience.
To learn more about Exygy’s accessibility practice check out these other resources:
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Share
Colin Buyck
Frontend Engineer
Emilie Jensen
Senior Product Designer
Sarah Lazarich
Senior Product Manager
3 Steps for Shifting Government Services Online During COVID-19
Many cities are now faced with the decision to either pare back government services or shift their services online.
%20copy%205.png)
