Accessibility Mistakes to Avoid on Your Website

Website Design | |

With over 15% of the global population living with a form of disability, accessible design is essential for your website, to allow more users to access your content, improve browsing experience, and build your company reputation. Importantly, following website accessibility guidelines will ensure W3C compliance – the base standards for website design.

Website Accessibility Mistakes & How to Fix

Missing Alt Tags

Alternative text is descriptive text that describes an image on your website. Screen readers, software used by visually impaired users to read out the content on a web page, use the alt tag to describe the image to the user – in short, they can’t understand what an image depicts if it does not include an alt tag.

Additionally, screen readers may choose instead to read the file name of the image, which can lead to overly long strings of text being read out, which can cause confusion.

By ensuring you input relevant and concise descriptions on each image, that are an appropriate length, you support the effective use of screen readers, allowing visually impaired users to have the same website experience. 

Insufficient Colour Contrast

Using similar colours for your text, button elements and page backgrounds on your website can lead to inadequate contrast, making it challenging for both visually impaired and sighted users to read and understand your content.

Sufficient differentiation between text and page colour is required, taking into consideration website headers and submit form buttons too, to ensure that they can be seen on all size devices. You can use a colour contrast tool to analyse your current colours, with recommendations for better colours to utilise.

Additionally, links should be visibly distinct from normal text content, to help them stand out.

Ignoring Navigation Accessibility

Whilst many users operate a mouse to navigate your website, not everyone will. Many visually impaired people use a keyboard or other accessibility device to move around your site, for example, using the space and tab keys. You may need to code in digital landmarks to make this possible, ensuring that all users can navigate through your website and its contents.

Incorrect Headings Structure

Heading hierarchy is essential for screen readers to understand your page or post structure, and also helps with search rankings and Google crawlers. Often, site admins choose headings based on how they look, however, this can lead to confusion for screen readers, causing content to be processed in an incorrect order.

Instead, ensure a clear heading hierarchy is used, utilising H1 to H6 headings. Note that WordPress websites often automatically insert the page title as a H1, meaning you would start from H2 in the content.

Unclear HTML Attributes

Interactive elements such as sliders and accordions can be problematic for screen readers and accessibility tools, as the elements do not include clear instructions on how to use them.

To ensure this problem does not arise, you should ensure that the HTML WAI-ARIA attributes are added to all interactive elements, to provide extra information on their functionality and the meaning of them.

FAQ accordion block with html code for attribute for accessibility

Missing Form Labels

Missing form field labels can result in users not understanding what is needed from them, or where to input their information, which can result in a missed opportunity to increase conversions, and could lead to users going elsewhere for their needs.

Instead, ensure that you label all fields on all forms throughout your website, so that users and screen readers alike can navigate each field. You should use the <label> element to do this, ensuring that fields have a description within the form’s code.

Unclear Links

Links need to convey context about where users are directed to once clicking, however, many site admins use generic link text such as ‘click here’ – which can cause confusion for users and screen reading tools. This is because users will not be confident in where they are navigating to, and screen readers often skim through all links on the page at once, making it difficult for visually impaired users to differentiate between links. Additionally, using link text that is too long could overload the user with information, in addition to making it take longer for screen readers to read aloud.

Instead, use specific text to identify the subject matter for users to better understand where links lead, and opt for short, clear descriptions, such as ‘learn about digital marketing’.

You should also be using buttons as CTAs (call-to-actions) throughout your website, which can increase engagement and create leads to pull users further into your marketing funnel. When using buttons, ensure that they are obvious on the page by using an acceptable colour contrast, and use sparingly across your pages.

By avoiding these mistakes, you can create a positive user experience for everyone, including those with a disability. This will allow you to avoid usability issues and ensure inclusion, which will ultimately lead to higher conversions and enhanced brand reputation.

Need help with making your website accessible, or not sure where to start? Ballyhoo digital agency can help – we design and build websites that engage and convert your audience, following accessibility best practices. Contact us now to discuss your ideas and requirements.

Headshot of Rebecca young new team member

Rebecca

Rebecca helps to keep the team organised and supports all of our clients with day to day activities and content. She also runs all of Ballyhoo's internal marketing.