To ensure everyone can access your products and services, you need accessible web content. Three accessibility experts share their tips and advice.

How can I make web content accessible?

Digital experts Jonathan, Colin and Chris share their expertise and experience to answer your question – how can I make web content accessible? 

Jonathan Hassell

Jonathan is a digital accessibility expert, the lead author of the Digital Accessibility Standard ISO 30071-1, and has over 20 years’ experience in helping organisations build accessibility into their business. He has also authored 2 best-selling books on the standard.

—

Four in 10 people have digital accessibility needs, and yet, at most, just 20% of websites and mobile apps are accessible to everyone. Digital Accessibility is critical to make your digital platforms usable by all your consumers or employees.

Taking the steps to build-in accessibility into your capabilities and processes isn’t just the right thing to do; improving accessibility makes sound business sense.

There are many, many quick fixes that can be done in the immediate term.

My top 3 ‘quick fixes’ would be:

Use headings to divide your page content into sections, and use the level of the headings (h2, h3 etc) to show the relationship between the sections. That way everyone can browse quickly around your pages to find the information they need.

Ensure that your link text always describes exactly where the link will take the user. For example: use ‘meet our team’ rather than ‘find out more’ or ‘click here’.

Ensure that older users, and those with vision difficulties, can make text size bigger in their browser without it breaking your page layouts, or text spilling over other things.

Embed accessibility

However, the most successful organisations think longer term. Get to know your users – do research with users that use assistive tech or need accessibility adjustments, to really understand what they need. Map out the customer journey and ensure all customer touch points (your social media and PDFs as well as your website, for example) are accessible.

Train your teams in digital accessibility according to their role – this is everyone’s responsibility! Finally, build accessibility into your processes so accessible products are built (or bought!) every single time.

Colin Grist

Col is the Co-founder and Creative Director of Few and Far a creative studio that’s using digital innovation to help charities and do-good businesses make the world a better place.

—

Don’t assume that plugins will make your website accessible

A lot of websites are now relying on plugins or overlays to ‘solve’ their accessibility issues. So instead of understanding our website’s current accessibility issues and making simple changes to resolve them, we might jump for an off-the-shelf solution to the problem.

The problem with this is that plugins can often overcomplicate the issue by changing your site code, giving users more options than they needed, they can bloat your website’s code and they don’t make your website compliant anyway. But, most importantly, for people who are in need of accessibility assistance, plugins can actually hinder them as these tools overwrite normal functionality of a website, their browser and their computer.

See here for some alarming comments from disabled users on the negative experience of plugins/overlays and our article on the matter here.

Understand what ‘accessibility’ means

It’s important that your website’s content is accessible to everyone but also that you understand what that means for your end users too.

Accessibility means:

Having text that is not only readable by the human eye, but by computers too.

Users who are blind will be reliant on a screen reader to read your website’s content back to them, so don’t use images to convey important information (such as statistics) and don’t use image buttons for calls to action. If you can ensure your content is readable by eye and by computers you might not need to pay for a plugin. It’ll also benefit your search engine ranking as Google can read your important information too.

Having legible content

Lots of italicised text, over stylized fonts, reams of centre-aligned paragraphs or very small copy are difficult for any user to read, so imagine someone with dyslexia or someone who is partially sighted trying to read it.

Having contrasting colours

Users who are colour blind or partially sighted will have differing experiences on your website and so ensuring we have highly contrasting buttons/text and body copy/background colour is something we should all check. We don’t need lots of website filters that a plugin provides for this, we just need to check our colours have adequate contrast and adjust if necessary.

A great way to check if your colours contrast enough is by using this simple tool – enter your foreground colour (e.g. your body copy colour) and your background colour (e.g. your websites background colour) and it will tell you if it has or hasn’t passed the threshold for contrast. If it has, you don’t need to do anything, if it hasn’t, use the sliders to adjust your colours until it passes then change the colours on your website to the new ones.

Those are all things you can do to get you on the right track to a more accessible website, that’s easy and without a plugin in sight.

Accessibility isn’t just about text and colours

Though the above are all important aspects, accessibility is more than just contrasting colours and legible text. It’s about being inclusive too and being considerate of our users and the time that they spend with us.

Don’t overwhelm people

Imagine entering a museum and being presented with 20 different directions in which to go, wouldn’t it be better to present our visitors with one or two routes and let them go from there? This is the same online.

We don’t want to be overwhelming users when they first visit our website, this is something we call ‘choice overload’; give users too many things to look at and choose from and they won’t choose at all. This can come in many forms but a few common ones are: too many main navigation links, menu dropdowns, pop ups, chat bots, newsletter suggestions. We’re overwhelming users and have too many things vying for our attention. So take a step back and look at your website with a fresh pair of eyes: is it clear where users need to go? Do we have too many choices?

Ask questions in a respectful way

When asking personal questions (if you need to), ask them in a respectful way and if you can, explain why you need that information. If you don’t need to ask, don’t. We’ve all seen options on a form that asks us for our Date of Birth, but many users don’t know why you need that information or what it has to do with their submission. Another classic is the title field or the gender field; are they required or are we asking personal questions for the sake of it? A common problem we’ve seen too is when the gender field labels our choices as ‘Male/Female/Other’ – that’s not very inclusive and puts your website and services in a bad light.

Be considerate when using audio and visual content

Imagine going on a website for support with domestic abuse and seeing an image that could trigger thoughts of your experience with domestic abuse. This happens (and that’s a real example) when we aren’t considering content and imagery from a users’ perspective and go with something that we may think ‘looks good’ or ‘gets the message across’. We have to ensure that we don’t use imagery they may find disturbing, offensive or triggering.

Finally, we want to enable our users to read our content in their own time and at their own speed too, we don’t want to provide autoplaying video or audio or carousels that move at speed we decided was quick or slow enough. Users need to be able to decide if they want to watch your video or pause content to read at their speed. If your website has lots of motion, can a user pause it if they find it too much? If not, users with motion sensitivities (such as vertigo) will struggle on your website.

Chris Naylor

Chris is the Managing Director at Bnode, the ethical and environmental digital marketing agency. Where digital strategy and ethical practices are intertwined, utilising the power of business as a force for good for people & the planet.

—

How annoying is it when you visit a website that just doesn’t work properly? A broken image, a button that doesn’t click, or has a bad User Interface design, and you can’t easily see where to go next? You just click off and go to another website.

There are tens of millions of people living with different levels of abilities in the UK, such as physical disabilities, colour blindness and neurodiversity. So there are even more elements that need consideration for your website to give everyone a good experience.

There is a whole range of things people throughout your business can do to make your web content more accessible. If you have any questions about any of the points below – click here to get in touch.

What Web Content Managers can do.

Provide Web pages that have titles that describe topics or purpose

Provide meaningful headings and labels to help users understand the information contained in pages

Provide descriptive link text

Write descriptive alt text for image

Write transcripts and captions for video content

Write meaningful user experience copy and error messages with suggestions on how to recover from errors

What Designers can do.

Avoid using text in images

Ensure all elements have a sufficient contrast ratio with their background element (3:1>)

Providing a fallback difference using size, colour and/or shape when only one of these is displayed

Order content in a meaningful sequence

Follow WCAG typography guidelines

Craft UI elements to ensure keyboard only users are not trapped in content i.e. modal dialogue boxes

Ensure there is a UI mechanism for the user to pause, stop, or hide any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds

Provide a number of ways for the user to orient themselves within a set of Web pages and find related information (I.e. breadcrumbs, sitemap etc.)

Make the user experience consistent

Don’t justify text

Don’t spec elements that violate the Three Flashes or Below Threshold (for epileptic users)

The size of the target for pointer inputs is at least 44 by 44 pixels with sufficient spacing

Visually highlight focused elements

What Developers can do

If non-text content is pure decoration, then it is implemented in a way that it can be ignored by assistive technology

Enable ‘skip to content’ for assistive technologies

Make form inputs accessible

Accurately group  related form elements (i.e payment details etc.)

Providing a description for groups of form controls using fieldset and legend elements

Making the DOM order match the visual order

Facilitate 400% zoom by Using em/rem units for font sizes and container dimensions
Using media queries, grid CSS and flexbox to reflow columns

Ensure keyboard only users aren’t trapped in content i.e. modal dialogue boxes (enable escape key)

Ensure content is accessible when javascript is disabled

Use ARIA* markup to identify regions of the page, required fields and UI controls

* Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. It supplements HTML though is only needed if titles, alt attributes and labels are not able to be used.

Keep learning

A huge thank you to Colin, Chris and Jonathan for sharing their expertise. Here are some ways you can learn more.

1. Search Everyday People’s learning directory to find courses and webinars on web accessibility.
2. Read Jonathan’s books on inclusive design.
3. Take a look at the resources on AbilityNet.

Find everything you need to grow a business
that makes a difference.

this way > >