Alex McGibbon16/03/23

7 min read

Why website sustainability and accessibility go hand-in-hand

Think sustainable website design is just about being greener? There’s so much more to it than that. Central to sustainable web design is the development of websites that are accessible and inclusive. Aspects that throw open the doors of your charity website to a much wider audience.

When mapping out your new website, you need to consider accessibility, sustainability and inclusivity from the outset. By considering all three aspects at every stage, you won’t just develop a more ethical site and organisation, you’ll bring many additional benefits across the board.

To help you explore how sustainable, accessible and inclusive website design can benefit your organisation, we’ll be discussing the following in today’s blog:

• What does website accessibility mean?
• Why plan for an accessible web design?
• What is digital sustainability?
• How can my charity website be sustainable?
• Making your charity website design inclusive
• Inclusive web design case study
• How accessibility, sustainability and inclusivity work together

What does website accessibility mean?

a partially sighted person using a screen reader with a laptop

Website accessibility is the practise of developing web content, tools and design which can be used by everybody, irrespective of ability.

Issues such as slow-loading websites, burying information in downloads and designing complicated online forms can make the UX incredibly difficult for those with disabilities.  So too can unfriendly mobile pages and websites that don’t consider users who rely on assistive technology.

Designing an accessible charity website requires you to think about the needs of your users. Remember, even if you aren’t necessarily targeting an audience with accessibility needs, it doesn’t mean you don’t need to cater for them.

Why plan for an accessible web design?

According to the World Health Organisation (WHO), an estimated 1.3 billion people experience ‘significant disability’ – that’s 1 in 6 people. These include physical, neurological and cognitive disabilities and the figures are expected to increase over the coming years.

Your accessibility strategy should put a focus on developing a site and tools that are easier to navigate and understand. By improving the user experience (UX), interaction will improve between your charity, your users with disabilities and your wider audience as a whole.

We recommend the use of persona creation to support website accessibility design. By identifying a stakeholder who is their champion, your accessibility persona can represent their views and highlight issues for people with disabilities that crop up throughout the charity website project development.

Person in a wheel chair sat at a desk using a computer

Make your charity website more accessible with these simple steps

In addition to making your charity website design more inclusive, a well thought out accessibility strategy can bring many other benefits. You’ll reach a wider audience, see more effective search engine results and demonstrate your charity’s commitment to corporate social responsibility, too.

Ways to improve your website’s accessibility include (but is certainly not limited to):

  • Use descriptive alt text for images and videos for those using screen readers.
  • Include captions and audio descriptions for videos.
  • Make sure your team is familiar with the Web Content Accessibility Guidelines (WCAG).
  • Pay attention to colours and the contrast on your page so words can be clearly read, and consider users with red-green colour blindness.
  • Design simple online forms with straightforward instructions and clearly labelled fields.
  • Include accurate meta descriptions for partially sighted users.
  • Use a sight navigation bar for users to access information quickly and easily.
  • Keep text left-aligned with short clear content for users with dyslexia.

Tip: Create a persona who is partially sighted and relies on assistive technology such as a screen reader to access websites. If you haven’t used a screen reader before, work through your site using the technology to experience first-hand how they will access your content and services.

Remember, your charity website’s accessibility strategy should never be an afterthought. It must be carefully considered and planned into your web development process.

What is digital sustainability?

a plant shoot growing out of a laptop keyboard signifying consideration for the environment

Don’t worry if ‘sustainable web design’ is a relatively new concept to you or your organisation. Surprisingly few realise the correlation between their daily data usage and their carbon footprint.

The truth is, everything you do online results in the emission of a few grams of carbon dioxide. This is due to the energy required to power your devices, the wireless networks you access and the huge data centres and servers required to support the internet and store all of its content.

According to the BBC, the carbon footprint of our electrical devices, the internet and the systems supporting them account for around 3.7% of global greenhouse emissions. That’s not far off the amount produced globally by the airline industry – and they’re expected double by 2025.

The good news is that small everyday changes can make a really big difference. Research carried out by OVO Energy found that each UK adult sending one less ‘thank you’ email a day would save over 16,433 tonnes of carbon a year. That’s the same as 81,1522 flights to Madrid or taking 3,3343 diesel cars off the road.

How can I make my charity website sustainable?

a keyboard with three green keys, labelled eco, bio and recycle

To incorporate sustainability into the build of your site, your best port of call is employing the services of a specialist charity website design agency. At Giant Digital, we’re committed to helping our clients understand the value of building more ethical, sustainable digital platforms.

Here are just some of the ways to make your organisation’s website more sustainable…

  • Create a ‘planet’ stakeholder
  • Declutter your site
  • Minimise file sizes
  • Use lazy loading
  • Set up web caching
  • Streamline your navigation
  • Consider using green energy

Create a ‘planet’ stakeholder

When creating your personas, try to include “The Planet” as a stakeholder. This will help to make sure you’re actively thinking about the impact your website has as you work through the design process.

Declutter your site

During any charity web development project we always recommend carrying out a content audit to identify what to keep, what to combine and what to ‘kill’. A clean, minimalist site isn’t just good for UX, it uses less energy to navigate, thus making your charity website more sustainable.

Minimise file sizes

A picture paints a thousand words, right? That may be so, but all those high-res images and videos could be a hindrance. As they take longer to load, they’ll use up more energy than their low-res equivalents. The slow loading speed also makes your site less accessible and inclusive. So compress images and reduce resolution where possible, embed videos and turn off autoplay – you’ll give your site an instant sustainability boost.

Use lazy loading

Lazy loading is a strategy which sees your site only loading media such as images and videos as and when it’s needed. For instance, anything above the fold will load straight away. As the user scrolls down, the rest will load as it appears.

Not only will lazy loading reduce energy consumption on your site, your loading speed will be significantly faster which ticks boxes for SEO and inclusivity, too.

Set up web caching

Web caching means downloading and saving page elements that are common to multiple pages across your site. These might include images, JavaScript files, CSS and even headers and footers.

By storing them closer to the user, they can retrieve the data from the cache location each time they return to your site, rather than querying the web server again. This will make a real difference to your site performance, minimise the transfer of data and make for a more sustainable website overall.

Streamline your navigation

If your users have to spend a long time navigating around your site, they’ll consume more energy and potentially lose interest. By building in a site search bar, you can take users directly to the information they want.

Try using your persona creations to test the simplicity of your site navigation for different abilities and technologies such as screen readers.

Consider green energy

Another way to reduce your website’s carbon footprint it to choose a hosting service that uses renewable energy such as wind or solar, and is committed to maintaining carbon neutrality.

Digital sustainability initiatives are a huge driver for certain eco-conscious audiences. Of course, your organisation’s reduced digital footprint won’t just satisfy an increasingly ethical audience base, it will make a real difference to our planet. 

Developing an inclusive charity website

an adult and young girl with disabilities looking at a computer screen, laughing

Simple steps to a more inclusive web design

In addition to the accessibility points listed earlier in this piece, there are some steps you can take straight away to help improve your charity website inclusivity.

Test device types and internet speed

Walk through your website as each of your personas to check how they will access it from different device types: mobile, tablet, desktop. Think about your users who may not be in an area with fast internet connections; can you deliver a “light” version of your site for slow/remote internet connections?

Consider reading age

Check your reading age is appropriate to your audience, and watch out for ‘internal language’. A website littered with jargon can be exclusive and off putting for users unfamiliar with the terms. Read your content backwards paragraph by paragraph and see if it makes sense without the content that’s gone before it – if not, try again.

Select diverse imagery and testimonials

Representation in your imagery and content is important, not forgetting intersectionality. Start by updating your stock photos and videos to include more diverse media. Next, include testimonials and case studies that demonstrate your successes with a w576ide range of audiences.

Support keyboard navigation

Some people use keyboard navigation to work through websites rather than the mouse. This could simply be due to preference or circumstance, or because they have a motor disability, a repetitive strain injury or are visually-impaired.

Keyboard-only users have to navigate using the tab key and it can be a pain-staking process if their needs haven’t been considered. By researching their needs and testing your website from their perspective, you can make simple changes that will be greatly appreciated by some of your users.

Inclusive web design case study

African ranger looking across nature reserve with binoculars

A wildlife protection charity in Africa came to Giant Digital needing a smart new website that would represent their brand. The objective was to present their charity as a worthy cause that would appeal to donors and supporters in the western world.

However, we had to consider that most of the charity’s team responsible for providing content for the site were locals in remote locations in Africa. Internet connection there can be relatively poor with many relying on 3G on their phones. In addition, we had to consider the guidance provided that many stakeholders would be lacking in IT and English language skills.

We created a simple inclusive design and structure that was accessible for both team members and donors. The website had a low page weight that would load quickly over low bandwidth connections. We included imagery for impact on the key pages, but kept other media limited elsewhere.

This not only made the website user-friendly, but also limited the environmental impact of the website. An added bonus for a charity focused on protecting our natural world.

You can read more of our case studies here to see how we have helped other charitable organisations with their digital goals.

How accessibility, sustainability and inclusivity intertwine

As you work to implement accessibility, sustainability and inclusivity into your charity website project, you will soon notice how these aspects all intertwine with each other:

1. The steps you take to create a sustainable website design will favour minimalism. This is because having lots of data-heavy videos, images and text-filled pages uses more energy to load up. By keeping things clean and simple, you make the site speed much quicker.

2. Decluttering makes your site more accessible, as it is easier for someone with an impairment to navigate and understand. It also makes it easier for someone reliant on screen readers or other assistive technology to access your content.

3. A minimalist, decluttered site also makes your website more attainable and inclusivefor those using older technology/mobiles etc., thanks to the faster loading time.

    Need help with your organisation’s website design?

    If you’d like a more sustainable, inclusive and accessible website design experience for your users, call Giant Digital on 0208 152 4572 or send us your details and we’ll get back to you.

    About the author

    Alex McGibbon

    Solutions Architect at Giant Digital

    LinkedIn

    Alex is Product and Innovation lead at Giant Digital. Having spent many years designing charity websites, Alex is a real advocate for user-led design in the creation of websites, donation platforms and bespoke applications. He leads the UX/UI research and development, ensuring that charities balance their own organisational needs with those of their target audience, to maximise engagement and deliver results.

    Discuss your next project with us