Around one billion people, or 15% of the world’s population, have some form of disability. This begs the question: is your website designed to be accessible to as many users as possible?
Not only will improving accessibility on your website make their experiences significantly better from an emphatic standpoint, it also grants you access to a greater pool of potential audience who will navigate and interact with your website.
There’s also a strong business case for accessibility as accessible websites tend to be more SEO friendly and experience better search rankings. Hence, it’s now more important than ever to improve the user experience (UX) of your website, a web design trend that has gained momentum in recent years.
So here are some tips that can be implemented to increase the accessibility of your website.
1. Be Responsive
Having a responsive website that adjusts smoothly to various hardwares is just as important for users without disabilities. In fact, it is an important feature of accessible website designs.
With more users shifting away from desktop usage and accessing internet from their tablets and mobile devices, it’s no longer enough to have a static website that only looks decent on a desktop monitor. You should ensure that your website is able to adapt its content to different devices and screen sizes.
If you’re unfamiliar with designing websites for responsiveness, do get in touch with a professional web design agency for further assistance.
And if you’re looking to design one yourself, check out our list of recommended CSS frameworks that you can work with.
2. Enable Resizable Elements and Zoom
Building on the need for a responsive and accessible website, you need to ensure that your website supports resizable elements and zooming on your content. This especially important for users with poor vision as they may prefer to resize their browser and zoom into certain page content for an easier reading experience.
A good practice is to use relative sizes (ex. %, rem, or em) as opposed to absolute units, which enable the element to scale depending on other content and screen size. This way, the elements do not overlap with one another or become illegible when resized.
3. Use Readable and Large Fonts
Certain font styles, sizes, and stylings can be difficult to read for people with impaired vision. If you want your website to be accessible to most users, try following these guidelines when it comes to text styling:
- Stick to a dylexia-friendly and legible font such as Arial, Helvetica, and Verdana
- Avoid any specialty display fonts or those with cursive or serif strokes.
- Base font sizes should be set to at least 14px (0.875rem).
- Define font sizes with a relative value (ex. %, rem, or em) for easy resizing.
- Only use larger and bolder fonts for headers and sub headers
- Keep font variations and styling to a minimum
- Only use underlines for links.
Try to also organize your text into readable and logical sections that are categorised by headers and sub-headers and opt for text that contrast against the background color.
4. Include More Color Contrasts
Vision impairment is one of the more common forms of disabilities. Those who are affected by it will struggle to navigate websites with low color contrast.
A good rule of thumb to follow for color contrast? W3C recommends a minimum contrast ratio of 4.5 to 1 between a text and its background. You can check this value in real-time with online tools such as WebAIM’s color contrast checker. You can also simulate various color vision impairment with Color Oracle’s blindness simulator.
5. Add Alternative (Alt) Text to Your Images
An alternative (alt) text (also called alt attributes, alt descriptions, or alt tags) is the written text that appears in place of an image that fails to load.
An alt text serves several functions, the most important of which is that it is read by screen readers in place of images, giving them context for those with visual and cognitive disabilities.
And if you don’t find that compelling enough, alt text is also read and used by search engines to determine the content of the page itself, which can improve your website’s SEO.
6. Keyboard Over Mouse Navigation
Many users with motor disabilities rely on a keyboard to navigate through a website as they struggle to hold the mouse and touch pad. Keyboard-only navigation typically works by using the Tab key to jump through elements.
Naturally, your website should be designed to be usable with the keyboard as well. To do so, you have to structure the web pages as per the keyboard tab order in a logical and intuitive manner. This means following a left to right and top to bottom order, with the header first, followed by the main body, and finally the footer.
Also test out your website by navigating it using the Tab and Enter keys. If you can smoothly navigate through your website with just your keyboard, then you’re all good.
7. Make It Screen-reader Friendly
You should also properly structure your content using proper headings. Not only does this make your page content much easier to read, it also allows screen readers to better interpret your page.
The use of H1 tags should only be restricted to one use per page, which is primarily the page title itself. They’re followed by H2 tags for subheadings, which can then be nested further with H3 tags, and then by H4 tags and so on.
Just be sure to use the headings as per the hierarchy of the content of the page.
8. Use Descriptive Page Titles and URLs
Screen readers can also read descriptive URLs as a way to provide visually-impaired users with a quick insight into the context of a web page.
You should include a title for every page of your website using the <title> tag, keeping them short but descriptive. Avoid any vague and unnecessary descriptions and using anchor text such as “Read More” or “Click Here”.
An example can be:
- Low Readability: https://www.whooshpro.com/design/
- High Readability: https://www.whooshpro.com/design-agency/
9. Avoid Any Media Autoplays
Remember those music on Friendster that automatically plays when the page is loaded?
For people with disabilities, these autoplay media are not only annoying, they can also make a site unusable. Some effects include interference with screen readers, triggering of seizures, and unintended jump scares for users. It is therefore important to avoid using elements that start without the user’s prompt.
Examples include opting for manual sliders and carousels as opposed to an automatic slideshow and videos that only play with manual input from users.
10. Test Your Website
Lastly, you should test out your website for its accessibility and navigation experience. You can do so by:
- Loading the website on various devices and operating systems using a browser simulator such as Browserstack.
- Navigate through your website using only the Tab and Enter keys.
- Use it with a built-in screen reader plugin
- Zoom in and out to observe the page behavior and appearance
- Assess the accessibility of your website with an audit service
Make Your Website Accessible to Everyone
A well-designed website is one that champions user accessibility and equal access to functionality, regardless of one’s physical disabilities and socio-economic situations.
Hopefully, these tips has given you some ideas on how to design an accessible website and optimize it for many users.
