Making Accessibility Fundamental in Design

In the beginning, Tim created the internet. He said, “Let there be HTML,” and he saw that it was good.

On the Second Day came Function: the sharing and interconnection of content across the network.

On the Third Day came Form. Content now had shape, soul, and structure in a way it had not before.

On the Fourth Day, Geocites...

By the Fifth Day, we were on the move. Access to information from anywhere, right in the palm of our hands. Our little pocket computers.

Now, on the Sixth Day, we’ve seen W3C, Myspace, Million Dollar Homepage, Bebo, Facebook, Google, Angry Birds, Snapchat, and TikTok rise (and fall).

Today, we are more interconnected than ever - a predicted 53% of the world population now has internet access. Pre ‘ninety-sixers’ will be the last generation to have known a time where at least parts of their lives were non-digital. If you’re in your late 30’s or beyond, the stretch from “In the beginning” to “The Sixth Day” has played out before your eyes.

The Seventh Day is just around the corner (fingers crossed no Skynet). But what does all this have to do with designing modern web products with accessibility in mind?

I’d argue it has everything to do with it.

The web is accessible by default

That first website Tim Berners-Lee created for CERN is, at a fundamental level, everything we still want from a modern web page.

• Simple and clear
• Responsive
• Lightning fast
• Translatable
• Navigable by any method (touch, keyboard, screen reader, etc.)

In short, it’s accessible by default. If we strip back the web to its fundamentals, most of the tooling we need to create fully accessible experiences is right there.

It’s only when we begin to blunt these defaults in favour of form, without considering their implications, do we run the gauntlet of making our products less accessible than they were to start with.

Understanding accessible design

When we design with accessibility in mind, we’re simply approaching our work with a view to making context-appropriate decisions.

Design without context is simply art.

Most modern web pages are not art. They have a function. Whether we are making decisions around the micro (e.g. color choices, default text size) or the macro (e.g. complete interactions and workflows), aligning our choices with accessibility in mind provides us with that context.

By framing our choices this way, we’re including accessibility into our thinking as a default. We have a metric by which to measure the success of a design.

Set your goals

Since joining Equinix Metal last year, part of my remit has been to consider how we bring accessibility into our product conversations, and design structure early and often.

Over the next few weeks and months, some of those changes will be taking effect on our website, and throughout our various products.

Whilst there are a vast number of things we’ve looked at improving at a technical level (better alt tagging, semantic markup, code reduction, etc.), what follows are a few small ways we’ve been designing with accessibility in mind at a fundamental level.

Fundamental 1: Use of color

Color-based visual impairment is not rare. It affects at least 1 in 20 people, myself included. Low contrast colors can be a real problem, especially when color is used as a sole indicator in an interface.

Areas we’ve looked to improve or set success criterion around include:

• Providing a context variant for our brand colors, to use on small text and other elements, where greater contrast is needed to meet acceptable standards
• Adopting a color+ mentality, where color plus at least one non-color dependant element are used in combination
• Documenting safe combinations as a reference point
• Considering the implications of color inversions (e.g. light text on a dark background can appear thicker, and will require more leading or tracking to retain legibility)

Fundamental 2: Pay attention to state

When you interact with an element on a web page, it should respond to that behaviour in a visual way, to indicate as such. Furthermore, interactive elements should identify themselves as interactive, by providing indicators and appropriate hit areas.

Some improvements or standards in our guidelines now include:

• Ensuring every interactive element has at least a :hover and a :focus state.
• Ensuring text links are visually obvious. This can be context-dependent (such as within menus) but should be consistent.
• Using larger hit areas for fully-clickable elements. For example, if using a card that has an image, title, and text, it may make sense to make the whole element clickable.
• Making use of animation where appropriate.

Fundamental 3: Say what you mean

As much as possible, provide content appropriate text for links. If a user is consuming your content in, for example, a list view, having repeated ‘click here’ type calls to action can be problematic due to lack of distinction.

Instead, use clear, appropriate language for each piece of text, considering it in both a wider context and itself in isolation.

Fundamental 4: Be careful with forms

Forms can be a complex UX challenge, but often defaults are a good place to start. They also have the added benefit of being inherently accessible.

Some pointers include:

• Including a visible label. If the form has more than one field, it can be difficult to remember what is currently being filled in if you don’t provide a visible label.
• Required as a default state. Mark other fields as optional. This is a better pattern for web accessibility and overall user experience, as it mirrors the way most people fill in forms in a naturally linear fashion (and leads to less errors).
• Tab order and :focus are really important. Users will often use a keyboard to navigate form fields. Ensure this is possible and in an expected order.
• Make errors clear and helpful. Allow people to understand what went wrong, and how to fix it.

Fundamental 5: Mixed media enhancements

Elements such as video and audio content are a big part of what we’ve been working on recently. As a result, we’re taking steps to improve how we can make these offerings more accessible by providing transcripts, captioning, and subtitles for customers with hearing impairments, or no access to sound.

Where do we go from here?

Designing with accessibility in mind is a broad topic, that I’ve barely scratched the surface of in this post. I believe it is something we should all care about, and be integrating into our day-to-day work as designers, developers, and engineers.

A few helpful things to help get you started:

• A11y Project checklist
• Testing tools and helpful resources

At its core, accessibility in design is a renaissance of what the web started life as: a place for everyone to share and connect openly, equally, and easily.