The art of accessibility:
How to weave accessibility into your content

What do the BBC, Tripadvisor, and Penguin have in common?

They craft stunning, interactive web content with Shorthand. And so can you! Create your first story for free — no code or web design skills required.
Sign up now.

The gold standard for accessibility is set by the Web Accessibility Initiative, in their Web Content Accessibility Guidelines (WCAG). The guidelines rest on four essential principles for online content, known as the POUR framework:

Perceivable

This means that everyone can see or hear the information you want to share. There should be a choice of alternative and adaptable formats so that people can access the content easily.

Operable

Everyone can navigate through your content, using their preferred tools, without needing assistance. This starts with technical details like structuring your webpages properly, adding alt text, and supporting keyboard navigation. But it also includes things like giving people plenty of time to process content.

Understandable

Online content should have a consistent, predictable design, with information that’s easy to read or understand. Whenever you ask people to input information, you should offer support (such as tooltips or autofill suggestions) to prevent and correct mistakes.

Robust

Robust design means that your content works on all devices (including screen readers), with all assistive technologies, and is ready for future innovations and updates. If your website only works on the latest Mac computer… then it doesn’t actually work.

These principles can all support inclusivity, too. For example, robust content that works on all devices and at all internet speeds helps to include people regardless of their location or income level.

Everyone has their own accessibility needs. And as Orrù points out, even if you can access most online content with ease now, that might not always be the case.

The web has become our primary mode of work, administration, organising our social lives, and more. It’s fundamental that full access to information and communications technology (ICT) is listed as a basic human right by the United Nations Convention on the Rights of Persons with Disabilities.

Moving things online — and making them accessible — has created opportunities and engagement for millions of people. But that comes as no surprise to accessibility experts, who already know that improving accessibility can drive innovation and improve user satisfaction levels.

“When you design for inclusivity and when you design to make something accessible, you often just make a better product,” says Prill.

“Why wouldn’t any business want to make something that is more pleasant? Why wouldn’t you want that?”

Everyone I spoke to agreed that accessibility must be built in from the start.

Accessible content depends on web browsers, add-ons, author tools, websites, and access technologies all working together. It’s much easier to line up all those complex elements from the start, rather than worrying about accessibility when the content is already live.

“Every product should be thought of and designed with accessibility in mind,” says Orrù.

“Accessibility is one of the foundational ingredients of the product research and development process.”

1. Always have options

One simple rule of thumb is to make sure that every piece of content uses at least two senses.

“When digital content involves only one sensory channel, it generates exclusion,” explains Orrù.

“So videos should always have subtitles to be accessible; images should always include alternative texts; audio should always come with a transcription, etc.”

There is a popular perception that too many options can be overwhelming, or that rich media might cause a sensory overload for some people — for example, users with autism. But accessibility doesn’t have to mean a bare-bones webpage.

Bailey-King is clear that your content can still be multimedia, immersive, and exciting, as well as accessible.

“You shouldn’t have any feature that a person can’t switch on or off,” she says.

“But so long as those controls are available, you can include whatever you like. The more that you design content where the user can be in control, the more limitations you take away.”

2. Use the right code

The foundation of the internet is HTML. And that’s the foundation of accessibility, too.

“Good, clean, solid, semantic HTML,” recommends Bailey-King. “That costs no more money and takes no more time, but it makes a massive difference for accessibility.”

Semantic HTML means labelling the different elements in your content correctly, such as headers, tables, and forms. This makes a huge difference to assistive technologies and screen reader users. If components of your website are labelled incorrectly, then they’ll be rendered incorrectly on assistive devices.

You can also use supporting code, such as ARIA, to mark up features specifically for screen readers. Use this to add helpful shortcuts and timesavers, such as a “skip to content” link at the top of the page. But be aware: the first rule of ARIA is “if you can use HTML… do so!”

3. Create clear structure

Semantic HTML takes care of the structure behind your content.

But what about the visible structure of the content? How do people experience, search, and navigate through your content?

According to Prill, searchability and structure are essential to accessibility.

“Make sure you have a proper structure, that you have a proper site hierarchy.”

It should be easy to find information through headings, links, and a clear layout.

If you need more incentive to include a clear structure, search engines also appreciate clearly structured HTML.

4. Write readable text

Text is one of the dominant forms of media online. It’s especially important for information-heavy websites, such as content from government agencies, educational institutions, banks, and healthcare.

There are lots of simple, instant ways to improve readability:

• Check that the font size is readable, especially for people with low vision. Make it easy for people to adjust if necessary.
• Break up long pieces of text with bullet points, numbered lists, and headings.
• Never use images of text. Always provide text alternatives — i.e. type out what you want to say. If you have to show graphics or images with text in, use captions so that people with screen readers can understand.
• When in doubt, favour plain language.

• Don’t forget to check that your webpages are still functional when users zoom in. This is a surprisingly common issue!

For best practice, all your features should work at up to 200% zoom. At 400% zoom, the page should automatically reorganise content into a single column for easy reading.

5. Always describe links

Hyperlinks are an essential part of search and navigability. They’re also often examples of inaccessible writing.

Think about how many times you’ve seen a link simply labelled “click here” or “see more”. That means nothing!

Instead, link text should always include a unique description. Users should know exactly what to expect when they click on a link.

6. Give users control

The vast majority of internet traffic today is video. And in accessibility terms, that can be great news!

“Video is so amazing… if it’s properly captioned, and if you provide transcripts,” says Bailey-King.

“The captions must be able to be switched on and off, because the burn-in ones tend to be less accessible and can get really complicated for people who are using different tech.”

Similarly, every video should come with effective controls to play, pause, and stop. Autoplay videos can be overwhelming, distracting, or disruptive to assistive technologies.

The same advice applies to audio content such as interview clips and podcasts. Audio-only content should also include visual descriptions when useful; for example, to describe body language or facial expressions that are relevant to a conversation.

The good news is that these actions can also be beneficial for SEO.

7. Make graphics clear

Tables, charts, scrolling animations, and other visual content can all help to convey complex information with clarity. But they only work if you make accessible.

Here are some basic rules to keep in mind:

• Choose colour palettes which are visible for a wide range of people. There are many online tools which will help you preview colours from the point of view of someone with colour blindness or other visual impairments.

• Be wary of colour contrast. Never use colour as the sole method of contrasting information. For example, bars on a bar chart should be differentiated by patterns or labels, as well as colours.

• Avoid flashing or strobing graphics which could trigger seizures. Make it easy for people to scroll away or close graphics which might cause discomfort.

• Check your HTML mark-up and use additional ARIA labels if necessary, especially for tables. Make sure that any interactive features, such as inputting information or editing columns, work for people using assistive tech.

“Testing is so important, and not just to find errors,” says Prill.

“You should also be asking... What have I solved and how have I solved it? Is this solution actually better… is it more usable, does it delight, does it provide a better experience?”

But how do you test for all of that?

The UK government, which is known for its accessible content design and online portals, recommends regular testing for your content, design, and even code. You can use a mix of manual and automated tests. In addition, before you release anything completely new, it should get a full accessibility audit.

Another useful source is 18F, a technology and design consultancy working within the US government. It recommends a checklist which reviews content in three stages, starting with issues that will cause problems for most users, and gradually getting more specific.

Checklists can get you started with manual checks. As well as ticking those boxes, you can also test content with simulators.

“You can use simulators quite successfully,” says Bailey-King.

“You can download screen reader technology if you’re sighted… and then just close your eyes and listen to how the screen reader would read the website.”

But simulations like this have their limits.

“It can’t simulate things like the level of fatigue that I would get if I listened to all my websites. If I work with someone who’s blind, they might say ‘I’m in a hurry. Websites take me so much longer to listen to than it would take you to read. That’s not acceptable for me.’”

Automated accessibility checkers can also miss important details. A 2017 investigation found that testing tools missed 29% of accessibility issues, and often failed to identify or explain problems accurately.

That’s why it’s so important to test content with your audience and to work with people who have a range of accessibility issues.

“I’ll never work with a client and just say, ‘I’m going to make your website work great for blind people or deaf people… That’s not my prerogative,” says Bailey-King.

“I’ve got a big pool of people with a mixture of different disabilities, impairments, and forms of neurodivergence. They use lots of different kinds of assistive tech and are always testing.”

It’s also important to test across a range of computers and assistive tech. Bailey-King says that people can have multiple conditions, medical side-effects, or needs which interact.

“It’s expensive to be disabled. It costs, on average, an extra £600 a month… and often working opportunities are lower.”

That means your audience may not have access to the latest technology and upgrades. Your content has to work on older models and slower internet speeds, in order to be truly accessible.

At the start of this article, I asked what a truly accessible internet would look like. And the tips above give us some idea: more diverse media, more user control, and more options built in without any special fanfare.

“True accessibility and inclusion for me, feels easy,” says Prill.

“It almost feels reassuringly unmemorable… I’d love for things to be so inclusive and so accessible for everyone that even the topic of inclusion and accessibility becomes redundant. All of those services, and all of those processes, and all of those bits of content are just easy for everyone.”

Bailey-King and Orrù agree, and further point out that true accessibility creates inclusion.

“It should feel like a sense of safety and spaciousness for all of us, so that people can show up as their full self,” says Bailey-King.

“And it’s such a rare feeling. How often does someone really have that feeling of inclusion? Yeah, I think not often.”