This is the third in a series of articles for #OctoberWrites. I’m writing every weekday this month sharing content design tips, mental health tidbits and insights into freelance life.
In light of the BBC’s recent piece about why so much of the internet is closed off to blind people, I’d like to share some straightforward tips to make sure your site is accessible for all kinds of readers.
Web accessibility is all about creating content that is accessible to people with disabilities.
As designers and content creators, we should consider the behaviour of all internet users, including the blind and visually impaired; the hearing impaired; and those individuals with issues with motor skills and/or cognitive disabilities. Let’s work together to make the internet an inclusive place for all.
Technology for web accessibility
There is so much technology available for disabled internet users, but this cannot work to its fullest without buy-in from us online content creators.
Assistive technology allows visually impaired people to access and engage with the online world. Solutions include screen-magnifiers and screenreaders, depending on the needs of the user.
Applications like screen readers will turn online content speech or even Braille. While screen-magnifiers can be either hardware or application-based and allow those who are visually impaired to read content.
As designers and marketers, there are a number of things we can to ensure our websites are working hand-in-hand with this technology and are, therefore, accessible for all.
1. Mobile optimisation for accessibility
I know what you’re thinking. Ellen, it’s 2019 – we’re all mobile optimised. Sadly, that’s not the case yet. In fact, just 81% of small businesses with websites pass Google’s Mobile Friendly test. And that test doesn’t take into account many of the accessibility issues we’re exploring today. Yikes.
Every day, I encounter another website that’s not properly optimised for mobile and tablet. There’s no denying that mobile optimisation is both a performance and accessibility issue.
If your website not correctly mobile optimised, users may struggle to read the content or navigate the site. This is a particular issue for those with visual impairments as screen-magnifiers will increase the text size and, therefore, obscure the page layout even more.
Mobile optimisation is also vital for individuals using screenreading technology as the device will read everything from top to bottom. This may result in disordered content and, therefore, affect your user’s experience and understanding of your content.
2. Write tidy code
The next point is vital to making your website accessible for all.
When designing and building a website, enter the project with accessibility in mind. Keep code tidy, including heading tags and image alt text.
Remember: the screen reader is turning everything into text. Through the correct and tidy application of components, you can ensure the user is relayed the information they need.
Here’s a checklist to ensure your HTML is both tidy and functional:
- Title tag: This is the first thing a screen reader will see, so make sure it is applied on every page.
- Heading tags: If you’re still not correctly using heading tags, then what are you doing? H1 for the post title, H2s for subheadings and H3s, if necessary.
- Buttons: Be sure to use the correct button components and not anchors; otherwise, screen readers may not recognise them as buttons at all.
- Alt-text: Add alt text to every image. Do it. And Don’t half-arse it. Add a proper description of the image because this is what the user will hear when they land on this image.
3. Add closed captions to all video content
I’m delighted to see more video content creators embracing captions. This feature is not just important for those with hearing impairments but is also proven to improve engagement with all mobile users, as many people watch videos without sound while scrolling through social media. In fact, YouTubers have seen increased engagement from users following the addition of closed captions to videos.
There are a few options when it comes to adding closed captions to your videos. YouTube boasts technology that automatically transcribes videos for captioning, but it’s far from foolproof. If you are uploading content to YouTube, either create your own closed captions file and upload manually, or sift through the auto-captions and make necessary changes before going live.
To demonstrate the true horrors of YouTube’s auto-closed captions, check out this hilarious skit from Rhett & Link.
4. Enable keyboard-only navigation
Although the majority of people landing on your site will either be using a mouse or on a touchscreen mobile, it’s still crucial to build your website to allow keyboard-only navigation. This means users can navigate the menu using only the tab and return keys, which is often a necessary functionality for users with impaired motor skills.
If you need help ensuring your website is keyboard accessible, check out this handy guide from WebAIM.
5. Be careful with colour
It’s easy to get carried away when developing your brand’s colour scheme and building it into your site, but have you considered whether the colours you have chosen are accessible? Colour blindness affects 8% of the population, with red and green the most commonly misread colours.
Avoid using these colours in isolation, yes – even at Christmas. If your website is text-heavy, stick to a simple white background with dark text. It may not look fancy, but your user’s experience is critical when it comes to consuming important content.
There you have it, five tips to make your website more accessible. Have I missed anything? Let me know in the comments – I’d love to hear from you!
