The ultimate guide to accessible website design

Check your site

What is web accessibility?
Benefits of web accessibility
Accessibility problems
Designing an accessible website
Testing and tools
Examples of accessible websites
Conclusion

Web accessibility refers to the practice of designing and developing websites that are usable and readable for web users of all abilities and disabilities, including those who are hearing and visually impaired. Maintaining an accessible website is a sure way to provide equal access to information and opportunities for those who wish to engage with your services.

The disabilities that can affect and impede browsing behaviours can come in many forms. These disabilities can be permanent, temporary or situational - all of which should be considered when designing an inclusive user experience. Permanent disabilities can include blind or deaf users or even someone who has suffered limb loss. Whereas a temporary disability could include a person who is recovering from an injury, for example, a hand injury - in which keyboard-browsing is temporarily required. Lastly, situational disability can be as little as holding a small child when using a web-browsing device.

Individuals with impairments or disabilities make up a considerable portion of the world’s population, and such users are often left out of the web design and development conversation. The World Health Organisation (WHO) estimates that 1.3 billion people (16% of the world’s population) have a disability.

The CDC estimates that around 27% of adults have a disability. This means that inaccessible websites are failing to accommodate roughly 1 in 4 people. The proportion of those living with disabilities is set to increase over the coming decade.

The Web Content Accessibility Guidelines (WCAG) is a publicly-available set of guidelines for making web content more accessible. The guidelines are graded by three categories, A (lowest), AA (middle range) and AAA (highest) depening on the impact on the end user. Level A sets the minimum requirement for accessibility, however the recommended level to strive for is AA compliance.

Adhering to the WCAG framework helps ensure your website can easily be engaged with by people with disabilities. It is a comprehensive guide that accounts for how different users engage with the web, including design and developmental best practice for screen reader and keyboard-use.

Background and foreground colors have a sufficient contrast ratio (AA). There are a critical set of visual checks that relate to colour contrast and meeting the colour contrast requirements. A sufficient use of colour makes content more perceivable to all users, which is a key principle of the WCAG.

The WCAG provides gradings to ensure sufficient contrast is met between text and background colours. There are two levels of acceptable contrast: minimum (AA) and enhanced (AAA). The definition of these levels can vary depending on the size of the text.

Passable colour contrast could be in the context of calls-to-action (buttons) as well as navigation menus (navigating your site) and marketing banners - where images and text intersect. To account for readability, WCAG also provides guidance on typography - including minimum font sizes and ideal spacing across different devices. This can relate to a wide range of visual elements including headers, subheaders, hyperlinks, lists and paragraphs.

Creating a positive and inclusive experience for all users has business benefits as well as benefiting the web users who visit your site. An accessible experience ensures that all users can easily navigate and interact with your website. A consequence of a positive user experience is quicker engagement with the content that you want your customers to engage with (or purchase), due to less steps in the user flow. Creating easy-to-use websites are a no brainer when it comes to customer retention!

Google SEO (search engine optimisation) also favours more accessible websites. All of this can lead to a greater and more positive brand awareness.

Website accessibility is a legal requirement in many countries, and non-compliance can result in legal consequences.

In the UK, public bodies are legally required to comply to the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 (PSBAR) and provide accessible web experiences for customers. This includes universities, police, local and national government and NHS trusts.

Sound advice in the industry says that even if there isn’t a current legal requirement in your country to ensure accessibility guidelines are met, it is best to be ahead of the game and invest the time to do it anyway. Local laws could change in the future and it may be easier and cheaper to make these changes sooner rather than later.

An additional benefit of creating an accessible website and accessible web content is reinforcement of a company’s reputation as a professional and trustworthy brand - which can lead to increases in the customer base

There can be many obstacles to overcome when trying to build a truly accessible online experience, especially if you are starting from scratch and this is all new to you. Even more so if you are inheriting outdated or inaccessible content to work from. At face value, the accessibility issues that companies face when building their websites are often common and predictable.

Some of the most notable barriers to look out for include:

• Missing alt text - A lack of alternative text for images (alt tags), that can be read out by screen readers for visually impaired users.
• Poor colour contrast - which can compromise critical messaging on a website, as well as text inside call to action (CTA) buttons - often leading to poor tap rates and lack of engagement.
• Inaccessible forms and navigation - notable mistakes include lack of form input labels and poor usability for screen readers and keyboard-users who rely on the tab key. Applying logical flows for keyboard-use is especially prevalent for forms.
• Inadequate closed captions and audio descriptions - which relates to including language and region-specific subtitles for deaf users and audio recordings options available for sight-impaired users.
• Content is not compatible with assistive technologies - the website has been designed and developed only for the use-case of neurotypical and able-bodied users. This creates an non-inclusive and possibly discriminatory online environment.

Ensuring that navigation is consistent and easy to use throughout the website and across devices helps maintain site visitors. It is requried to also provide alternative text for images as well as ensuring that interactive elements are accessible - particularly for screen reader users.

As well as providing closed captions and audio descriptions for multimedia content, it is advised to use clear and concise language when writing a website's content. To make life easier, accessibility and content quality web tools such as Insytful provide readability checks and scoring. Grammar and misspellings are frequently identified pain points for accessibility.

There are many methods of analysing the readability of content, one of which is The Flesch Kincaid Grade Level: a readability formula that assesses the approximate reading grade level of a text, based on average sentence length and word complexity.

Lastly, make sure to organise and structure content in a logical manner. A key to great accessible design, web or otherwise is a well-considered hierarchy of content. In the case of web accessibility this is critical for providing a great user experience for keyboard users.

Following on from applying good web page and content structure, ensure to provide a clear and consistent layout. There is rarely a need to overcomplicate or overfill your layouts and it is usually a safer bet to focus on the quality of your content, making sure it is readable and understandable rather than sheer quantity.

An additional tip when organising content in an engaging way is to use headings and subheadings. Along with paragraphs and adequate spacing, headings and subheadings allow content to be broken up in a digestible way, reducing visual and mental effort when for users that wish to engage with your content.

A logical reading order enhances the reading experience for all users, regardless of reading ability or the format of the content presented to them. The logical order allows the user to comprehend information clearly and coherently. Having a logical page order makes it easier for assistive technologies to follow - as the information is presented and/or read out in the accurate and intended order. Elements taken into account when defining logical order include headers, subheaders, paragraphs, tables, lists, images, calls-to-action and various other elements.

For web readability, some fonts are much better than others. Google Fonts is a handy resource for accessing revered web accessible fonts, freely available for Gmail users.

Web accessibility evaluation tools such as Insytful specialise in identifying and fixing accessibility and content quality issues, as well as analysing page performance speeds and SEO rates. Tracking improvements over time is additionally useful, as some of these things take time!

Browser extensions such as ARIA DevTools are also readily available. ARIA is a set of protocols that allows developers to test the accessibility of web content and web pages - particularly JavaScript.

If web accessibility is not an area you have the time, expertise or inclination to do yourself, you can hire a web accessibility expert to conduct a comprehensive accessibility audit.

There is always value in accessibility testing your website whenever and however possible, especially if the testing involves genuine users of your website. This is never truer than when testing with your disabled user base; whose members can identify genuine accessibility issues.

The Digital Accessibility Centre (DAC) is an organisation that focuses on making digital media accessible to all users, across all platforms. The DAC is a go-to for many major organisations and public bodies for ensuring best practice in accessibility standards and legislation.

The Insytful team has deep knowledge and experience in the world of accessibility and can advise on what your first steps should be if you want to build accessible rich internet applications and epxeriences for your business.

The London School of Economics and Political Sciences (LSE) is a world-leading university that specialises in social sciences. LSE have tailored their online experiences to facilitate the needs of their current and prospective students. With intuitive programme search facilities, student portals and engaging blogs, not only do LSE have a high accessibility rating, they also have great community engagement.

Suffolk Council is a perfect example of creating a community-focused experience. Suffolk noticeably focuses on seamless navigation, splitting pages into quick Services, Pay, Report, Apply pillars as well as favouring visibility of popular and most viewed services based on user interaction and key metrics. Overall, Suffolk Council have created a web service that gives community members quick and uncomplicated avenues to achieve the tasks they need to. For example, checking which day the recycling bins go out!

The West Suffolk NHS Foundation Trust have built a highly accessible and usable website for community members, patients, staff members and job seekers who have a disability. Notably, the Trust's website has well-considered, readable and structured content for screen readers and always available calls-to-action for patient support, such as the click-to-call button at the top of the page. West Suffolk have included an audio transcription extension, providing users with multilingual text to speech options including hovering over text to initiate audio.

Putting their money where their mouth is, The Digital Accessibility Centre (DAC) website is one of the strongest accessible website examples. The company provides a comprehensive set of web accessibility resources and guidelines, making them a go-to for web designers and developers and a trusted source-of-truth for clients such as the NHS, UK government and several UK banks.

Meeting accessibility standards when designing and building your website is crucial for creating a positive and inclusive online environment.

Depending on the professional sector and country of business, there are often legal requirements to uphold minimum accessibility standards. There are many benefits to encompassing high standards such as; building your reputation as a professional and trusted brand and retaining customers by providing a satisfying user experience.

By adopting content quality and web accessibility tools such as Insytful , website owners can ensure that their website and the content meets web accessibility standards and is accessible to everyone.

Find out how accessible your website is and how you can improve the usability, with Insytful.