The StoryBook of Accessibility

In the beginning...

In the beginning, the UX created the design system.

And the Developer said, let there be design tokens:

and there were colors, sizes, spaces, widths, and

many other tokens. And both saw that it was good.

And then came I and said, let us have accessibility,

for we must remember all of those who cannot see

or use a mouse.

Thus, saith the law.

So, I climbed Mount WCAG to receive the ten commandments of Accessibility and brought it

back to the people.

So, what was it all about?

The GDS is Nielsen’s Global Design System, created by the UX team, following the organization's new branding in 2021.

As the Accessibility Lead, I was responsible of ensuring all components – design and development - are fully compliant with WCAG 2.2 (Web Content Accessibility Guidelines).

Enhancing accessibility meets Nielsen’s core values of Inclusion, Courage and Growth.

What does it mean to be an Accessibility Lead?

Learning

I’ve started a long process of enquiring all available information about accessibility compliance and regulations: Reading the WCAG 2.2 documents, taking courses, participating in webinars and conferences and reading a plethora of articles. To share my insights, I launched a work plan for implementation accessibility throughout the organization.

Share | Evangelize | Promote

I’ve instructed sessions and lectures about the accessibility aspects of digital products and demonstrated how to easily perform accessibility testing, for both designers and developers.

Implementation

I mapped the accessibility requirements of Nilsen design system. Then, for each component, I delivered detailed instructions how to reach compliance, either during the design process or coding, in an ordered demonstrative grid.

Testing

For every component, I ran two a11y testing sessions: one after design and the second after coding completion. Every testing session was performed via two operating systems: Windows and iOS, on four different browsers.

A component was sent back for corrections if it did not pass the test, after which it went through a second testing session.

Curious to see how I did it? Here's part of the process

Color Contrast

According to Success Criterion 1.4.3 Contrast of WCAG 2.2, font color and its background must have a contrast ratio of at least 4.5:1. Large text (at least 18 or 14 bold) or graphics such as icons must have a contrast ratio of at least 3:1.

Keyboard Operation Support

According to Success Criterion 2.1.1 Keyboard and 2.4.7 Focus Visible of WCAG 2.2, all content elements must be accessed with the keyboard alone, with no mouse manipulation.

In addition, all clickable or active elements must have clear, unique and crossed-browsers unified focus indication.

Screen Reader Operation Support

Enable conversion of all digital information into synthesized speech so users can hear the content instead/in addition of reading it
Support different operating systems and browsers
Assure content reading order, top to bottom, left to right
Provide a "skip to main content" link to avoid repeated navigation reading
Each component should be read out with its correct type, purpose and state
Provide alternative text for images when needed

The Next step: StoryBook Documentation

The next step was creating a comprehensive library of all developed components.

I designed a library component template, so each component has its own page, displaying all variants, sizes, states, colors and other variations.

Accessibility library’s navigation is a mirror reflection of the Figma design system's category division, for easier orientation and maintenance.

Each and every component comply with the accessibility requirements, so the final product is a complete full-accessible library that can be used by global development teams in the organization.

This is how we saved hours of work and achieved consistency AND accessibility!