In order to run an inclusive and successful online business, it’s essential that everybody is able to use your website to its full potential and without limitations. There are many types of assistive technology such as screen readers available, and you want to ensure that your website works seamlessly alongside these tools.
73% of the people in the UK living with disabilities say they are unable to complete basic transactions on more than a quarter of the websites they visit. On a positive note, 82% say they are more likely to return to a company that offers an accessible online experience.
Here are some key things to consider when ensuring that your website is accessible to everybody:
Content
All content on your website that isn’t plain text (e.g. photos, videos and audio content) should have a text alternative which describes the content for anyone using a screen reader or similar tool. The most common version of this is alt-text for any images on your website, but it’s also a good idea to add transcripts for any audio content and captions for your videos to benefit those who are hard of hearing. Don’t forget that 85%of Facebook videos are watched without sound, so video captions are a must anyway.
When it comes to written content, make sure that you choose your language carefully so that it is easy for everybody to understand. Avoid using industry jargon and complicated acronyms without explanation.
Colour contrast
Have you ever been on a poorly designed website and struggled to read the text because the font colour didn’t contrast well enough with the page background? If it’s difficult for you to decipher, it will be even more challenging for someone with a visual impairment.
Ideally choose a dark font with a lighter background. You can choose similar colours, but just make sure they are significantly contrasted so that the text stands out and is easy for everyone to read.
Although the use of different coloured text can appear to make a really strong impact and emphasise your point, this is not inclusive towards colour blind people. For example, avoid using green for positives and red for negatives – not everyone will be able to tell the difference!
Animations
Avoid using flashing animations on your page. According to W3C, content that blinks or flashes more than three times in a second can trigger seizures in susceptible people. Any moving elements on the page may look exciting, but they can also be very distracting and make the content more difficult for some people to understand.
Layout
Provide clear headers that offer a helpful description of the page content and improve the flow of your website. This makes it easier to understand what each page is about, and also helps screen readers to interpret your pages. Make sure that you only have one H1 per page.
Ensure that your website is structured in a logical way and is easy to navigate. Place navigation links above the fold or in the footer. Essentially make sure that everything is where you would expect it to be on a website – no surprises!
Another layout tip is to ensure that you only use tables for specific tabular data, not as a page layout for lists or comparisons, as this complicates things for screen reader users.
Make sure your website is keyboard friendly
Many people are unable to use a mouse for a number of reasons, and so need to be able to navigate the website with just a keyboard. The tab key on a keyboard should allow users to select each link/navigation element on the page, and the enter key should allow them to “click” on the element to navigate through to the page they want to visit. To test this out, try using just a keyboard to navigate through your own website, and you’ll see how difficult it can be.
Avoid accessibility overlays
Accessibility overlay tools are automated software solutions that claim to detect and fix web accessibility issues. They became popular because they appear to be a fast and easy solution to enhancing your website accessibility.
We would highly recommend avoiding accessibility overlays entirely, as they are considered to be bad practice and do not actually fix the issues that are causing accessibility issues.
There are many critical accessibility issues that these overlays fail to address, and they can actually make websites harder to use because they need to be activated by a specific button or toolbar, which may not be easy to find on the webpage.
Semantic HTML Markup
HTML markup is a really important factor when it comes to web accessibility. Semantic markup means that the HTML code describes the content contained within it well so that assistive technology can scan and interpret it properly.
Use ARIA
ARIA(Accessible Rich Internet Applications) is a set of attributes you can add to HTML elements to help make web content more accessible and understandable for people using assistive technologies. This is particularly useful when it comes to dynamic content that can’t be managed by native HTML.
Make sure all forms are accessible
Make sure that each form field has a clear and descriptive label, and that it’s clear which fields are mandatory to fill out. Avoid using placeholder text (the grey text that is sometimes already in the form field) as screen readers may not pick this up.
Use descriptive link text
Avoid using ambiguous text such as ‘click here’ for links. Use descriptive text that explains in detail where the link will go. Assistive technology can help visually impaired users to scan through the links on a page, just as we do when looking for something in particular, so it helps if each link is explained thoroughly.
There are many tools you can use to check on the accessibility of your website and make improvements, and WordPress is considered to be one of the best CMS platforms for accessible design and plug-ins. If you are interested in an accessible and sleek new website at an affordable price, why not take a look at our fantastic range of WordPress templates?
