Website accessibility is a key part of website design for any company that wants to make their site usable for as many users as possible.
In the words of Wikipedia, “Accessibility refers to the design of products, devices, services, or environments for people who experience disabilities.”
Essentially, accessible design means making your site available to users with disabilities. In a world of equal opportunities, this is obviously important.
It’s also worth remembering that Web accessibility is often required in law and policies depending on the region. (You should always check whether this is the case for your company before you start a new website project.)
So what are some of the steps you can take to make your website more accessible?
Make sure your website is keyboard friendly
101 for accessible website building is to ensure that your website can be navigated without the use of a mouse. A large percentage of assistive technologies rely on keyboard-only navigation, so users should be able to use it using only a keyboard and nothing else.
This applies to every part of your site:
- Pages
- Links
- Content
- Images and videos
And so on.
The Tab key plays a vital part in accessible website design, allowing users to jump between ‘areas’ of your site, such as moving across the taskbar or accessing footer links.
As such, you should aim for every piece of content and navigation on your website to be accessible using the Tab key.
Ensure your CMS (content management system) is accessibility friendly
There are a wide range of different things you need to bear in mind when choosing your content management system (CMS), but accessibility should be a key one.
Whether you choose WordPress, Droopal, Magento or even a bespoke option, you will need to tailor the theme or template you use to make it accessible. Alternatively, you can go for a theme that’s built with accessibility in mind. (Your chosen theme’s documentation should normally provide you with guidelines for this – WordPress has its own accessible handbook, for example.)
It’s also worth remembering that whatever your chosen CMS, the administration options – creating a blog post, for instance, or uploading videos – will need to have accessibility in mind as well.
Avoid using any automatic media
It’s no secret that auto-playing media – whether it’s video or audio – annoys almost everyone. We’ve all loaded up a website without realizing our speakers are turned up and jumped ten feet in the air when music or speech starts playing without asking for it!
Needless to say, you should steer clear of any automatic media when looking to make your website more accessible. Not only will this annoy your users, it can also make navigating other aspects of the website trickier, as it’ll give users an additional issue to deal with that they don’t need.
It’s also worth avoiding any other types of automatic navigation such as carousels or sliders – it may be the reader needs time to adjust to your website’s information before moving on, and automatic navigation can hinder this.
Make sure you structure your headers correctly
Headers play a key role in website accessibility. If they’re structured correctly, your content will be much easier to understand – and your website will be far easier to navigate.
By labelling your page headers clearly, it’s much easier for you to provide in-page navigation. For instance, you should only provide one H1 on each page – this will be the page titled. Then, you can use H2, H3 and H4 in that order.
Pay attention to dynamic content
A lot of modern websites make use of dynamic content – that is, content that can change on the page without the user refreshing it.
Needless to say, this can become a problem, as many assistive tools will only ‘read’ the web page as it is when it loads and then rely on that. This means that you’ll need to make the assistive technology aware if something has changed – if new content has loaded, for example.
One effective tool for achieving this is to make use of ARIA landmarks, which allow you to tag specific content as ‘live’, which better helps assistive tools to understand the area.
(ARIA can also be valuable in helping assistive users skip directly to specific areas of the page, so it’s worth taking a closer look at if your site is more complicated – again, the ‘Making WordPress accessible’ handbook covers this in depth.)
Always use the Alt Tag
Though the image Alt Tag field is mainly an SEO tool, it’s also an essential part of accessible website design.
Because the Alt Text functions as a replacement for the image if it fails to load, it can be used to help screen ‘readers’ work out what the image is.
It may be that your image doesn’t provide any additional depth to the page – it might be a simple image to accompany a blog post – but if it does, you can use the Alt Text field to describe the image. For example, if you’ve used a graph or chart to illustrate a point, you can describe what the graph represents.
Make sure you use the right colors
One area of accessible web design that doesn’t always get enough attention is color-blindness. In a rush to build the snappiest design, designers forget that certain color schemes can make their website harder to use for some readers.
While it’s virtually impossible to account for every user in one design, the key thing to remember is contrast. If two colors heavily contrast each other – black and white, orange and purple, etc. – they should still stand out against each other, even if the user doesn’t see the colors as they are.
Avoid colors that are too similar in saturation or hue, and you should be able to create a scheme that works for most users. If you’re unsure, there are multiple color and contrast checker tools online that can help you.
Take care to ensure your forms are accessible
If you want users to engage with your site, you need to ensure your website’s forms are as clear as possible.
Firstly, you should make the field labels very clear. So rather than just say “Name”, you should add “Full Name”, “Surname”, “Middle Name” and so on. By specifically labelling the fields, you give the screen reader the best chance of recognizing everything.
It’s also important to make sure that the Tab key will take the reader through the form in the order you wish.
Finally, you need to ensure that any required forms are labelled as such – an asterisk will be enough for most users, but any blind readers will need the clarification.
And it goes without saying that the accessible version of your website should NOT use CAPTCHA forms. There are a range of alternative options that you can consider instead – use them!
Don’t mess around with default HTML tags
Web accessibility tools rely on ‘default’ tags, so by switching button and anchor tags around – for example – you make it much harder for page and screen readers and the people that use them.
HTML traditional tags exist for all main elements – avoid changing them and you’ll make life easier for your users.
Use closed captions where possible
If you have any video or audio content on your site – such as podcasts, or product videos – try to ensure you have closed captions in place so that readers unable to listen can still access everything they need to.
An alternative to this if closed captions isn’t an option is to have an audio transcript below the video for users to read. There’s a double benefit to doing this – it makes it easier for Google and other search engines to index your content and aid your SEO rankings.
Get in touch
If you’d like help making your website more accessible, get in touch with Iconic Solutions, we’ll be happy to help you.
