Demystifying digital: Accessibility on the web

Accessibility has become a bit of a buzz-word. This blog aims to break some of the mystery down and hopefully give you a clearer picture of what is accessibility on the web.
Tags: Accessibility, Website

Share this post!

Accessibility has become a bit of a buzz-word. Everyone says you need accessibility, but starting off can be confusing with so much to take into consideration. This blog aims to break some of the mystery down and hopefully give you a clearer picture of what is accessibility on the web.

Accessibility vs Inclusivity

In your journey to learn more about accessibility, you can come across many terms for the subject. Some call it accessibility, some call it inclusivity, you might even see it referred to A11y (the 11 stands for the 11 letters in between the a and y). Emily wrote a great blog on the differences between accessibility and inclusivity but for a brief explanation:

  • Accessibility is designing specifically to make adjustments for specific needs.
  • Inclusivity is designing for the wider needs, and trying to cater to as many different people as possible.

An example of Accessibility adjustments on the web would be adding on a plugin to change the text size changes. An example of Inclusivity is design your website with a minimum font size of 16px, as this is the web standard, is large enough for the majority of people to read. It good to make sure you have both, not just one or the other. Your website should be as inclusive as it can be, before you implement accessibility.

Semantic HTML

Semantic HTML (HyperText Markup Language – It’s the skeleton of a websites front-end) sounds technical, but it’s very self explanatory once you know what it means. Semantic HTML describes the coded elements with what they mean. Here is the full of the documentation by w3schools.com, but to help show the difference, we’ll run through a common mistake we find on websites.

On a webpage, the first title on a page is often referred to as the H1 of a page, meaning “Heading 1”. Some website from a code level have it displayed as: <div class=”h1″> Hello world </div>. Visually this looks fine, but a screenreader won’t recognise that this is the title of the page you’re on, since it doesn’t read out the classes as these tend to be aesthetic links to the css files (which makes your website looks pretty). However if we display the title as <h1> Hello World </h1> , a screenreader knows this is the first title of the page, and also recognises the hierarchy of the other titles, so h1, h2, h3, h4, h5 and h6. With modern page builders, there is usually a section to assign these semantic element, so be sure to check the documentation, or ask you tech peeps to take a look!

Colour Contrast

A common issue we see with digital, is contrast issues. The WCAG Guidelines for colour contrast is a ratio of 4.5:1 for smaller text, and 3:1 for larger text. WebAIM have a colour contrast checker where you pop in the hex codes* of the foreground colour and the background colour, and it tells you whether it passes or fail the guidelines.

Choosing the right contrast is important for many scenarios. People with vision impairment might struggle to read what you’ve written if the contrast is too low. People struggle with eye strain and migraine’s might have a hard time if the colour contrast is too high. It is a bit of a balancing act, and there are some things you can do to help get the balance right.

For example, the black coloured text on this website isn’t actually a “true” black. It a more purple/blue toned black (It’s #2D193C) . The contrast is still high, but the intensity of the black is softened by the introduction of the blue tones.

* Hex codes are the 6 number codes that relate to the colour in digital form. If your charity predominantly does print work, you might need to convert from RGB or CYMK to hex code – convertacolour.com is a super easy tool to use!

Alternative text 

When talking about accessibility, you might hear the phrase “alt text” thrown around. This simply refers to “alternative text”, which describes what is in the image. The UK Government have a good post on writing meaningful and relevant alt text for your images, and it can be a bit of a learning curve to make meaningful and relevant alternative text.

The best way to know if an image needs alternative text, is to imagine the content or webpage without that image. Could a user navigate and understand the information, without it. If the webpage doesn’t need it, and it’s purely aesthetic, then it doesn’t need alternative text. You can even give it an attribute to tell screen readers that it’s a decorative image and it can skip the element. If the image provides context or holds some writing or information, then you know to add in alternative text so the user isn’t missing out on information.

Getting started

Accessibility and inclusivity is often an after thought in many projects, but it is important to make sure you keep it in mind throughout the whole process of any projects. It is also important to keep in mind that any progress with inclusive and accessibility design is good. In a perfect world, every site would be 100% accessible and inclusive, but due to lack of knowledge, time and budget, it can often be ignored or not done to it’s full potential.

A few months ago, we made a small starter guide on web accessibility, and how to make a start with small tweaks to your website. By addressing these issues, you’re website will already be “better” than 96.4% of the top 1 million websites that return accessibility issues!

More journal posts

Sharing Insights: Charity Website Audits

Date: 10/05/2024

At a time where everyone seems to be making up new words for the sake of it, suggesting that charities should use simple language might sound almost... rebellious....

Demystifying design: CMYK or RGB? Understanding colour modes

Date: 1/04/2024

In the world of impactful branding, websites, and campaigns, colour plays a pivotal role in conveying emotions and messages. When collaborating with a design agency for your charity or organisation, having a grasp of colour modes can be very handy....

Your website is your home, give it a spring clean

Date: 4/03/2024

As the transition from winter to spring begins, most of us feel inclined to give the house a good clean to reset ourselves and our homes. When it comes to your website it's entitled to its own spring clean too....

The Bear Cave will be closed between December 23rd to January 1st

Merry Christmas and a Happy New Year!