Links

Donny D'Amato on making a design system component for content that is meant for screenreaders:

there has been one concept that I’ve stuggled to put into this component-driven ecosystem; screenreader only as it has traditionally existed as a class (eg., .sr-only) added to an otherwise benign element

(From: Screenreader only)

On the work the GOV.UK Design System team do:

it’s the invisible systems work that has a bigger impact. Reviewing. Advising. Organising. Co-ordinating. Triaging. Educating. Supporting. Allowing the innovation happening at the edges of the ecosystem to feed back into the centre, to be consolidated and standardised for the benefit of everyone.

(From: How far we’ve come: What it would mean to lose the GOV.‌UK Design System)

TIL that UK monarchs choose their own Royal Cypher, a “symbol to represent their personal authority”.

In September 2022, the College of Arms announced His Majesty King Charles III’s Royal Cypher, which features the monarch’s chosen crown. This Cypher features the Tudor Crown, rather than the St Edward’s Crown chosen by Queen Elizabeth II following her Accession in 1952. Her Royal Cypher was itself a change from her father King George VI.

On each accession, the monarch will choose a Royal Cypher, or symbol to represent their personal authority. You can see the Royal Cypher in many places, for example post boxes, on police and military uniforms or on the side of official buildings.

(From: Updating GOV.UK’s crown - Inside GOV.UK)

With a government wide design system, the digital version of that can be rolled out much more efficiently. Yay design systems!

In A Global Design System, Brad Frost makes a case to:

centralize common UI components, reduce so much of this unnecessary duplication, integrate with any web-based tech stack, and create a connected vehicle for delivering front-end best practices to the world’s web experiences.

His proposal explicitly isn't “new HTML features”. We're working on that over at Open UI, and it's fruitful and good, but also hard, because web compatibility is complicated. It's challenging to get accessibility “built-in” in: these web platform features, like a fully customisable select, need to be flexible and styleable enough so that people actually want to use them, but also inflexible enough so that people can't accidentally use them to make something inaccessible. Or maybe “inflexible” isn't the right word… it's a matter of adding “guardrails” to these features: what sort of ARIA relationships and states should apply when? Browsers can't guarantee what developers are trying or going to do.

Anyway, Brad's “global design system“ is not that, it's proposed as a layer on top of HTML, a common library between design systems. That too resonates with me. In fact, it is close to what NL Design System is setting out to do. Different government departments and layers maintain their own design systems, but share a common architecture and reuse themeable components and tests from one another.

Design systems can be a super effective way to propagate a lot of accessibility at once, across many services. Not just as part of components that have good defaults, but also, maybe especially, in written documentation that helps people understand better what to do.

The GOV.UK Design System was updated to add an accessibility section and specific guidance on meeting WCAG 2.2 across the different component pages.

Design systems aren't a silver bullet to align teams and magically make digital products more consistent. In Through a design system, darkly, Ethan Marcotte describes two issues:

1. Design systems haven’t “solved” inconsistency. Rather, they’ve shifted how and when it manifests.
2. Many design systems have introduced another, deeper issue: a problem of visibility.