On Accessibility Conformance, Design Systems, and CSS “Base” Units

My brain can’t help but try to make connections between seemingly disparate ideas. And that’s what happened yesterday when I read:

• Hidde’s “Can components conform to WCAG?”
• Joas’s “Automating Design Systems”
• Zell’s “We Might Need Something Between Root and Relative CSS Units for “Base Elements”

What we have is:

• A semantic issue of saying that individual components can conform to WCAG. We might be able to “optimize” a component for accessibility, but accessible experiences are composed of complete web pages containing components designed to work together.
• A desire to automate all things in a design system. Update it here and it updates all over. But there’s still this matter of knowing if changing one component in a design system impacts other components.
• A musing over a possible new CSS “base” unit. The idea is to set one element as a “base” that allows other elements to inherit its font-related properties as roots for better vertical rhythm between elements, no matter their proximity.

Makes me think:

• Could a base unit in CSS make components more interoperable? Like, if buttons could inherit its font size depending on what other component it is in? Sorta like container query units, but without needing additional wrappers in the markup.
• Would that allow design systems changes to cascade between components more smoothly?
• Will properties inherited through a base element make components more optimized for WCAG conformance when implemented on a page with other components?
• Does this overlap with CSS @scope at all?

Sorry for the shower thoughts, but it’s interesting to consider how these ideas work together.

On Accessibility Conformance, Design Systems, and CSS “Base” Units originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.