GDS 2.0 & Accessibility

Matthias Zöchling, Accessibility Advocate

In GDS 2.0, a ton of accessibility improvements have been baked in under the hood. Many topics, e.g. the modern new colour palette, affect accessibility too, but certain things have been done exclusively to foster an improved experience that benefits everybody. Let’s take a closer look.

Unified Focus Style

At long last George has a unified focus style. That certainly has a nice ring to it. A blue focus ring that is. No more border colour change and a way too subtle glow on input fields, while other elements already showed a thick blue box shadow. No more input group add-ons plagued with the question how to behave. Truly unified! Well, almost, here comes the “But, …” 🍑

For quite some time, buttons only show the focus ring if the keyboard instead of the mouse is used for navigation. This is something we cannot detect for input fields, as here in most cases the keyboard is used to enter values, which in turn will always reveal the focus ring. In the past, we never followed through with upgrading input fields to use the more prominent button focus ring. From a design perspective, it was considered to be too in-your-face. We finally mitigated this issue with a compromise: While we still have two kinds of focus ring sizes, :focus is now a $color-blue-200 (#a2ceff)Copy color value for blue-200 non-glowing box shadow everywhere. All is well that ends well.

Labels, Labels, Labels

There are now more places than ever where more verbose – but visually hidden – labels may be specified. These labels will help screen readers announce UI text in an improved way.

Here’s an incomplete list of what has been added to LanguageProvider:

• The long form of currencies (e.g. ‘Australian Dollars’ for AUD) can be added to the amount.currency array. Amount will benefit from it.
• The button to clear a date picker – or basically any clearable input field – finds its default label in common.clear, whereas the button that shows a horizontal ellipsis takes it from common.more. In case you ask, OverviewCard and StripeHeader contain the latter.
• With common.externalLink we can let people know a Link will open in a new window.
• The improvements in Transaction are so many, they’d require a dedicated blog post. At the time of writing, roughly one third of the LanguageProvider keys are transaction.*.
• The sort buttons in Table get their default labels from table.sort, but you don’t need to rely on them and may provide even better labels instead.

Sometimes the components themselves have been improved, like so:

• Icon had aria-label before GDS 2.0, but it now turns the label into visually hidden text, to improve what will be announced even further.
• More verbose? ProductInfo went on the opposite journey. What used to be an HTML definition list is now rendered as an inline element. And thanks to its new verbosity property you may control whether or not to announce any labels at all for its individual lines of text.
• And let’s not forget the different ways of labelling the new Button, which have been covered on this blog before.

Speaking of components …

Components

• How about you start using AccountNumber? You not only get middle-truncation support, but your IBAN will be announced character by character, in groups of four.
• Our new Animation component comes with prefers-reduced-motion support.
• Tooltips are now interactive elements. This makes them navigable with keyboard, and screen readers will announce the tooltip content only on focus.
• Despite its name, Avatar’s hoverIcon is now also keyboard-accessible.
• We’ll end this list with a shout-out to two new additions to Utilities:
  • Interactable, which may be used to make an otherwise static component interactive, and
  • VisuallyHidden (“depicted” below 🤪), most likely the poster child accessibility component.

Documentation

No documentation is ever complete, but you should be able to learn more about the aforementioned accessibility improvements on this site.

As a matter of fact, certain improvements can only be found in the code snippets that are scattered all over this place. Just to give you an example, the usage of heading levels has been streamlined, which had an impact on FunctionCard examples, among other things.

So go ahead and check out the Design System documentation to stay up to date. ✌️