How to Achieve UX Accessibility on Your Website
Poor user experience (UX) design can create barriers that hinder the functionality of the website for users with sensory, cognitive, or physical disabilities. In fact, research by WebAIM finds that across one million homepages, there were over 50,000,000 “distinct accessibility errors” at an average of just over 50 per page.
This doesn’t just make groups of users feel excluded, but also harms your brand visibility, and significantly narrows your market population.
Making your site accessible creates inclusivity across the huge number of users who browse the web every day.
This inclusivity has a flow-on effect that increases your brand awareness and engagement, making the benefits of an accessible website twofold.
Investing in your UX design builds a level of trust with your users, as it shows you are committed to their experience, and that you care for the variety of needs across your audience.
Improvements to your UX design will also increase your usability, which benefits the experience of all users, not just those facing barriers. Given that 61 million people in the United States have some form of disability, an inaccessible site could be harming your bottom line.
If you address the following UX design elements, you will set yourself apart from competitors that haven’t considered their accessibility.
1. Alt Text on Images
Alt text is an HTML component that describes the details of an image, and it should be considered essential when it comes to making your website accessible.
For visually impaired users, the alt text allows screen readers to describe to them what the image is representing.
To make your site accessible, this should be added to all images that are integral to a user’s understanding of the page content.
For images that are purely aesthetic, you can leave out the alt text, known as empty alt text, which appears as alt=””. The screen reader will know to automatically skip this.
If you completely miss the alt text, however, the screen reader will assume the image is important and instead read out the file name.
The file name isn’t always relevant, nor is it informative, particularly in the case of graphs, or images that contain information.
2. Strong Colour Contrast
Achieve accessibility by making sure that there is a strong contrast between the font colours and background colours on your website so that the pages are easier to read.
This applies not only to the body text, but also to headings, buttons, and contact forms; try to avoid colours that are too similar in these elements.
If you are struggling to find the balance between aesthetics and accessibility, you can use a web tool like Contrast Checker that allows you to enter the colours you have used for font and backgrounds and will give you a contrast ratio score.
You can use a tool like the Contrast Checker from WebAIM to quantify your contrast ratio. The higher the contrast ratio score is, the easier your web pages will be to read.
The benchmark for contrast ratios is 3:1 for larger text and 4:1 for smaller text.
3. Including Link Text
Making sure your links have descriptive link text means that all users, including those with screen readers, will know exactly where the link will take them.
The same applies to buttons and icons; without any text, these will be missed by a screen reader.
If your call to action on a web page encourages the user to click a button, you will be missing many interactions if the link text is missed.
It is not enough to simply include basic text like “click here” on the links and buttons, make sure the text is descriptive, concise, and informative.
Another mistake that is often made here is trying to get multiple keywords into the link text so that it contributes to your SEO, however, this approach won’t make your page accessible. Google uses over 200 ranking factors in their algorithm, and Backlinko has broken them down.
Finally, you can incorporate navigation landmarks into your website to make it easier for screen readers to identify groups of links used for website or page navigation.
Without these, screen readers won’t know which ones they can skip over and will therefore read every navigation link each time the user opens a new page which can cause frustrations for the user.
4. Label Your Forms
At a very minimum, your website will include an inquiry or contact form.
If you can ensure that each field is labelled with what information is needed from the user, this will allow screen readers and other accessibility devices to guide their users through the form.
This goes beyond simply having text above each field.
You will also need to add a description to the coding of the form, inside a label element.
This will make it accessible to all users, including screen readers and search engine bots, and will result in you getting a higher number of useful interactions on your forms.
5. Minimise and Simplify your Table
Tables pose complications for screen readers.
The screen readers will list off the number of columns and rows, and then proceed to move through the table contents, however, this isn’t guaranteed to be in the correct order.
This makes the tables confusing, and they can lose their information value for a portion of your audience.
If you can present the information in another format, that would be the preferred way to increase your accessibility.
If a table is unavoidable, you can make it more accessible by including table headings, minimising markup on the table content, and ensuring the table is labelled correctly.
6. Consider Keyboard Accessibility
The layout of your website can impact those users that are using keyboards, or other accessibility devices to browse your website.
If your website is a relatively simple semantically correct HTML design, it will already be accessible.
For those whose website layouts are a little more complex, adding digital landmarks will provide an easier path for keyboards and screen readers to navigate the website.
To make the experience, even more, user-friendly, you can add skip links at the top of your pages.
These skip links can be used by hitting the tab or spacebar keys, and users can avoid having to go through the entire menu each time they venture onto a new page.
Use the Correct Markup on all Non-HTML Elements
With the above steps completed, your website is almost accessible and ready for a positive user experience.
The other factor to consider is the non-HTML elements such as Word documents, PDFs, image-only documents, widgets, or dynamic content.
These can be incredibly difficult for assistive devices to read and interpret, especially if they are loading at different times.
You can tag these elements for navigation using ARIA landmarks, which will ensure they are picked up by screen readers.
For documents, you can use an accessibility checker within Office to check how user-friendly they are.
With the dynamic content, you can consider removing it if there is an alternative way to display this information on your website.
Opting for accessibility over style will ultimately open your website up-to a much broader audience and demonstrate to users that you value inclusivity.
FAQs
What are the four significant categories of accessibility?
The Web Content Accessibility Guidelines are built upon the four principles of POUR: perceivable, operable, understandable and robust.
What is ADA compliance?
If your site is ADA-compliant, then it meets the recommendations set out in the Americans with Disabilities Act of 1990 and is accessible to someone with a disability.
How do I make my website more accessible?
You can make your website more accessible by improving colour contrast, adding alt text, or adding keyboard accessibility for screen readers.
What is an example of website accessibility?
Allowing users to navigate your website using a keyboard instead of a mouse is an example of website accessibility. So is adding alt text to every image on your website.
