Accessibility matters! Here's why your website needs it

What is website accessibility?

Website accessibility is the measure by which a website has been developed so that it can be used by everyone.  A website with a high-level of accessibility, has removed all barriers preventing users from accessing it.

In this article we will learn why you must take your websites accessibility seriously, the issues surrounding poor website accessibility and what you can do to improve your website so that it works better, for more of your users.

Access to communication, in its widest sense, is access to knowledge. We must not be pitied, nor reminded we are vulnerable. We must be treated as equals and communication is the way we can bring this about.

Louis Braille

The pain of poor accessibility

If your website has poor accessibility, you are reducing the size of your audience because those who cannot access it will not buy from you or donate to your charity.

This is because users can't acomplish what they need.  It could be that they cannot navigate to the pages they want to view or even assimilate the information you are trying to communicate to them.  Depending on a users goal, they need a clear journey through your sites pages to achieve that.

So with your reduced audience, poor accessibility will affect your important website conversions, which means you are wasting marketing budget too.  Users will get frustrated and leave, leading to a high bounce rate.

Brand, reputation and potential legal issues

Poor accessibility will also erode trust in your brand and could affect your reputation.  It could be seen as discriminating against users or not supporting those who really need it. This is bad for any business, especially those who are particularly seeking to build a reputation for inclusion.

Furthermore, this won't help encourage investment in your business or donations to your charity from businesses who will want to see more effort made to be accessible for all.

By not checking your websites' accessibility, you could actually be breaking the law! 
Public sector bodies in the UK have a legal obligaton to ensure they are meeting accessibility requirements.

UK websites should be designed and coded to meet WCAG's web accessibility standards, often referred to as POUR:

• Perceivable:
  Your website content should be accessible and readable for all users, including those with vision impairments, hearing impairments, or other disabilities.
• Operable:
  Website content should be responsive and easy to navigate for all users, such as enabling navigation through keyboard-only commands instead of relying on a mouse.
• Understandable:
  Website interfaces and information should be well-organised, easy to use, predictable to navigate, and written in language that is clear and understandable for all users.
• Robust:
  Websites should be compatible with a wide range of technologies, including assistive tools commonly used by individuals with disabilities.

The two key pieces of UK legislation regarding website accessbility are:

• The Equality Act (2010)
• The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations (2018)

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

Tim Berners-Lee

Accessibility considerations for your website

So, we know we need to consider those with visual, auditory, physical, and cognitive impairments.  In order to accomodate these users, a website must be designed and built to a high standard and then thoroughly tested on a range of different devices and connection speeds.

Here are some key users we need to focus on when improving your websites accessibility:

• People with deafness and hearing loss
• Those with cognitive disabilities, affecting thought, learning, memory and decision making
• Temporary or situational impairments
• Blindness and low vision
• Speech disabilities
• Limited movement
• Neurological limitations

What accessibility measures should we take?

Clearly, we need to think about accessibility seriously.  Accessibility is not all about technical issues, it starts with the design of your website. 

Typography and text

We need to ensure that we choose nice typography that is easy to read at all sizes.  Although fancy fonts can be tempting, if they are used for important headings or buttons and are hard to read, we may want to choose something simpler.

Lines of text with too many words become hard to read.  This happens in very wide columns, so consider making areas with paragraphs of text narrower than the rest of the site:

Text size is important at all screen sizes, ensure it is not too small or too large on different devices.  Line height is also important for helping to make paragraphs of text more readable.  However, too much of a line height and it can be detrimental to the legibility of a web page.

Code semantics

Semantics is not the same as syntax.  Semantics is about the meaning of code.  In HTML, we convey a meaning not only to the users browser, but also to the users themselves.  This means, we need to use the correct HTML tags, depending on the meaning of a section of code in our web page.

Here are HTML's semantic tags - i.e. the tags we use to give more meaning to the code:

<article>,  <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>

So, for example we will use the <header> tag for the top part of our page that contains the site logo and navigation.  Then for the navigation we can use the <nav> tag etc.

We also use a heading one tag (<h1>) for the main heading of the page, which describes what the page is about.  We then use <h2> next and if we have sub headings under <h2>, we use <h3> tags:

<section>
<h1>Our main heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien eros, eleifend vel risus quis, pellentesque blandit neque. Vivamus pellentesque quam at lorem ultrices lobortis. Maecenas in nunc pulvinar, imperdiet elit eget, ultrices neque. Aenean vitae convallis est. Fusce eu sodales libero, tincidunt porttitor neque.</p>
</section>

<section>
<h2>Our second heading</h2>
<p>In eu gravida metus. Nunc fermentum iaculis tincidunt. Mauris arcu diam, volutpat vitae dolor eu, blandit hendrerit justo. Etiam est massa, molestie id maximus eu, gravida eget velit.</p>
<h3>A sub heading</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec scelerisque venenatis augue, quis scelerisque ante egestas ut. Morbi lacus diam, tempus ac iaculis nec, ornare sit amet nunc.</p>
</section>

Notice how we have also split our page into sections, to make it clearer that a page is made of district sections rather than just one rambling document.

Links and navigation

Navigation needs to that sense for users.  Use link text that is widely understood, so users know what to expect before they click through to a page. Navigation shouldn't be inhibited in any way.  Links should be easy to read, and their colour should offer good contrast with the background.

Don't try to reinvent the wheel with navigation, it's very important that users can understand and interact effortlessly with your websites menus to navigate to the pages they want to read.

For touch devices, we need to ensure links and buttons are large enough (and set apart far enough from other links and buttons) to be activated accurately when users touch the screen with their finger.  The guidance from Google is that touch targets should be at least 48 dp x 48 dp.  A "dp or dip" is a Density-independent Pixel.  These units are relative to a 160dpi screen. The ratio of dp to pixel will change depending on screen density.

Images

Images should be relevant to the page content and informative.  There should be a "text alternative" to the image, using the alt attribute like this:

<img src="balloon.gif" alt="Hot air balloon">

If an image just adds style to a page, a null alt attribute can be added instead:

<img src="watermark.png" alt="">

For more complex images such as charts or infographics, use the HTML5 elements <figure> and <figcaption> to link the image with it's caption in a semantic way:

<figure>
  <img src="our-garden.jpg" alt="Our garden" style="width:100%">
  <figcaption>Fig.1 - Our garden at home, showing our array of perennials.</figcaption>
</figure>

The file sizes of images should be kept small, so they load quickly on any device, even on slow connections.

There must always be a strong contrast between text and background images. This means text remains easy to read. The WCAG guidelines suggest minimum contrast ratios to aim for.

Modals and dialogs

Modals and dialogs (sometimes called popups), are useful for presenting a larger version of an image or a form for users to complete.

Modals and dialogs should have a close button and allow users to click "off" the modal to close it.  In addition, allowing the escape (ESC) key to close the modal helps make it more accessible.  Modals need to prevent users from interacting with what is behind it.  Done badly, modals can be an accessibility nightmare!

ARIA attributes should also be used to assocate modals with its title and description.  Also pay attention to keyboard tabbing, so that the proper tab sequence is enabled.

Using a framework such as Bootstrap for modals (and other components), helps developers to build highly-accessible websites.

Forms

Forms are highly-interative elements, so accessibility is incredibly important.  Common accessibility issues include broken labels, poor error information, automatic timeouts and related form fields not put into groups.

Field types

Use the correct form field HTML input types for improved semantics.  For example, for a phone number, use the phone type like this:

<input type="phone" name="phone_number" id="phoneNumber">

Use for and name

Use "for" on form labels and "name" on  inputs to match them up:

<label for="first_name">First name: </label>
<input type="text" name="first_name" id="firstName">

Grouping fields using <fieldset> and <legend>

For improved semantics/accessibility, group form sections or questions with multiple options (such as a group of checkboxes) using the fieldset and legend tags:

<fieldset>
<legend>Marketing Preferences</legend>
  <div>
    <input type="checkbox" name="format" id="email" value="email">
    <label for="email">Email</label>
  </div>
  <div>
    <input type="checkbox" name="format" id="post" value="post">
    <label for="post">Post</label>
  </div>
  […]
</fieldset>

Required fields

A required field is a field in a form which a user must complete, even if it is just a single checkbox.  These need to be defined correctly in the HTML.  We add the attribute required to do this, but should also add the aria-required=”true” attribute too:

<input type="text" required aria-required="true" />

Provide helpful error messages

Mistakes in user input are not necessarily easy to spot.  When a user enters a value or forgets to complete something, we need to tell them what they need to do. This is all about usability as well as accessibility.

Here's an example of bad and good error messages, pretty easy to see how helpful the good one is compared to the bad!

Focus state

When a field is clicked or tapped, it becomes focused.  When the user clicks or taps elsewhere, it becomes un-focused (or blurred).  When focused, the user can type into that field or select an item in a select/dropdown field or check/uncheck a checkbox etc.

Therefore the focus state is very important, so it should be highlighted in some way.  The most typical and predicatable way is to apply a different colour border or outline to designate that that field is the one in focus.

Tabbing

Keyboard-only users will reply on the tab key to go through the form fields one by one.  When they press tab, the first field should be focused and they can then enter a value.  They'll then continue to press tab, going through each field in turn.  So your form needs to allow the user to tab through each field in turn.

Even if a user has a mouse, trackpad or touchscreen, it is often easier to tab through the form.

The best way to do this, is to mark-up your web page in the correct source order, so as not to confuse browsers and screen readers.  There is a tabindex attribute, but it is not intended for setting the order in which the user tabs through form fields.  Whilst you can use values greater than 0, it should be discouraged.

Here are the tabindex values and what they do:

tabindex="0"   // The element is focusable in sequential keyboard navigation, after elements with a positive tabindex value
tabindex="-1"  // Use on elements that should not be navigated to using the Tab key

Date fields

For dates, let the user know how to input them, e.g. with DD/MM/YYYY:

<label for="date_of_birth">Date of Birth (DD/MM/YYYY): </label>
<input type="text" name="date_of_birth" id="dateOfBirth">

We now have a more advanced date input which works like this:

<input type="date" id="start" name="trip-start" value="2010-06-25" min="1900-01-01" max="2024-12-31" />

This allows the user to choose a date using a dropdown, calender selector:

File inputs

These file inputs allow users to upload a file.  This can be useful, for example on a job application form, so the user can attach their CV.  However, we should optimise their accessibility as well. 

To do this, we can add a descriptive label showing which file types are allowed, e.g. .doc, .docx, .pdf etc. We also need to show a max file size for the user, so they know in advance.

Source: https://design-system.service.gov.uk/components/file-upload/

Prevent timeouts

Give users enough time to complete the form. Just because a developer can quickly test it in a few seconds doesn't mean a user won't take five, ten minutes, or even leave it and come back after an hour.

Google's RECAPTCHA v3 has a two minute timeout.  After this time, when a user clicks submit they will receive a cryptic message about "captcha timeout", which is not very helpful.

We can extend this using a setInterval method in our JavaScript code like this:

function getReCaptcha(){
    grecaptcha.ready(function() {
       ...
     });
 }

 getReCaptcha();  // This is the initial call
 setInterval(function(){getReCaptcha();}, 110000);

Break up long forms into section

As mentioned above, we can break up forms using fieldsets and legends:

<fieldset>
  <legend>Section one</legend>
   ...
</fieldset>
<fieldset>
  <legend>Section one</legend>
   ...
</fieldset>

We can then use something like slick slider to create a form with steps that the user can go through:

We can use the progress element for the progress bar at the bottom, so the user know how far through the form they are:

<progress max="6" value="1">(Step 1 of 6)</progress>

Styling is handled in CSS like this:

/* Microsoft IE */
progress {
  color: #ff0000;
}

/* Apple Safari and Google Chrome */
progress::-webkit-progress-bar {
    background-color: #fff;
}
progress::-webkit-progress-value {
    background-color: #ff0000;
}

/* Mozilla Firefox */
progress::-moz-progress-bar {
    background-color: #ff0000;
}

Source code order

Your website forms "source order" should match the displayed order.  This means, all the fields are in the correct order in the HTML.  This helps screen readers and keyboard-only users, so that when they tab through the form, it will go through each field in the correct order, as per the forms source code.

Videos

Add captions (subtitles)

Videos need to include captions for deaf users, or users who simply don't have access to speakers or headphones or who don't want to use them at the time. Captions need to use a font that is large enough, and very clear on screen.

Adding captions can be done in video editing software, or by using an app that supports adding an SRT file.  Or, if you add your videos to a social media platform like YouTube, it will automatically add the captions for you, and the YouTube player will add the button to turn them on and off.

It's also very easy to add captions in Tiktok and in Instagram too.  If you are adding your own captions, make sure you choose a font that is easy to read at small screen sizes and in a colour that provides adequate contrast with the background on the video.

Clear video controls

Videos need clear controls, that are easy to use.  Users need to be able to easily play and pause the video. They need to be able to unmute/mute the video easily and adjust the volume via their keyboard and mouse or touch device.  Touch can be a little more challenging, when video controls are quite small and clustered along the bottom of the video.

Video controls should allow turning captions on and off, and allow you to go forward and backwards within the videos timeline.

Consider using a well-known video player to embed video from YouTube.  If embedding HTML5 videos (using MP4 and WEMB files), it can be a lot of work to code a good, highly-accessible video player from scratch .

Video description

Provide a description so users who can't see the video know what it is about.  This is especially helpful for those using screen readers, so they don't miss out on an important content piece within the page.

<div role="tooltip" aria-label="Your accessible video description goes here">
   <video />
</div>

Add a transcript

A transcript is a written version of a videos audio, which also allows you to create captions.    To create a transcript you can use automatic speech recognition technology or human transcriptionists. 

You can add an Audio description (AD), which is an additional audio commentary that explains what's happening in the video.  There is some great information on the W3.org site here: https://www.w3.org/WAI/media/av/description/

Video transcripts can also improve your SEO. Search engines can't index the content of a video, so transcripts provide valuable text that can be indexed and ranked. A transcript makes your video more searchable across the web and within your website or archive.

Some TVs have audio description, so enable that on your remote and you'll see how it works, it basically reads out everything that is happening.  This is especially useful for graphics and graphs that show a lot of information on screen.

Here is a good guide on how to add audio descriptions in YouTube.

Sign language version

For users who are deaf or have certain cognitive disabilities, sign language might be their first language.  If your audience is likely to contain those with hearing loss, then consider a sign language version of your video.  This is particularly important if your video is communicating essential information to your users.

Make videos available in all browsers

Different web browsers have slightly different compatibility with video files.  If you are uploading video directly to your website, make sure you add both WebM and MP4 versions so all web browsers can play the video.

Then using the HTML5 video tag, you can specify each format in the source child tags:

<video width="640" height="480" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Check browser support for the main video formats. We tend to upload as MP4 and WebM formats which is compatible with most browsers, so videos work for 99%+ of users.

Epilepsy

Videos with flashing or flickering lights and animated patterns can trigger seizures in people with photosenstive epilepsy.  With this in mind, consider warning users in advance or at the beginning on the video, like how some TV programmes and video games do.

Your warning could say something very simple like: "Warning: This video contains flashing content which may affect viewers with photosenstive epilepsy, or other photo sensitivities."​​​​​​​

Video hosting

If your website has quite high traffic and you add a lot of video, it may be worth hosting video on an external platform like Vimeo or YouTube or using a streaming service like bunny.net.

This will ensure video is streamed smoothly without any downtime and minimising any buffering that can occur.

What else can we do to ensure great accessibility?

Check the WCAG Guidelines

There is a wealth of information and guidance available in the WCAG guidelines, so that is a great place to go for further reading.  WCAG 2.2 AA is the new accessibility standard for all UK Government public sector websites and mobile apps.

Accessibility testing tools

Here are some tools I have used to help test the accessibility of our client websites:

Wave
To check your websites code, you can use the WAVE Plugin for Google Chrome, available from the Chrome store: https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

axe DevTools
Another extension for Google Chrome, which lets you scan your page for accessibility issues:
https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

Lambdatest
We use Lambdatest to test all new website project and to test large changes on existing sites.  It contains a wide array of user devices to test on from phones, to tablets and desktop computers.

We actually, hardly scratch the surface, Lambdatest also includes automated testing and cross browser checking and KaneAI, the "World’s first end to end software testing agent":
https://www.lambdatest.com/

More about ARIA labels/attributes

We've already touched on ARIA labels in this article, but it's worth diving a little deeper. 

ARIA labels are special attributes that provide more information about HTML elements to screen readers and other assistive technologies. This helps users with disabilities to understand the web page and interact with it.

ARIA labels provide information about the role of an element in the page.  For example, buttons, checkboxes, modals, tabs etc.

Examples of ARIA labels:

Here on a button, we add an ARIA label of Close, so screenreaders can understand what it does:

<button aria-label="Close" onclick="myDialog.close()">
  ...
</button>

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

A checkbox example:

<label id="myLabel" for="savePreferences" aria-label="For check box">Save my preferences</label>
<input type="checkbox" id="savePreferences" name="savePreferences" aria-labelledby="myLabel" tabindex="0" />

If your checkbox HTML is semantically different to what we would expect, i.e. it uses a span instead of an input we can improve it's accessibility using ARIA labels like this:

<span  role="checkbox"  id="savePreferences"  aria-checked="false"  tabindex="0"  aria-labelledby="myLabel"></span>
<label id="myLabel">Subscribe to the newsletter</label>

For modals, we need to add aria-labelledby="[your ID]", aria-describedby="[your ID]" and aria-modal=true. Here is an example:

<div id="overlay" class="no-scroll">
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="dialog_label"
    aria-describedby="dialog_desc">
    <h2 id="dialog_label">Please Confirm</h2>
    <div id="dialog_desc">
      <p>Are you sure you want to delete this page?</p>
    </div>
    <button type="button" onclick="closeDialog(this)">
      No (Close this popup)
    </button>
    <button type="button" onclick="deletePage(this)">
      Yes (Delete the page)
    </button>
  </div>
</div>

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal

Accessibility toolbars

There are so many considerations and areas to optimise accessibility, that several companies have launched accessibility toolbars that you can easily add to your site to immediately improve accessibility.

These also include controls to increase text size, increase contrast etc.  Although these can be coded by your developer and built into the site, these ready-made toolbars offer a ready-made solution:

Access Angel​​​​​​
Learn about it here: https://www.myaccessangel.com/

Recite
Learn about it here: ​​​​​​​https://reciteme.com/product/assistive-toolbar/

EqualWeb
Learn about it here: https://www.equalweb.com/

​​​​​​​

Testing connection speed

An important consideration is the users connection speed, but how can we test slower speeds from our super-fibre connection?

Fortunately, Chrome provides a method in it's DevTools.  We can actually simulate slower connections, such as a 3G connection straight from our usual web browser.

To do this:

1. Launch DevTools: Press F12 on Windows or Linux, or Option + ⌘ + J on macOS
    
2. Click the Network tab in DevTools:
   
    
3. Where it says "No throttling", click and a menu drops down.  You can now choose the connection speed you want:
   
    
4. Reload the page with F5 or by clicking to load it at the new "throttled" connection speed
    
5. To go back to your usual speed, make sure DevTools is open and you'll see an exclamation mark next to Network, signalling that there is a throttled connection speed set:
   
    
6. Simply click your current connection speed (3G in this case) and choose "No throttling":
   

How great website accessibility can benefit your business or charity

The benefits to your business or charity from operating a more accessible, inclusive website are clear.  By properly including your entire audience, you stand to make more sales /  donations.

Whatsmore, you are running a more ethical organisation, with more inclusive pratices, which is likely to impress your stakeholders more, leading to more interest, investment, volunteers, staff etc.

You will be operating an organisation that clearly obeys legislation, being fully compliant putting you safely on the right side of the law. 

What's more, it's just the right thing to do!

Join the discussion

Want to have your say on this topic? Start by posting your comment below...