Your website UX SUX, or: Why you should consider accessibility from the start.

The web is, in my opinion, one of the greatest inventions (if not the greatest invention) in human history. It has opened up the entirety of our species’ knowledge to the world, and has enabled us to connect with people at the other side of our planet. It has allowed young queer people to find a community and a family, even if their own wasn’t accepting. It has allowed people of colour to highlight the systemic, racist abuse they face every day. It’s allowed women to speak out about gendered harassment, when people in positions of power refused to listen.

The web has been an incredible force for change in our world.

But as the web has progressed — gotten more advanced, and more capable — it’s often gotten harder to use, particularly for people with disabilities.

What is Accessibility 🤔

Accessibility is about making your website usable and understandable by as many people as possible, regardless of their ability or circumstance. This often involves providing affordances, and a little extra help for people who have different needs.

Although there isn’t really an “official” list, most impairments are generally grouped into 6 overall categories:

Impairments don’t necessarily need to be chronic, or permanent, or physiological. Having an impairment simply means that your ability to do something is limited.

A hearing impairment might be a loss of hearing requiring a hearing aid, or simply needing your phone to be muted while you’re watching a video; a visual impairment might be struggling to see your laptop’s crummy screen in bright sunlight, or it might be colour blindness.

Improving accessibility improves usability for everyone. For some people, it improves their ability to use the things we made when life gets in the way. For others, it can make doing day-to-day tasks that most people take for granted that little bit easier.

Accessible by Default ♿️

Back in the long, long ago, when the web was new and computers were the size of a desk, the only thing the web could do was display text. There was no <img> element to include images on a page, and no one even considered the possibility of loading a video on a 56kbps connection (which was super fast at the time). Back then, web pages were just text and links. You could make the text bold, or italic. You could create headings, and lists, and tables. You could even create forms.

And that was pretty much it.

It was incredibly limited, but its limitations made it accessible by default. Even though accessibility tools were scant, since web pages were so simple, tools like screen readers could easily parse their contents and present them to users in a sensible way.

Screenshot of Netscape Navigator

As computers have gotten faster and more powerful, and our connections to the Internet have gotten faster, the people who make things on the web have pushed it forward — adding new functionality and new features.

When new features are added to the fundamental building blocks of the web, accessibility is a consideration. For example, when the <img> element was added, alt-text was added as a consideration so that people who cannot see the image are still able to understand what the image is showing.

More recently (or at least, in the last decade), when the <video> and <audio> element was introduced, they included the <track> element to provide closed-captions and transcriptions, so that people who are unable to hear the audio are still able to understand what is being said.

The World Wide Web Consortium (W3C) — the organisation that controls the standards that underpin the web — also created the Web Content Accessibility Guidelines, to provide a set of rules and guidelines to ensure that as many people as possible are able to use the web.

We’re given a whole bunch of tools to make sure that what we’re creating is usable by everyone. But it’s up to the people who create on the web — the designers and developers — to follow those guidelines, and make use of the features that help make the web accessible. And too often, we don’t.

Easier, But For Whom? 💪🏼

The tooling around making things on the web has gotten incredibly advanced, and incredibly powerful.

Screen-cap of The Simpsons; news article showing Grandpa Simpson with the headline Old Man Yells at Cloud.

“Back in my day” *shakes fist* HTML page templates were all created by hand. Responsive design was merely a glint in Ethan Marcotte’s eye. CSS Zen Garden was just beginning to open our eyes to a world beyond table-based layouts. jQuery was practically the only way to make complex (for the time) Javascript work on different browsers.

Today, the landscape is far different. HTML is far more abstracted from developers, particularly with tools like React and Angular. Not to mention the various templating languages built around HTML — things like Twig, and Handlebars.

CSS pre-processors like SASS and LESS have made styling pages faster and easier.

Javascript has evolved to the point where it’s practically running the entire show, with build-processes powered by Node.js and task runners like Gulp and Grunt.

Making big, complex websites has gotten so much faster and easier thanks to these tools. They’re absolutely incredible. I don’t want to go back to the days before these tools existed.

But (you knew there was going to be a “but”, right?) all of the abstraction and the additional power means that we developers don’t have to think as much about the code that we’re creating: because we’re less likely to be writing the HTML of a full page by hand, we’re not thinking as much about the DOM order, and whether our headers are following the correct hierarchy.

The advancements in tooling around creating websites has made the web easier for developers, but this is often at the expense of the people who’re actually using the things we’re creating.

Out Of Sight, Out Of Mind 🙈

One of the things the web has shown me is how visibility is the most powerful catalyst for change.

Most people have been aware that systemic racism, but it’s not until we’re confronted with #BlackLivesMatter, and hundreds of cases of people of colour being assaulted and murdered by law-enforcement that our awareness of a problem changes to a drive to change the system.

Most people have been aware that people in positions of power take advantage of people who are terrified for their livelihood. But it’s not until we’re confronted with #MeToo that we truly understand the scale of the problem, and corporations are finally forced to take action against serial abusers.

Visibility leads to understanding, and understanding leads to change. Being truthful, it shouldn’t take personal exposure to a problem to be that catalyst for change, but for many of us problems are out of sight, out of mind.

The people who create things on the web, by a massive majority, don’t have impairments that affect our ability to use the things we make: we don’t need to worry about an image having sensible alt-text because we don’t need it; we don’t worry about a video having closed captions because we don’t need to use them. 

Visibility is the catalyst of change. We are aware that people might require additional affordances to make the web useable, but until we’re confronted by the need for these affordances, we too often simply forget about them.

We only started worrying about the size of click-targets when we started prodding a screen with our fingers, rather than using precise pointing-device like a mouse or trackpad: suddenly, we realised that small click targets were problematic, so we changed. Buttons got bigger and easier to hit. That change not only helped people navigating the web on small, touch-based devices, but it helped people with difficulties with fine-motor control, for whom it’s harder to make precise mouse movements.

This tendency to only include affordances that affect us personally doesn’t make us bad. But it does make us wrong, and it’s something that we should strive to change.

Be Considerate 🥰

As part of the process of designing and developing a website (or any other piece of interactive software), almost all of us begin with a User Experience (UX) Design exercise.

The idea behind this is generally to consider the main purpose of what we’re creating, and how best we can communicate or enable that purpose.

We’re considering how we communicate the brand’s values; how we can use video and image to enhance the message; how we can remove barriers to optimise conversions — whether that’s signups to a newsletter, or checkouts on an E-Commerce website. We’re trying to make sure that our layouts emphasise what needs to be emphasised, and make the website more useful.

Accessibility should be at the forefront.

If we’re considering using a video, we should also be considering how we can deliver audio-description and closed captions. If we’re considering a big, swooshy, interactive element, we should also be considering how we can make it useable for people with motion-sickness. If we’re considering making a button red to indicate a destructive action, we should also be considering how we can provide an affordance to someone with red-green colour blindness who can’t perceive the colour.

If we’re not thinking about these things, we’re only designing the experience for some users. It’s some UX. It SUX (there’s the title, thanks for sticking around this long).

Accessibility should start at UX, but it shouldn’t end there. Throughout every step, we should be considering the user, and considering how the decisions we’re making might affect people.

Something’s Better Than Nothing 😎

Accessibility is an exercise in empathy. It’s about trying understanding that other people have different needs and trying to accommodate those needs.

I’m someone who considers myself pretty good at creating accessible websites, but I’ll freely admit that I get it wrong a lot. Making websites is tough. Making websites while being conscious of deadlines and budgets is tougher.

But the web is accessible by default. It’s decisions that we make as designers and developers that make the web inaccessible. So it’s our responsibility to mitigate or minimise the impact of our choices.

Doing something is better than nothing: making sure that we have reasonable alt-text on images; adding aria-* attributes to elements; ensuring that the DOM and heading order makes sense.

Have empathy for the user. Be considerate. Recognise when we’ve made mistakes. Try to do better in the future.

Lewis Dorigo

Here’s some more articles you might like:

  1. “A person face-palming”: a quick guide to writing good alt text

    Writing good alt text is one of the quickest ways to improve the accessibility of your website. I share some tips for writing alt text that makes sense.

    Read More