Accessible by design: how to make sure your website compliant

20 February 2021

Curve
Having a website that has been designed with accessibility in mind ensures you are being inclusive to your wider audience - there are some simple steps to see how you stack up.
Curve

An empowering user experience should lie at the heart of each and every website; it’s what today’s audiences both expect and deserve. In a digitally led world, the audience should always comes first and be centric to your approach: their wants, needs, motivations and interests are absolutely paramount.

More and more brands are now recognising the importance of providing a memorable and rounded digital user experience, one that takes the customer on a fulfilling journey. This trend has only grown in the face of the COVID pandemic; with more people than ever before being reliant on online platforms, organisations’ websites and communications channels have served as a virtual lifeline and, in many cases, completely replaced the traditional offline experience.

Yet as more and more time is paid to the digital user experience, is enough attention being given to making sure that sites can be enjoyed by all users? Are all sites now being designed with inclusivity in mind, going the extra mile to fairly meet the needs and expectations of everyone?

When it comes to websites in today’s digital landscape, there should be absolutely no barriers to participation.

The role of design developing inclusive websites

From the very earliest stages of the build process, your website should always be designed and developed in a way that ensures that everyone will be able to use it.

Auditory, cognitive, neurological, physical, speech and visual disabilities should all be taken into account during the design stages; all these factors can have a profound impact on an individual’s ability to access and effectively engage with online content.

It’s all too easy, however, to overlook diverse audience needs when at the design stage. A striking brand identity, distinctive colour palette or the use of a bold, unusual font may set your organisation apart in the marketplace - but could also mean that an ever-growing audience is prevented from engaging with your brand.

As part of a best practice approach, there are a few essential accessibility considerations that should consistently be taken into account when designing a website.

Five key web accessibility considerations

In the highly creative world of web design, the goal should always be to make life easier for people, not harder.

This is a highly achievable goal for companies of all sizes, as it largely comes down to getting the basics right. Paying attention to these fundamentals can pave the way to a website becoming AA compliant and accessible to the widest possible audience:

Font and button size: A minimum font size of 14pt (18.66px) is the recommended go-to for any modern website. Fonts should be clear, legible and accessible, with all content following the Web Content Accessibility Guidelines’ POUR model - Perceivable, Operable, Understandable and Robust - presented in a way that users can comprehend. Buttons should be clearly visible and easy to navigate and select via a range of devices.

Alternative text: An invaluable but often overlooked aspect of many modern websites, Alt text provides a written description - accessed via a screen reader tool - of an image to visually impaired audiences. Taking the time to tell an accurate visual story via writing a strong image description can hugely enhance the online experience. Alt text can be particularly invaluable for use alongside infographics; this highly popular visual medium benefits from being supported by an in-depth written description that can talk the audience through the image and key findings, without the need for the visual cues.

Scannable copy: Breaking content up into bite-sized chunks makes a huge difference to all audiences; web usage habits have evolved massively in recent years and many of us are no longer comfortable reading long-form copy anymore. A mixture of copy types is recommended to be accessible to a wide audience base: consider the use of short paragraphs, bullet points, lists and pull-quotes wherever possible - after all, you’re not writing a novel! There’s a reason why hugely popular sites such as Medium do not use up much page real estate but allow space for the copy to ‘breathe.’ Often, less really is more.

Keyboard-only navigation: Coding best practice dictates that people should be able to move around a site with ease by ‘tabbing’ - using the tab key without the need for a mouse. Doing so supports blind and visually impaired users, as well as those with mobility disabilities, who rely on their keyboards rather than a mouse to navigate websites. Sites with a navigation built in this way are inclusive to a much wider audience.

Contrast: Perhaps the most important point on this list, contrast also tends to be the most frequently overlooked within the design process, as dominant brand identities can win out over accessibility concerns. The use of colour is often a major accessibility stumbling block.

From a contrast point of view, the simple rule of thumb to remember is that any important information must have a high contrast, allowing the user to see and read it with ease: if in any doubt, WebAIM’s contrast checker is a very handy tool to use. Colours with a lower contrast are still acceptable, but should be used only for non-essential, decorative elements of the site. Guide Dogs' website is a best-in-class example of contrast used to great effect; knowing its audience, the UK charity’s use of a simple type style, large font and dark blue and white provides a highly inclusive online experience to all.

This isn’t a definitive list, of course: other accessibility considerations to bear in mind include

  • contextual links
  • videos with subtitles
  • font spacing
  • the use of forms and labels

For the latter, every element should be designed to allow all users to complete and submit all forms without any errors.

The importance of UI and UX testing to web accessibility

Web designers have both a big opportunity and responsibility resting on their shoulders: both the skill set to ensure that an organisation puts its very best digital foot forward, and the creative knowledge to recognise when certain brand identity elements may present accessibility obstacles to some users.

In the UK today, there are almost 2 million people living with sight loss and approximately 3 million people in Britain are colour blind. For these audiences, the creative design of a website can have a significant positive or adverse impact.

UI and UX testing play a fundamental role when it comes to removing barriers to web inclusivity, and online accessibility requirements are increasingly becoming mandatory: all UK service providers now have a legal obligation to make reasonable adjustments under the Equality Act 2010 or the Disability Discrimination Act 1995 (in Northern Ireland).

It is recommended that contrast colours are always tested at the design stage with a diverse user group, alongside site navigation on both desktop and mobile devices, ensuring that all audiences have the opportunity to receive a strong and helpful user experience.

There are now many, many ways in which users can access and interact with information online and all these avenues must be considered.. Your website should be fully optimised for use on all devices, recognising ever-evolving tech consumption habits. It should appreciate, and be inclusive towards, ageing populations who are increasingly web-dependent (particularly due to the impact of the pandemic), as well as inclusive towards those with situational limitations, limited tech knowledge or slow internet connections, with the digital exclusion divide remaining a huge issue in today’s society, intensified by Coronavirus.

Change is coming: Google Page Experience and web accessibility

Google’s latest algorithm update is coming in May 2021 - and Page Experience looks set to make a sizeable positive impact in terms of encouraging greater online accessibility.

Google’s ‘Page Experience’ signal combines Core Web Vitals to assess how users interact with a web page and how positive - or negative - the experience is for them.

Its aim is to “help people more easily access the information and web pages they’re looking for, and support site owners in providing an experience [that] users enjoy.”

From mobile-friendliness and safe-browsing to visual stability and interactivity, Page Experience aims to tackle a range of elements that can compromise the user experience and ensure that accessibility best practice is followed. Watch this space.

Are you ready to go further?

A striking, digitally inclusive and forward-thinking website can make a hugely positive impact. A powerful and accessible online experience has the power to turn users into advocates, bringing audiences into the brand story that you are telling and motivating them to share this with others.

It’s been reported that 71% of users with disabilities will leave a website that is not accessible to them, and with at least 1 in 5 people in the UK having a long term illness, impairment or disability and many more having a temporary disability, the potential lost opportunity is vast.

Our recent work with deafPLUS demonstrates how a website, built around a strong driving purpose to be inclusive to all, can help to remove all barriers to participation and opportunity. By taking a joined-up, holistic approach, the charity now has an inclusive web presence with advice and support at its core: a frictionless, intuitive and highly accessible service that empowers its users.

So, what comes next? Take time to explore the digital possibilities and what the future could hold for your organisation. Get to know your audience and meet their individual needs. Understand and appreciate their differences and what you can do to help them.

The first step is simple: get in touch and our user experience wondermakers will be pleased to carry out a site audit alongside you. We’ll make practical accessibility recommendations to help you reach the widest audience possible in the right way.