The importance of good design and development for web accessibility

Web accessibility is commonly misunderstood as simply developing websites for those who identify as having a wide range of visual, hearing, cognitive, neurological and motor disabilities. In actual fact, it's broader than this. Web accessibility is an approach to developing websites and digital experiences that can be accessed by people in as many different environments as possible.

It's also beneficial when providing digital content to users who are:

• Browsing the internet on a mobile phone.
• Browsing the internet on other smart devices, such as smartwatches and TVs.
• People with 'temporary disabilities', such as a broken arm or missing glasses.
• Accessing digital content with situational and environmental limitations like sound-restricted environments (libraries) or outdoors in bright sunlight.
• Experiencing a slow internet connection.

The Web Content Accessibility Guidelines (WCAG) define four major principles that help a developer determine the accessibility credentials of a website. These four principles, known in the industry by the acronym POUR, are as follows:

Perceivable

All information must be provided to users in a way that is easily perceivable. This meaning that all users are able to effortlessly comprehend the information being presented to them. Nothing should be invisible to all of their senses.

Operable

Users must be able to operate all elements of your website's interface, regardless of the input device they're using. Actions should be easy to perform.

Understandable

Users must be able to understand both the information provided on your website, as well as how they are expected to interact with the site as a whole. Specifically, any content or operation expected of them must not be beyond their reasonable understanding.

Robust

The content on your website must be easily readable and interpreted by a wide variety of accessibility tools, including screen readers. Content should be future-proofed enough so that as technologies evolve, it remains accessible into the foreseeable future.

🤔 Why is web accessibility so important?

A recent study by Scope found that the global spending power of families with at least 1 disabled person is estimated at £274 billion a year. That's obviously a lot of money. For businesses looking to make an impact online, good web accessibility is a great way of preventing the exclusion of services from such a huge group of people. In fact, it's estimated there's $1 trillion of potential revenue out there from a users who are registered disabled.

Adhering to accessibility standards makes the web more accessible for those who identify as having a disability but is just as useful for other web users too.

For example, the inclusion of closed captions or subtitles enables users to engage with video content in situations where audio may not be appropriate or easy to hear (eg in internet cafés, libraries and train stations).

Additionally, there are certain situations where complying with accessibility standards is a matter of law. In the USA some federal and state laws require education institutions to ensure that online content is easily accessible to people who register as disabled. Failing to do so can result in a loss of funding, or even worse, legal action for failing to comply with web accessibility compliance.

Here in the UK, the Public Sector Bodies Accessibility Regulations 2018 dictate that websites and digital applications in the public sector must adhere to the POUR accessibility standards mentioned earlier and that an accessibility statement must be present on these websites.

📜 World Wide Web Consortium (W3C) web standards

The World Wide Web Consortium (W3C) was established in 1994 at the Massachusetts Institute of Technology (MIT) by the inventor of the internet, Tim Berners-Lee. It's an international community where organisations, staff and the general public work together to establish a list of defined web standards and guidelines.

These standards define an Open Web Platform that enables developers to build truly accessible, rich interactive experiences available on any device.

These standards fall into seven key areas:

• Web design and applications - The standards for building and rendering web pages, including HTML, CSS, SVG, AJAX and how to make web pages more accessible to people who identify as having disabilities by adhering to WGAC guidelines.
• Web of devices - Technologies to ensure people have access to the internet from mobile phones and other mobile devices.
• Web architecture - The underlying principles and technologies that keep the web operational, including HTTP, HTTPS and URLs.
• Semantic web - Developing vocabularies and systems that support the transfer of linked data over the web, and establishing a list of guidelines for how data should be handled.
• XML technology - Any XML-based standards, including XML, XML Namespaces, XML Schema, XSLT and Efficient XML Interchange (EXI).
• Web of services - Message-based design based on HTTP, XML, SOAP, WSDL, SPARQL and other tools found across the web and enterprise software solutions.
• Browsers and authoring tools - Ensuring that the web remains accessible across all devices, regardless of software, hardware, sensory modes or spoken language.

🔎 Accessibility as a search engine ranking factor

According to Google’s Search Advocate John Mueller, the accessibility credentials of a website, specifically achieving AAA colour contrast, implementing clear hyperlinks and ensuring font weights meet prescribed minimums, aren't directly tied to a website's search engine ranking potential as they are too hard to quantify.

Speaking directly in a Google Search Central SEO office-hours hangout, he had this to say when asked if there was a direct correlation between accessibility and ranking potential:

With all of that being said, there are a few common techniques used in accessible website design that are also shared with a strong search engine optimisation (SEO) strategy, and it's always been our belief here at Noughts & Ones that good SEO is good accessibility.

Just a few of these shared techniques include:

• Navigation - A well-designed and easy-to-follow navigation make it easier for users and page crawlers to explore and map out your website.
• Page titles and headings - Optimised page titles that are written for real people instead of bots not only tend to index better but are easier to pick up by screen readers.
• Sitemaps - Sitemaps provide a clear overview to a user of all pages on a website, alongside helping search engines find other pages on your site that are linked to far less commonly.
• Anchor text - Providing context to hyperlinks throughout your website to both users and search engine crawlers.
• Breadcrumbs - Allowing users to keep better track of their journey through a website, as well as giving search engine crawlers a better understanding of the structure of your site.
• Alt text - Providing text-based alternatives that can be read by screen readers alongside giving search engines a clue to the visual content of images uploaded to the website.

🪧 How do I make my website more accessible?

We recommend producing an accessibility audit or checklist to help identify any potential issues before starting any web development. As a great starting point, WebAIM have put together a handy WGAC2 checklist that breaks down some of the technical jargon of the WCAG guidelines.

Tools such as tota11y or SortSite can be invaluable when it comes to identifying issues in live website development, but tools like these should never replace a thorough, manual quality-assurance process.

To ensure you're developing with accessibility in mind, here are our top tips for developing an accessible website, gained from years of experience working with accessibility and sustainability-conscious clients.

Focus on clear colour contrast

With over 285 million people worldwide living with some form of sight loss, it's crucial to ensure that web designers are able to effectively create digital experiences that can be enjoyed by the widest range of people possible.

Poor colour contrast, particularly when used across text or buttons and calls-to-action, effectively renders the majority of functional content across a website useless to those with a visual disability. While it's generally considered slightly more acceptable for certain decorative or background elements of a website to be more generous when it comes to contrast and colour pairings, as Hubert Florin, UX designer at Slack, states:

"If it’s okay for some people to not see a part of your site or your design, then why is that design element there in the first place?"

Online tools like Color Review are great for instantly checking colour combinations against accessibility guidelines. We aim for a minimum rating of AA for body copy, and AAA for all headings and calls-to-action to ensure a seamless browsing experience across all of our client's websites.

Include relevant alt text and image labels

Image labels and alt tags should be descriptive, accurately summarising the visual content of an embedded image or video on a web page. These labels are used by screen readers to help the visually impaired understand the content of image-based elements around the page, alongside providing SEO benefits that enable search crawlers to determine the relevance of imagery across a website.

Alt text should be specific and descriptive without going into too much redundant detail. For example, writing something as basic as "an aeroplane" doesn't offer anywhere near as much useful detail to a user as "a Boeing 747 aeroplane taking off from Gatwick Airport".

As such, developers should avoid trying to be clever by including hidden messages in image labels. They should make a deliberate effort to remove placeholder alt-text such as any stock image numbers from the graphics they upload to a website.

Avoid repetitive button text and hyperlinks

Avoid generic phrases like 'Click Here' or 'Shop Now' for buttons or text-based links. Instead, focus on descriptive text like 'Read More About Accessibility' to let users know what they can expect to happen when they click.

This is really important for people using screen readers, as it helps them differentiate where different links on the page will go. Otherwise they can be faced with a list of links that share the same string of text but none of the visual context users with good eyesight may take for granted.

Beware of dark patterns

Dark patterns are deceptive tricks often used in web design to force users into actions that they didn't intend. Examples include purchasing a product or subscribing to a newsletter.

On ecommerce sites, dark patterns include products sneaking themselves into user's basket, forced continuity after signing up for a free trial, or making it deliberately hard to compare prices. Dark patterns make it hard for users to make an informed decision on their purchase.

To avoid dark patterns, be deliberate with your design decisions. Make sure that your customers are able to easily navigate the site without any hidden surprises along the way.