Web

5 Ways to Make Your Site More Accessible

Avatar for Aaron Sander

Aaron Sander
Web Designer

Image on standard seoplus+ blue triangle background, with desktop illustration in the foreground. On the desktop are icons representing 5 areas of website accessibility.
Image on standard seoplus+ blue triangle background, with desktop illustration in the foreground. On the desktop are icons representing 5 areas of website accessibility.

Accessibility is an essential consideration for developers and organizations who want to create high-quality websites and web tools that don’t exclude anyone from using their products and services. A strong focus on accessible design will improve both the overall user experience and satisfaction for users of all ages, in a variety of situations, and across different platforms and devices.

Here are five ways you can make your site more accessible:

1) Ensure that all images have a descriptive, unique ALT text:

Firstly, what is ALT text? ALT text stands for Alternative Text and is the key to understanding what image content is on a page if you cannot see the images. Sometimes this may appear when an image resource fails to load, or if the original image file is unlinked. Your ALT text does not have to be very detailed – it simply acts as a short, simple, description of an image. It should be descriptive, but not easily mistaken for another photo on the site i.e. no repetitive ALT texts).

Some common approaches to creating ALT text might be to isolate specific features of the image; who or what is in the foreground, is an action being performed, and is there essential information in the background?

Use the following image as an example:

Woman sitting at the office table working on a laptop with a group of colleagues in the background
  • In the foreground, the woman is sitting at a desk, and she is working on a laptop
  • In the background, four colleagues are chatting.

A few words is usually enough, though sometimes a complete sentence is necessary. Remember, screen readers may cut off ALT text at around 125 characters; so it is suggested to stay within that limit. Unnecessary information like what the people in the background of the shot are wearing or doing can be excluded. You want to give just enough information to describe the image but not distract from the actual content on the site. 

Tip: If the image is from a stock photo website, you can usually use the title with a bit of editing as the ALT text

Bad ALT Text – Too Short
Woman sitting at a desk with a laptop
Bad ALT Text – Too Descriptive
Woman sitting at an office table with a laptop, smiling at the camera with her fingers on the keys. In the background, four colleagues are talking, one is holding a folder and another is holding a coffee…
Good ALT Text
Woman sitting at the office table working on a laptop with a group of colleagues in the background

2) Colours have enough contrast

Following the WCAG 2.1 (Web Content Accessibility Guidelines), elements must have a contrast of at least 4.5 : 1 to comply with Level AA and 7 : 1 for Level AAA.

One of the easiest ways to test for colour contrast is with an online tool such as Colour Contrast Checker. The Colour Contrast Checker tool looks for the difference between the tonal values, perceived “luminance,” or brightness of the colours selected. The value of a colour is the lightness or darkness of a colour and defines a colour in terms of how close it is to white or black. The further away on the tonal spectrum two colours are, the more contrast there is. For example, white on black has the highest contrast ratio (21 : 1), and white on white has the lowest (1 : 1), but as you add colours into the mix, they move closer to the mid-range of the tonal spectrum.

Screenshot of different tonal colours and examples of button contrast ratios

There are a few exceptions to the WCAG 2.1  level AA and level AAA contrast ratio, such as:

  • Large Text: Text larger than 20px must have a contrast ratio of at least 3:1
  • Incidental: Text that is part of an inactive user interface component, that is pure decoration, that is not visible to anyone, or that is part of a picture that contains significant other visual content, has no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

3) Background images and text should have enough contrast when used together

When using text over an image, which is commonly seen in hero sections, it is crucial to ensure there is enough contrast between the various colours in the images and the colours of your text.

Here are a few ways to ensure the colour contrast is readable:

Include an overlay

Adding an overlay to your hero image can help to either darken or lighten the image and add contrast, which is one of the most commonly used solutions on the web. With this option, you must confirm that the overlay has enough opacity to provide the correct contrast. For example, the following hero section would be considered inaccessible if we were to only add the black or white text over the image.

Example of text overlaid on a background image that does not meet accessibility standards.

Adding an overlay of your desired colour will help even out the various colours in the image, giving more contrast to the text above. The most common implementation is using a dark overlay with light-coloured text or vice versa. It is generally the easiest approach to getting the correct contrast ratio without sacrificing the quality of the image with too heavy of an overlay. 

Examples of overlay text that do and do not pass accessibility standards.

With this implementation, it does become more challenging to use colours that aren’t pure black or white. As the tone of a colour gets closer to a mid-range grey, it will become more difficult to have an overlay that passes accessibility requirements once the opacity is lowered. In the example below, the overlay has to be far more opaque than the example above to pass level AA and even then, it doesn’t pass level AAA requirements.

Example of a blue overlay that does and does not meet accessibility standards.

The key to this implementation is ensuring that your overlay colour and text colour pass with a high contrast ratio; making the background colour translucent will lower the contrast ratio between the two colours. Choosing highly saturated colours on opposite sides of the tonal spectrum will make this the ideal solution.

When confirming that the image, overlay and text has enough contrast, l always use Contrast, a Figma plugin with Smart Sample abilities. This feature samples the colours from background images and gradients behind a selected text layer and outputs a pass or a fail depending on how many of the different areas were compliant. Each example above displays this feature.

Opaque to transparent gradient

Using a gradient that starts with a solid colour behind your text and then fades out to show the image is a great way to avoid the fussiness of the image colours interacting with the overlay and text colours. For this implementation, you need to ensure the main gradient colour is accessible with your text and that at different screen sizes, the solid part of the gradient remains entirely underneath the text to remain readable.

Example of a gradient background on a hero image with text that does meet accessibility standards

Colour blocking

Colour blocking is adding an opaque or translucent background to help contrast the background image and the text. This is the easiest way to ensure proper contrast between the two elements. If you use a completely opaque background colour here, it will provide more flexibility in using colours other than black or white since you won’t need to worry about the interaction between the background colour transparency, the image, and the text.

Example of an overlay background on a hero image with text that does meet accessibility standards

4) Aria-labels on buttons / links / form fields

Aria-labels (Accessible Rich Internet Applications) are tags in your website’s code used to describe the purpose of an element when there is no visible label. They can also be used to give more context for the action that will be taken.

For example, the X used to close a popup window would require the aria-label of “Close” to give screen reader users more context over what the button does.

An aria-label should be concise and explain an action in as few words as possible.

For example, you have a slider with arrows, the next slide arrow doesn’t need to say “Arrow to the Next slide”, it can simply be labelled as “Next” as other context clues will tell the user that they are on a slider. For some items, the aria-label does need to be a little more descriptive. For instance, a social icon that links to a company’s Twitter could be labelled as “Link to our Twitter.”

Items that need aria-labels

  • Close buttons with only an X visible to the viewer as text
  • Buttons that are just icons, i.e. sliders pagination or arrows, next pages on blogs, hamburger menu icons, social icons
  • Input fields that don’t have visible titles

Items that do not need aria-labels

  • Buttons with descriptive text like “Click here to go to the home page “
  • Links that are text
  • If the element itself already has text content
  • Input fields that contain titles and labels
Visual illustration of a close button and next label on a popup.

5) accessiBe

What if you don’t have the ability to make these adjustments to your site? Solutions like accessiBe can resolve accessibility issues by simply installing a widget on your site. While it comes with a cost, the automated web accessibility solution can fix critical issues across your entire site with little effort from you.

When the widget is added to a website, it applies JavaScript to adjust the frontend interface and AI to modify the background code of a site’s contents to make it accessible.

The accessWidget’s interface is a session-based design and UI adjustment tool, allowing users to change colours and contrasts, stop animations, and highlight key headings, links and navigations. The accessWidget’s machine learning processes run in the background and analyze the code to add alt tags to images, aria-labels to inputs and buttons or give users the ability to use a keyboard to reach any page with a single keyboard selection.

accessibe settings | Award-Winning Digital Marketing Agency

Want to test accessiBe for free for 7-days on your website? Try it out here.

Want to learn more about Web Accessibility? Read our blog on the importance of web accessibility.

Helpful resources

  • Colour Contrast Checker: Compare the contrast ratio of 2 colours, background and foreground, within a webpage against level 2 of the Web Content Accessibility Guidelines (WCAG).
  • The A11Y Project Accessibility Checklist: The A11Y Project is a community-driven effort to make digital accessibility easier, their fully comprehensive checklist helps you Q/A your projects and sites for possible improvements.
Avatar for Aaron Sander

Aaron Sander

Aaron Sander is a web designer and developer at seoplus+. Since 2020, he has been helping clients with both design and development needs. His main focus has been educating people about web accessibility and making the web more accessible.

View latest posts
Posted in Web

Want More Sales? Get 3 Tips From a Web Expert!

Our Web specialist will review your website and provide actionable tips to help increase your revenue

"*" indicates required fields

Name*
Hidden

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

3 screenshots of seoplus+ TikTok videos

Passionate Marketers Striving to Make Your Life Better

Meet the team you'll work with. We can’t wait to learn more about your goals so we can achieve them together.

ABOUT US