In America, a business website must be accessible and ADA compliant. That means each element on a website should be convenient for people with disabilities. Most business owners think that making a website accessible is a costly affair that takes a lot of time and effort. Although that might be true for some approaches, other approaches are faster, less expensive, and achieve the same results.
It’s still a good practice for your designers to keep accessibility in mind with various aspects no matter if you go for manual or automation. These are some ways in which the design of the website can be optimized for users with disabilities.
Optimal Color Contrast
Designers often forget about color contrast when designing a website, especially the buttons. Visually impaired people need optional color contrast to be able to distinguish texts, buttons, and backgrounds. According to WCAG 2.1 guidelines, the ideal contrast ratio between texts or buttons with the background should be at least 4.5:1. The contrast ratio can be less than this if the designer uses larger fonts or bold ones. The contrast ratio can be reduced to 3:1 if the size of the font is 18pt or 14pt bold.
Alternative Indicators to Color
It can be difficult for color blind people to understand critical information if you use only colors as indicators. Designers should add other aspects such as patterns or text labels in addition to colors. Most often, designers rely on color to show errors on the screen. They should add another visual cue, such as underlined texts, that makes it more accessible.
Pictorial representation of data such as charts or graphs can become difficult to understand for people who are visually impaired. Designers should add supporting texts or shapes to make them accessible. Adding labels and texts will also make the data screen reader-friendly.
Labels With Placeholders
Designers often forget about accessibility when they follow the latest trends. One such trend is using placeholder text as labels. Placeholders or form fields/inputs are usually gray, and the text inside them that tells us what it is for goes away when it is filled. For people who use screen readers, it can be confusing as they might forget what information was supposed to be inside the placeholder. Adding a text label underneath it will make it easier for people who use assistive input devices.
Relevant Alt Texts for Non-Text Content
Most designers know that they must add alt texts to images and other non-text content. But it can get tricky for them to differentiate between relevant and irrelevant images. Every image on a web page does not contain the necessary information for the user. Therefore it is not essential to provide alt texts for all images, but only the ones that contain relevant information.
It can get confusing for designers to decide how much information must be provided in the alt texts. Too little information and it will not fulfill its purpose. Too much of it can overwhelm and confuse the user.
Support Keyboard Navigation
Users who are visually impaired or have motor function disabilities rely on a keyboard alone to navigate through websites. For such users, the order of interaction on a website should be predictable and intuitive. The tab key response should follow a consistent and reasonable visual flow on the page, such as left to right and top to bottom. They must also keep the number of links and length of texts on a page limited. It is a good practice for designers to use a keyboard only to test the navigation on the accessibility interface of a website.
There are several other aspects of designing that must be kept in mind to optimize website accessibility. Using manual or fully automated audits can tell you about the shortcomings and help you to fix them.