March 8, 2023

Creating a Better Web Through Accessible Design Systems

When we embed Accessibility into Design Systems we can spread learnings faster across teams and consistently create accessible experiences for more and more people.

A11y Talks, an organization committed to normalizing accessibility through education, hosted a conversation with Exygy and Evolving Web. Together we explored how accessible design systems put the user experience at the forefront of what they do.

The candid conversation dove into past and current projects, practical ways that accessibility influences UX/UI design, and strategies for building your own design systems. One of our primary focuses at Exygy when we design and build digital products is accessibility and we have a long history of successes as well as learning moments to share. Aimed at designers, developers, site builders, and web managers, the webinar will include practical examples, anecdotes, and a Q&A session.

Live transcription of the event is available as part of the video.

Here are 3 key takeaways from the event: 

1. Introduce Accessibility Early in the Engagement: It is really easy to deprioritize accessibility when budget and timelines are tight. The panelists shared that they have found success introducing the idea of accessibility during the early stages of an engagement. This allows for alignment on accessibility as a shared principle for both organizations and can be championed throughout the entire project. 

2. Accessible Component Libraries aren’t the Goal: While it might make sense to create a library of accessible components that can be reused from project to project, this mindset doesn’t create robust accessibility practices in the long term. While these components can be a helpful starting point, we should continue to adapt them to fit the specific needs of each project. The goal is to strive for partnerships that are continuous, collaborative, and the responsibility of the whole team.
 

3. The Power of Design Systems: As design systems become the norm, the responsibility is ours to be stewards of best practices and help our teammates make better and more informed decisions about the experiences they are creating. Inclusive design is about recognizing systems of exclusion and recognizing we have the opportunity to create new, equitable systems. 



For additional information about Exygy’s accessibility practice, check out our Accessibility Framework. We always love to engage with our audience! Reach out to us at hello@exygy.com to start a conversation. 

What’s a Rich Text element?

H1 example

H3 example

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.

No items found.

Want to work together?

We are always looking to get in touch with partners to help build healthy and resilient communities together
contact us