Every product should be inclusive and accessible to all users, and accessibility features make the experience better for everyone regardless of how they interact with the world.
In this webinar, Chris Bloom and Josh Mabry, Engineers at Knapsack, have an important conversation on building more inclusive products for a better user experience with Catharine McNally, Sr. Program Manager for Accessibility at GitHub.
We cover the following topics:
Achieving a perfect accessibility score - is it possible?
Testing an entire finished application vs. testing individual components
Must-have accessibility libraries and tooling
Achieving a perfect accessibility score - is it possible?
Accessibility is an essential aspect of website development, ensuring that all users, regardless of their abilities, can access and interact with the content. The Web Content Accessibility Guidelines (WCAG) provides developers with standards to follow, resulting in a score from tools like Lighthouse. Instead of chasing a perfect score, it is crucial to focus on practical improvements that cater to real user needs. When building products, we should be striving for continuous improvement rather than perfection.
“We need to be thinking about what kind of processes are we putting into place that leads to that progress towards a more consistent score that is stable over time. I don't want us to create that false narrative, because once we achieve a perfect score we may think the work is done and sit back and that's not what we want to see.”
- Catharine McNally
Although we don’t need to focus on achieving a perfect accessibility score, the Lighthouse score is very helpful in advocating for accessibility with non-technical stakeholders. Focusing on ongoing progress towards a stable, consistent score for a more accessible web is an excellent goal to strive for.
Testing an entire finished application vs. testing individual components
When it comes to testing accessibility in web applications, there are two main approaches: testing individual components or testing the entire finished application. Both approaches have their benefits and drawbacks, and striking the right balance is key.
There is no one-size-fits-all solution when it comes to accessibility testing. Balancing individual component testing and testing the entire finished application, considering timing and scope, and fostering a culture of accessibility within the team are all important factors to consider.
Must-have accessibility libraries and tooling
Combining AXE's accessibility checks with Cypress' robust testing capabilities, this plugin checks web elements for semantic HTML, ARIA attributes, color contrasts, and keyboard navigation to ensure systems remain accessible early in development.
An open-source tool from Google that helps developers optimize web apps by assessing performance, accessibility, and best practices. Running as a Chrome extension, it offers actionable suggestions like enhancing color contrast or missing alt text on images.
A utility library for streamlining React tasks like building reusable components and event management. Making it easy to integrate features like ARIA attributes and keyboard navigation into your application.
Axe DevTools (the gold standard)
This browser extension enriches Chrome DevTools and Firefox Developer Tools with automated accessibility testing, empowering developers to create inclusive web apps by delivering insightful accessibility reports and actionable recommendations.
*Automated tools are to be combined with with manual testing and real user feedback.
AI and accessibility
AI accessibility and inclusivity are crucial factors that must be considered as we move forward with the development of AI systems. Language and visual models have the potential to level the playing field and make interfaces more accessible. However, these models are only as good as the data they are fed. Therefore, it is crucial to ensure that AI systems are built with inclusive and accessible data to avoid biased outcomes and it’s essential to advocate for inclusive AI systems as we develop new technology. Microsoft has released documents on how to make AI more inclusive, including "In Pursuit of Inclusive AI" and the "Hacks Toolkit" that focuses on AI human interaction and provides guidelines for AI accessibility and inclusivity. You can access these documents in this collection of resources we put together.
“Accessibility isn't meant to serve the average user. Accessibility is about serving the range of users and I call that out because AI is based on averages. So we are potentially looking at bias and disparate experience in making sure that we're representative of all individuals not an average set.”
- Catharine McNally
For example, AI-generated alt text can provide a useful starting point for image accessibility, but it should not be used automatically without human review. To ensure accuracy and avoid potential issues, content creators should always review and edit the alt text. This process should include user feedback, manual testing, and ongoing progress towards a consistent accessibility score. While automated testing tools can catch many issues, human oversight is essential for the highest level of accessibility. Additionally, the context in which an image is used is crucial. Alt text should accurately reflect the intended message and emotional tone, as a simple description may not convey the emotional impact of the image. As AI becomes more prevalent, we must continue to explore and address whether it is capable of being empathetic.
Another example, we asked ChatGPT to generate a card component in React with a classic card image on top, title, and call-to-action. On the left, we got a great passable component. Then, we asked it to make the same component but accessible using the HTML5 features available to us. You can see how it changes on the right, and the explanation below it outlines all the reasons it became more accessible
It's important to note that the defaults coming out of AI are based on averages, and we need to go above and beyond to ensure they serve the needs of all people, as seen in the improved code on the right. Relying solely on AI-generated alt text can lead to issues. We should not be complacent with these systems and advocate for fail-safes and human intervention to ensure accessibility.
Accessibility within Knapsack
Knapsack is a flexible end-to-end design system platform. We believe that an accessible product creates a better experience for all users and we treat accessibility as a core requirement in all aspects of our design and development processes. Knapsack includes a dedicated accessibility tab for each component, where designers and developers can describe accessibility considerations and other details. Knapsack also offers fully accessible standalone URLs for each component, making it easy to integrate with automated testing frameworks to identify and fix any accessibility issues. We help teams to build more inclusive products that meet the needs of all users, streamlining workflows for designers and developers. See our accessibility statement, what we test for, and best practices here.
.png)