You know accessibility is important, but where do you even start? Don’t worry; you don’t need to be a coding genius to make your website more inclusive. Here are five accessible quick wins you can implement today to make a real difference to your web traffic.
1. Add ALT text to your images
Imagine trying to describe a picture to someone over the phone. That’s essentially what ALT text does. It provides a text description of your images for people who can’t see them, such as those using screen readers.
How to do it:
In your website’s content management system (CMS), look for the “alt text”, or “alternative text” field when you upload an image. Write a concise and descriptive sentence about what the image shows and why it’s important to the context of the article.
Why it matters:
ALT text ensures that everyone can understand the context of your images, regardless of their visual abilities. This is the text that appears in everyone’s browser when an image can’t be found and the link to the image is broken, or the user can’t display images on their device in their current location.
Example:
Instead of leaving the ALT text blank for a picture of a dog, write “A golden retriever puppy playing with a red ball in a park.”
Use clear and consistent headings
Headings (like H1, H2, and H3) structure your content and make it easier to navigate. They also help screen reader users understand the hierarchy of information on your page.
How to do it:
Use heading tags (H1, H2, H3, etc.) to organise your content. Don’t just make text bigger and bolder, or use a CSS class to change the appearance; use the actual heading tags when it is appropriate. Start with an H1 for your main title, then use H2 for subheadings, and so on. On most web pages, you should end up with one H1 tag with several H2 tags beneath it, and nested within each H2 tag, you might have some H3 tags, and so on.
Why it matters:
Clear headings make your content more readable and navigable for everyone, especially those using assistive technologies. It is also helpful for those with certain learning and cognitive difficulties, and search engines, to understand the hierarchy of a well–ordered article.
Example:
Use an H1 tag for your blog post title, H2 for main sections, and H3 for subsections.
3. Ensure keyboard navigation
Many people with motor impairments rely on keyboards to navigate websites. Make sure your website is fully navigable using only a keyboard.
How to do it:
Try navigating your website using only the TAB key. Can you reach all the interactive elements? Can you use the ENTER key to activate links and buttons? If not, you need to make adjustments.
Why it matters:
Keyboard navigation ensures that everyone can access and interact with your website regardless of their motor skills. It is particularly important in forms to ensure that the correct order is followed for form filling.
Extra tip:
If you see an outline around the currently selected item as you tab through the website, that is a good sign.
4. Check your colour contrast
Low colour contrast can make it difficult for people with visual impairments to read your text.
How to do it:
Use a colour contrast checker tool (many free ones are available online) to test the contrast between your text and background colours. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (such as titles and headlines, for example).
Why it matters:
Sufficient colour contrast ensures that your text is readable for everyone, including those with low vision.
Example:
A light grey text on a white background is very low contrast and difficult to read, while a dark grey text on a white background is high contrast.
5. Add captions to videos
Videos are a great way to engage your audience, but they can be inaccessible to people with hearing impairments if they lack captions.
How to do it:
Most video platforms (like YouTube and Vimeo) offer built–in captioning tools. Use these tools to add accurate captions to your videos.
Why it matters:
Captions make your videos accessible to everyone, including those with hearing impairments. They are useful for anyone who wants to watch your video but has the volume turned off.
Tip:
Ensure that the captions are synchronised with the audio, and tat they accurately represent the spoken content.
These accessible quick wins are just the beginning. By implementing these simple steps, you can make a significant difference in the accessibility of your website.
Want a professional accessibility audit and accessibility strategy? Contact Redcentaur and get started today.
Further reading on accessibility
The compelling case for website accessibility
Website accessibility: a simple guide to stop excluding visitors
Unlocking growth: the benefits of an accessibility strategy for UK small businesses
Redcentaur services: accessibility in web design
Redcentaur services: accessibility strategy
About the author…
Glenn has been a web developer and graphic designer since the early 1990s. He has followed the development of HTML, JavaScript and CSS from the beginning and has caught on to newer technologies, such as PHP.
Never resting, Glenn tries to keep abreast of new developments in his areas of expertise and is always keen to pass on his knowledge to help the web and graphic design community to improve user experience.
Glenn set up Redcentaur to offer easy access to the internet for small businesses and individuals, without the cloud of mysticism that surrounds internet technology. The stated objective of Redcentaur is to demystify the web for the uninitiated by offering easy-to-use, end-to-end web solutions and hosting at accessible prices.
