How to make a website more accessible

In order to attract visitors to your website and reach a broader audience, you will need to be aware of user experience and ensure that your website is designed and developed to be both inclusive and accessible.

Over the years, Webpop Design have created hundreds of websites following accessibility guidelines to ensure that all users are catered for. Here are 10 of our top tips to make your website more accessible.

What is website accessibility?

Firstly, what does ‘accessibility’ actually mean in relation to a website? Accessibility refers to how user friendly and inclusive your website is and how easy your website is to access.

Websites that are designed with accessibility in mind will cater for all individuals to ensure that everyone has a positive user experience (UX), regardless of a person’s ability or limitations. For example, a person with a physical, visual or hearing impairment should have equal access to your content and not feel restricted. Simple considerations will improve user experience and ensure that your website is welcoming and intuitive for everyone.

Why is website accessibility so important?

In some countries, website accessibility is a legal requirement but, regardless of legal compliance, website accessibility is also beneficial for numerous other reasons:

• The more accessible your website the broader audience your website will reach
• Having an accessible website advocates a positive brand image
• User experience will be optimised as your website will be more intuitive
• An accessible website will improve your search engine rankings and overall SEO campaign.
• User experience will be improved on mobile devices

How to design an accessible website?

There are many ways in which you can make your website more accessible. By following our simple guidelines below, you can improve your website’s accessibility and reach a wider audience.

Users with cognitive or mobility difficulties may not be able to use a mouse effectively and so a website designed to be keyboard navigation friendly will ensure that keyboard-only users can access your content without user experience being compromised. Keyboard-only navigation will enable users to access internal pages, click on links etc. without requiring a mouse.

It’s important for users to have a clear journey through your website. Utilising an easy to navigate design helps users to access your website and find the information that they are looking for. By being consistent with your design, ensuring content is clear and incorporating simple navigation and call to actions, your website will be much more accessible.

Additionally, ensuring that your website is accessible on all devices is also key to ensuring positive user experience. This is especially important for rankings on google who have incorporated mobile friendliness as a factor in their ranking decisions.

There are many Content Management Systems to choose from and the majority of which have been created with accessibility in mind. Once you’ve selected the CMS that meets your requirements, speak with your website design agency in relation to how it can be used to improve your website’s accessibility.

Oftentimes, your website design team can include plugins or modules with user experience in mind. Most CMS systems, such as WordPress, will incorporate caption options for video players, alt tags for images and the option to add hierarchical headings to content – these are simple ways to improve user experience.

Have you used Alternative Text (ALT-tags) for images on your website? If not, this is definitely something that you should consider!

By including an accurate description of each image on your website, you’re ensuring that your website is user friendly for people who are visually impaired. For those using screen readers or speech input software, alt-tags are a key way to make visual elements of your website more accessible.

Furthermore, you might also want to take advantage of using keywords within your image description as alt-tags are also increasingly important when it comes to search engine optimisation.

For those who are colour blind or partially sighted, it can often be difficult to distinguish between text and other elements on a web page. Therefore, you might want to consider using high contrasting colours to accentuate different elements and to make text more readable. To check how accessible your colour scheme is, you can use an online colour analysis tool.

Moreover, careful use of white space between elements on your website or separating text into sections makes for an easier read.

You might want to consider the use of colour within your company branding too – especially if your brand isn’t yet established and you aren’t yet restricted by a specific colour scheme.

Screen reader users are able to navigate a web page through the use of headings. Carefully considered headings used throughout your website will allow users to find relevant content more easily, allowing for a better user experience.

When used properly, headings are split into different levels; <h1> headings are used to title each web page and represent the most important keyword and description of that specific page. Each subsection thereafter should be given a <h2> heading and each subsection can then be divided further into <h3> headings, and so on.

A common error that people make in web development is using bold text rather than a heading. Visually, users may be able to differentiate between regular text and bold text, but screen readers cannot. Therefore, bold text should not be used as a substitute for an appropriate heading.

If you’re going to include video on your website then you might want to consider how you can make this accessible. By using video captions, those who are hard of hearing or do not have access to audio are still able to follow video content as the video plays in real time.

Similarly, some users will be unable to see important visual information presented in the video, which is why audio descriptions are also beneficial. Audio described content provides a narrative which describes the visual content.

Next, it’s important not to overlook dynamic content and how this affects user experience. When content dynamically updates, such as popups, lightboxes or screen overlays, screen readers might not be alerted. You might want to check your chosen frontend development frameworks to ensure that they specifically support accessibility.

It’s good practice for forms to be:

• Perceivable
• Operable
• Robust
• Understandable

Firstly, in order for forms to be perceivable, users must be able to easily understand content within the form. For example, by using clear and useful error messages, users have easy to follow instructions on how to correct information they have provided.

Next, your form should be easy to operate so that input device users or keyboard-only users are still able to operate the forms functionality easily. A careful use of labels will ensure that screen readers can read the label of each field. Similarly, a robust form is designed in a way that its content supports assistive technology.

Lastly, forms should be understandable, easy to read and uncomplicated. Avoid being verbose, use simple and concise language and try not to overcomplicate forms with information.

Finally, it’s advisable to avoid using tables unless they’re necessary to present tabular data. Even then, data should be correctly labelled with clear headings in order to distinguish the connection between different cells.

If tables are used incorrectly, within a page layout to separate sections for example, then this makes information difficult to follow, especially when using a screen reader as information may be presented in a different order than it is visually intended.

What’s next for accessible web design?

It’s important to remember that accessibility standards are constantly changing and evolving as technologies continue to improve. Not everyone will approach accessibility in the same way and so it’s important to stay informed to ensure that your website remains accessible in the future.

Finally, by committing to accessibility, you will increase access to your website and ensure that your site is more user friendly and user experience is optimised.

If you would like an in depth review of your website’s accessibility or to discuss a new website project with accessibility in mind, then our experts are on hand to help.