Why your website content should be accessible, and how

It’s easy to focus on your website’s content strategy – i.e. the topics, the spokespeople, the tone of voice. But it’s equally important to consider how this content is displayed to your readers. 

There’s a whole host of common issues which come with accessing web content. Arguably, these issues center around the fact each user is different. So, each one will require varying levels of accessibility to fully benefit from your content.

This means thinking about the components making up ‘accessibility’. As well as understanding how you can make your own content more digestible. No matter the reader, watcher, or listener. 

To get you started, the team at Manifesto has put together a series of basic best practices. But first, let’s discuss why accessibility is important.

We can begin by taking a look at the facts:

• 1 in 12 men (8%) have colour blindness
• One in six over 45s (15%) have some sort of reduced vision
• 15% of the world’s population has a disability, equating to 1 billion people
• And women constitute 75% of disabled people in low and middle income countries

Accessibility can often be overlooked. This is because people don’t tend to connect to percentages. Especially if the statistics don’t affect them personally. But these are real people, and they struggle accessing web content every day.

Katrin Langensiepen is the first female with a visible disability to sit in European Parliament. She recently cited the core issue those with accessibility issues still face in the world today:

“My experience shows that the needs of people with disabilities are not factored in at the design stage. […] The answer to this lies in the structure of organisations and public institutions, and pre-checking design infrastructure. […] The barriers are not just physical. […] We need to consider using captions, image descriptions for people who are blind, or include different formats of information for people with different disabilities.”

To visualise the barriers those like Katrin face, let’s look at a few examples.

Physical disabilities

Keyboard accessibility

When we’re writing code, we need to ensure it’s clean, semantic (i.e. clear in meaning), and well-built. Because so many elements of accessibility rely on this.

Screen readers use HTML code to read out the web page to people with vision impairments. Or those with ‘sip-and-puff’ (SNP) machines. 

SNP machines cater to those who can’t use a manual device, like a keyboard. They use air pressure to send a signal to a device, which then sparks certain commands. Just like a keyboard or mouse.

By default, some HTML elements already have a keyboard focus. But if we’re building something custom in Javascript, we need to be especially wary of interactivity. Be that through a keyboard, or via speech input.

Getting your focuses right

The same goes for content unlocked by clicking an element on the page, then you need to check that this element is still usable when mouse-less and using a keyboard. If a user is tabbing through a page, but can’t focus on a particular button, this part of your content is inaccessible to them.

It’s also important to consider your site’s visible focus. If this isn’t clear, then your site visitors could easily get lost.

The same is true for illogical focus, which can leave a user confused or frustrated. When checking your site make sure your focus moves through the page in a logical and intuitive way, i.e. not jumping around randomly. 

Pop ups often struggle with this. An example of a logical focus for a pop up would be: a user presses a button, the pop up opens and their focus moves from the button into the new pop up area. Likewise pressing to close the pop up should return the user back to the first button.

Placing, sizing and displaying of buttons

If you incorporate a ‘Skip to Main Content’ link at the top of your web page, users can more easily navigate your site. And they can jump over repetitive content. A link like this allows site visitors to more quickly access what they need.

For those users with dexterity issues – such as arthritis, or tremors – you should consider whether your buttons are too small to press.

In the design phase, it’s therefore better to incorporate big targets, far apart. That way, you can avoid those with less hand coordination struggling to navigate your site.

Also remember, buttons (or links) without text instantly exclude those users relying on speech readers. And multiple links marked with the same text can make it hard for speech readers to discern between them.

You can get around this by setting up grids on your web page, or numbering each element. But these processes will likely get tiring for users. So it’s easier just to avoid duplicate links.

Visual impairments

Friendly font and colour palettes

Fonts which don’t support re-sizing on your site will gravely impair those users with reduced vision. Some will need to enlarge the text in order to read it. Whilst those with long-sightedness will need to minimise the text size to focus on it.

To solve this, your website should allow users to zoom in, or out, without the content becoming cut off.

Developing with tools like ‘Wave’ (a Google Chrome plug-in), or designing with tools like ‘Stark’ (an Adobe plug-in), will ensure your website hits these sorts of criteria for accessibility.

This is important, because websites which rely heavily on glaring colours often cause issues for those who can’t perceive colour.

Wrapping images and videos with text

Many users which land on your site will be unable to consume your images. So, attaching clear and concise alternative text (or ‘alt text’) to them can help screen readers understand their context and meaning. 

Alt text is particularly pertinent when you’re trying to convey content which relies heavily on photographs or graphics to tell a story. But if the images are only decorative (and aren’t relevant to the content), alt text isn’t necessarily a requirement.

The same goes for integrated videos. Including an audio description helps people to feel seen. As often, this accessibility component is forgotten.

Cognitive and learning disabilities

Flexible and responsive design

For people with disabilities such as ADHD (attention deficit hyperactivity disorder), interacting with a busy website can become overwhelming. By ‘busy’, we mean excessive use of different columns and interactive elements.

Shifting your website to a one-column layout will make it easier for those users with attention-related disabilities to absorb your content.

Limiting your use of images with text can also help this demographic comprehend the content better. But overusing them will be distracting.

As for animations, or autoplay videos, which can’t be paused, they can be startling. Both for an average user, but especially for one with a learning disability. Which is why it’s always best not to incorporate these.

Keep language simple

Complex text can automatically discriminate against users with learning disabilities. 

This could include acronyms which aren’t spelt out. Metaphors which require prior knowledge. Or slang terms only relevant in certain cultural contexts.

The form of your content matters too. You can adopt plug-ins like Yoast, which check your content’s readability. It bases scores off things like the average sentence length. Or the average number of syllables per word.

Hearing and speech disabilities

Don’t stop at subtitles

Including subtitles, transcripts or sign language for those who suffer from hearing impairments is a huge help. Adopting a combination of the three is even better, because it gives these users optionality.

For some people, sign language is their first language. Whilst others may suffer from multiple disabilities. For example, a user might be deaf and dyslexic, making subtitles too fast to understand.

When writing your subtitles, ensure they’re easy to read. By this, we mean good colour contrast, appropriate font size, and a clear font style. Whilst it’s not a must, setting subtitles against a background makes them far easier to read. 

Alternatives to speech

It’s always best practice to include alternatives to speech recognition features on your website. For example, a user should be able to talk into a search engine, as well as type into it.

Whilst the world is moving further towards voice assistant technology, it’s important to remember not everyone feels comfortable with this.

The same goes for your ‘Contact Us’ page. Give people options. Don’t just include a number, offer an email address. Or a ‘Contact Us’ form integrated into your site.

Remember, these are real people

We hope this article has shared some helpful pointers and key takeaways for how you can improve your website’s accessibility. There’s certainly some take-aways for us to improve our own website, which I’ll be working with our team to improve this year. 

If you need more advice, or want to suggest additions we haven’t thought of, don’t hesitate to get in touch. You can either email us via hello@manifesto.co.uk, or fill out this contact form.

It’s easy to treat accessibility like ticking off a checklist. But these are real people facing content accessibility hurdles daily. 

By remembering the frustration they must experience, you’re more likely to create websites which truly consider accessibility for every user.