Accessibility: How it supports Performance, Sustainability and Search Engine Optimisation

As Sir Tim Berners-Lee, inventor of the world wide web, said:

The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.

As designers and developers, when we build accessible websites and applications, we remove barriers for people with disabilities and impairments and empower our users. We are also providing a better experience for all our users. When we don’t prioritise accessibility either by choice or by accident, we can exclude people from our sites and applications. Yet, as Shaun Conner the Government Digital Service Accessibility Lead said in a recent talk, people are still not prioritising accessibility.

As a business or organisation that has invested in building a product or a service, investing in accessibility will help expand the reach of your service. An estimated 135 million people in Europe live with a disability (Source: World Health Organisation), and Purple Tuesday reports that 75% of disabled people and their families have walked away from a business because of poor accessibility or customer service.

Building our sites and applications to be accessible from the prototyping stage is much easier and cost-effective than retrospectively fixing accessibility issues. Launching a site or service with accessibility issues can impact brand reputation and can have an increased legal risk.

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) are a set of technical standards developed by the World Wide Web Consortium. The WCAG are designed to make web content more accessible to people with disabilities. Whilst they are not legally binding by themselves, many laws worldwide reference them.

WCAG are based on four main principles, known by the acronym POUR. As defined by WCAG, POUR stands for:

• Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
• Operable - User interface components and navigation must be operable.
• Understandable - Information and the operation of user interfaces must be understandable.
• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

There are three levels of conformance:

• A - minimum level
• AA - includes all Level A and Level AA - this is the level of compliance that public sector organisations should be meeting. It is the level of compliance also mandated under the European Accessibility Act.
• AAA - includes all Level A, AA and AAA.

To state a site meets a level of conformance, every page must meet every criterion for that level.

Development And Accessibility

From a development perspective, accessibility overlaps with different disciplines, so it makes sense to include it as part of the development lifecycle:

• Speed is an accessibility issue; a slow site is an inaccessible site.
• Accessibility can improve sustainability.
• Accessibility enhances search engine optimisation.

Accessibility and Performance

As I’m sure you’re aware, when pages are slow to load, and the images don’t display straight away, the alternative text (or alt text) added to the image is shown as the pages load. However, accessibility is more than this and is crucial to performance. Decisions made when optimizing for performance can also impact accessibility.

HTML

Assistive technology relies on semantic HTML to determine the structure and meaning of a web page; for example, styling a <div> to look like a <button> does not have the same meaning to assistive technology as using the semantic HTML <button>. Semantic HTML means there is no need to add JavaScript and styles to the markup to make non-semantic elements look and act as semantic HTML, making the pages quicker to load.

This is not to say our websites and applications can not be dynamic, as techniques like progressive enhancement will help build an experience that works for both assistive technology and those with modern browsers.

Fonts

Fonts play an essential part in the legibility of sites and applications. A good font supports people with poor vision, dyslexia, migraines, etc. Serif and sans serif fonts are recommended for legibility (British Dyslexia Association).

System fonts do not need to be downloaded, so they add no weight to the page, helping both speed and sustainability.

Fonts which are both system fonts and suitable for accessibility are serif / sans serif system fonts such as Times New Roman and Arial.

Google Lighthouse

Performance can be tested using Google Lighthouse in Chrome Dev Tools. Running a Google Lighthouse scan returns various metrics on performance.

A lighthouse report will contain the following:

• First Contentful Paint - this is the time when any page content is rendered on the screen
• Largest Contentful Paint - this is when the page's main content has likely loaded
• Total Blocking Time - this measures the time between the first contentful paint and the time to interactive
• Speed Index - measures how quickly content is visually displayed during page load
• Cumulative Layout Shift - is a score for unexpected layout shift during the lifespan of a page.

When reviewing the performance scores, accessibility forces us to focus on reducing the speed index and total blocking time values, as only when a page is fully loaded can an assistive technology user interact with it. First Contentful Paint is not a good indicator for performance and accessibility as:

• Under WCAG 2.2 all functionality should be keyboard accessible. First Contentful Paint is when any content is first rendered on screen; this does not indicate when someone using assistive technology can interact with the page.
• Users of assistive technology may not be able to see when the first content is rendered on screen visually.

When improving lighthouse scores, we should include accessible interactions, such as those needed for keyboard inputs in the critical rendering path.

Accessibility and Sustainability

Each interaction between a server and an end-user requires energy to process.

By using semantic HTML, browser defaults and HTML, we are not only improving the site's speed and making it accessible, but we are also reducing the amount of data that needs to be transferred from the website to the end user.

But we can go beyond that as accessibility requires us to review the following:

• Audio
• Images
• User journey
• Videos

Audio

It is a AAA requirement to have low or no background Audio. Meeting this requirement by having no background audio will help the websites and applications be more sustainable as no additional audio data needs to be stored or downloaded.

Images

As part of accessibility, each image requires alt text or to be marked as decorative within the markup.

To add an image using alt text use:

<img src="IMAGE_SRC_FILE" alt="text for image"/>

To make an image decorative use an empty alt attribute:

<img src="IMAGE_SRC_FILE" alt=""/>

If we are marking many images as decorative or struggling to define alt text for an image, you can start to question if that image is needed for the piece of content the image is aligned to. If you are not uploading as many images for the amount of content, then this makes the site more sustainable:

• There is no need to store the image for the website
• The image does not need to be downloaded.

Images of text should never be used WCAG (2.2) Success criterion 1.4.5 Images of Text states images of text should not be used. In terms of sustainability, downloading text is far more sustainable than downloading an image.

User Journey

Making the user experience and journey easy is part of accessibility: in doing this we make it easier to surface content. By removing barriers to content, we are making it easier for users to find content, are surfacing fewer pages, and are reducing the energy costs of transferring data around the web.

Videos

Autoplaying videos create a cognitive overload and accessibility guidelines state that a video should have a pause/ stop button to stop them playing. A 1 minute HDV 1080 auto-downloading and auto-playing video can add 157 MB to the page size (source: wholegraindigital)

By allowing users to stop the video we are halting the streaming and making the site more sustainable. We are also not using the user’s mobile data.

Accessibility and Search Engine Optimisation

Accessibility implemented correctly can help Search Engine Optimisation (SEO). This section covers a few of the different WCAG Criteria which can help with SEO.

Audio and Video

As a society, we are generating millions of videos daily, with 3.7 million new videos uploaded to YouTube daily and 34 million videos posted on TikTok daily.

To be accessible, these videos all need captions, and many people are relying on automatic captions.

Adding captions and transcripts does help with search engine rankings if they are reviewed before publication. Any errors in the captions and transcripts will not help people viewing or hearing them. It will impact SEO. Google itself says it will rank high-quality content over poor quality. As auto-generated captions have errors, they will be ranked lower than those with higher-quality captions and transcripts.

Colour

Under WCAG, colour should not be the only way to distinguish information (e.g. red for danger, green for good). This not only helps provide context to people who may be colour blind or have set their system up to help relieve systems of photophobia, but it also gives more information to search engines.

Colour should have a contrast ratio of at least 4.5:1. In defining a usable colour palette, the user experience is enhanced, and this again helps search engine rankings as it allows the page experience.

Headings

Whilst in WCAG section 2.4.10, section headings are defined as an AAA criterion, according to WebAim screen reader users server in 2021, 85.7% said that they find heading labels very or somewhat useful. As assistive technology uses headings to provide in-page navigation, navigating using headings "remains the predominant method for finding page information."

Images

As discussed previously, images need alt text (unless they are decorative); adding alt text helps search engines as it provides more context to the content page.

Consider adding an image caption to images too. An image caption is visible in the browser. An image caption should not repeat the alt text. Copy in the caption should reflect the image contents and complement the text.

Avoid keyword stuffing in alt text and captions.

Overlays

In WCAG 2.2, more guidance was issued on sticky footers, sticky headers and non-modal dialogues WCAG 2.4.11 Focus Not Obscured (Minimum) (Level AA) and WCAG 2.4.12 Focus Not Obscured (Enhanced) (Level AAA).

Dialogues are also considered in SEO; Google says, "interrupting users with intrusive interstitials may frustrate them and erode their trust in your website". It makes it hard for SEO to understand the content, leading to poor performance.

Page Titles

The requirement for page titles is defined in criterion WCAG 2.4.2.

As page titles need to be unique across the site to help users of assistive technology uniquely identify a page, this helps with SEO. Pages with duplicate page titles can be problematic to search engines as they may not be able to distinguish between them.

Page titles in accessibility should be "Page Name - Site Name". The page name should be prioritised over the site name so that users know what page they are on.

Summary

In a world which is increasingly focusing on sustainability and performance, accessibility can not be ignored, as it intersects with and is complementary to sustainable and performance-based development goals.

Useful Links

• Web Content Accessibility Guidelines
• Understanding accessibility requirements for public sector bodies 
• System font, or web-safe font
• Hooked on code: Performance is accessibility 
• Google: SEO Fundamentals, SEO Starter Guide, Heading Tags
• Google: Search Central: Avoid intrusive interstitials and dialogs
• Web AIM: Screen Reader User Survey #9 Results