Website accessibility simplified

Design & CMS

When building a website for your members, creating a standout user experience is a top priority. A beautiful interface, creative content, intuitive structure - everything to ensure that your users enjoy their stay on your website. But it’s also crucial to consider what is takes to make sure these features are accessible for everyone.

How can a visually impaired person enjoy your great content, if your site is not properly marked up for screen readers? Or how does your intelligent information architecture support someone that needs to navigate it with a keyboard?

To answer these questions we need to consider website accessibility. Every organisation has a part to play in enabling equal access and opportunities for all, and that starts with building a website which follows best practice guidelines. Here are the essential actions your digital team can take - both in-house and by briefing your digital agency - to make your website accessible.

Who defines what best practice looks like?

The guidelines in this article are designed to outline what is required for your website to be compliant with international best practice: Level AA of The Web Content Accessibility Guidelines (WCAG). (You can read more about WCAG in our helpful glossary at the end of this post.)

“Level AA — The mid-level of conformance to obtain. We recommend Level AA as the conformance for all our client applications.”

The following four principles are designed to ensure your digital services remain accessible to everyone, including users with impairments or disabilities linked to vision, hearing, mobility, and thinking and understanding. Each section is divided into a handy guide for content editors and factors which you can brief your web and design agency to apply.

For content editors
For your agency

For content editors

Provide text alternatives for non-text content such as images by using the alt text
Use subtitles on videos, where appropriate
For video and audio, provide transcripts alongside embedded content
Make sure content is structured as logically as possible
Ensure that text size can be increased by 200%, without loss of content or functionality
Do not use images which contain text within them
Do not use colour as the only way to explain or distinguish something - a common issue for charts and keys. Almost 5% of the overall population have some form of Colour Vision Deficiency.

For your agency

Use text colours that show up clearly against background colour. This means checking that contrast ratios are a minimum of 4.5:1 for normal text and 3:1 for larger text.
Use the proper markup for every feature (for example, forms and data tables), so the relationships between content are defined properly
Make sure your service works well with assistive technologies. For example, ensure important messages are marked-up in code so screen readers can recognise they’re important.
Make sure content can be navigated and read by a screen reader
Make sure your site adapts to a user’s device, page orientation and font size they like to use

For content editors
For your agency

For content editors

Let people play, pause and stop any moving content
Do not use blinking or flashing content, or let the user disable animations
Use descriptive titles for pages and frames
Make sure users can move through content in a way that makes sense
Use descriptive links so users know where a link will take them, or what the content is from a downloadable link
Use meaningful headings and labels, making sure that any accessible labels match or closely resemble the label you’re using in the interface
Avoid automatic pop-ups, unless to provide instructions or to assist website users. For commercial intent (e.g. newsletter sign up, discount offer) use signposting which does not affect the use of the page such as inline messages.

For your agency

Make sure everything works for keyboard-only users
provide a ‘skip to content’ link this does not have to be visible but is useful for screen reader users so they don't need to listen to the menu repeated on every page.
Make it easier for keyboard users to navigate the website by highlighting the area they have currently selected, using ‘active focus’ state
Only use things like mouse events or dynamic interactions (like swiping or pinching) when they’re strictly necessary - or let the user disable them and interact with the interface in a different way
Make it easy for users to disable and change shortcut keys

For content editors
For your agency

For content editors

Use plain english and keep sentences short
Don’t use words and phrases that people won’t recognise - if you can’t avoid it, provide an explanation
Explain all abbreviations and acronyms, unless they are well known and in common use
Make it clear what language the content is written in, and indicate if this changes
Make sure all form fields have visible and meaningful labels

For your agency

Make sure features look consistent and behave in predictable ways
Make it easy for people to identify and correct errors in forms
Make sure all form fields are marked up properly
Ensure a default language is set for the website.

For content editors
For your agency

For content editors

Content pages can be checked for validation using various tools. Warnings will be shown for missing alt tags etc

For your agency

Use valid HTML so it can be accurately interpreted by browsers, devices and supporting software
Make sure your code lets assistive technologies know what every user interface component is for, what state it’s currently in and if it changes
Make sure important status messages or modal dialogs are marked up in a way that informs the user of their presence and purpose, and lets them interact with them using their assistive technology
Lets the user return to what they were doing after they’ve interacted with the status message or modal input

Accessibility can only be a positive move

As technology and content continues to evolve rapidly, it is crucial that website managers, designers and developers make website accessibility a part of their key criteria for service, website, or app development. Ensuring your organisation follows best practice around accessibility can only be a positive move. Both to deliver equal access and opportunities for all users, and to support your organisation to reach as many potential audience members as possible.

Want to talk accessibility?

Get in touch for an accessibility audit assessment report.

Understanding the acronyms

W3C: The World Wide Web Consortium (W3C) is an international community where Member organisations, staff and the public work together to lead the Web to its full potential. Which includes promoting a high degree of usability for people with disabilities. Directed by Tim Berners-Lee (that’s the British guy who invented the world wide web)

WAI: The Web Accessibility Initiative (WAI) is an initiative of the W3C and develops standards and support materials to help you understand and implement accessibility.

WCAG 2.0: The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet

WCAG 2.1: Extends Web Content Accessibility Guidelines 2.0 provides new success criteria as guidance for mobile device users by supporting interactions using touch and gestures.

Level A, AA , AAA
WCAG 2.1 guidelines are categorised into three different levels of conformance

Level A: The minimum level of conformance, the website satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

Level AA: The mid-level of conformance to obtain. We recommend Level AA as the conformance for all our client applications

Level AAA: The highest and hardest level of conformance to obtain. It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

ADA: Americans with Disabilities Act. The Attorney General has publishing regulations for implementing the requirements of title II (state and local government services) and title III (public accommodations and commercial facilities) of the ADA. These regulations are codified in the Code of Federal Regulations.

Related resources

11/08/2020

8 steps to displaying impactful digital imagery

You don’t need to be a designer to source brilliant imagery. These guiding principles will help all of your team to consistently source high-quality, on-brand imagery.

16/08/2021

Typography - what you need to know

Everybody is able to make good font decisions. This guide demonstrates how.

Related resources

11/08/2020

8 steps to displaying impactful digital imagery

You don’t need to be a designer to source brilliant imagery. These guiding principles will help all of your team to consistently source high-quality, on-brand imagery.

23/04/2021

Design audit

Pixl8's Senior Digital Designer explains how to run a design audit of your website, to better understand its visual impact.

19/09/2019

Creative briefing at the Shard

Creating a member-centred digital experience is possible. User research, persuasive copy, and emotive marketing are all ways to ensure you resonate with your members.

20/10/2021

Digital journeys that deliver

Discover all the insights from our latest webinar on "Digital journeys that deliver", organised in partnership with MemberWise.

25/02/2021

What great design looks like

With innovation at the heart of our designs, Pixl8 holds strict core principles that each web development adheres to. We would like to share some of our principles and experience with you, and showcase some great designs that our teams have put together.

30/01/2018

Website accessibility simplified

Share this...

Who defines what best practice looks like?

“Level AA — The mid-level of conformance to obtain. We recommend Level AA as the conformance for all our client applications.”

Your website should be perceivable

Users should be in control

Content should be simple, presented clearly

Technology must be compatible and built correctly

Accessibility can only be a positive move

Understanding the acronyms

Related resources

8 steps to displaying impactful digital imagery

Typography - what you need to know

Related resources

8 steps to displaying impactful digital imagery

Design audit

Creative briefing at the Shard

Digital journeys that deliver

What great design looks like

Ads versus user experience? There's no contest

Raising website design with accessibility

Preview: Design takeover month

A designer’s guide to creative

Top tips to improve your membership landing page conversion

Internal site search: help people find what they're looking for

The laws of simplicity

Typography - what you need to know

Designing online services that wow members

The benefits of user testing your website

How to bring your brand to life online with design systems