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 to design your website with a minimum font size of 16px. This is considerd to be the web standard of what 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. Essentially, 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:
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 fails 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’s 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 codes. 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. 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 project. 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. Often, due to lack of knowledge, time and budget, it can 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!
