You might have willingly abandoned this design aspect thinking that it was not a priority for your users. You might have thought that it would take many hours of research and review. Contrary to what you may think, it is relatively easy to design an accessible website. Here are a series of changes that you can make in order to make your WebSelf website more accessible.
Text Size
First, the resizing of your texts is likely the fastest change to make. It only requires you to modify your website texts at a minimal size of 16 pixels. It is a size that has been universally defined to be the minimum for clear visibility. Your website texts should then preferably be 16 pixels or bigger. It would also be even better if you could enlarge the size of your text to 18 or 20 pixels. This is a small change that should not affect your design a lot; however, older or visually impaired people are going to be very grateful for this.
Color Contrast
Your website contrast of colors is another element you need to check. In fact, the contrast between the background color and the text color should be sufficiently high for each section of your website containing texts. Overall, the 4.5:1 ratio is suggested. It is likely that this ratio gives you no information regarding the required contrast and it is normal. You do not have to be a color pro to verify if the contrast on your website is sufficient. Many tools are at your disposal in order to check it for you. Among those available, WebAIM’s website includes a color contrast checker. You only have to enter the text color code and the background color code. The tool will then automatically calculate the contrast ratio, as well as telling you if you are following accessibility rules.
Pay Attention to Your Buttons and Links Texts
Links and buttons are important website browsing elements. They should then have relevant text since screen readers can generate a list of links and browse only from them. Links like “click here” or “see more” give no information on what will happen next if a user clicks on them. It is then important to use meaningful and relevant words for all your browsing elements. Texts like “subscribe to our newsletter” or “meet our team” will help screen reader users browse on your website.
Do Not Only Use Colors to Express Information
In the same line of thinking, it is important to use other elements than colors in order to differentiate an important detail from the rest. For example, a color can be a distinctive element to differentiate an active tab on your header but it must not be the only one. You can also use the underlined style to show which tab is currently active. You should also think about dividing your lists into categories or subtitles instead of only using colors. It will strongly help colorblind people to spot what they are looking for on your website quickly.
Write Relevant Alternative Text
We have already talked to you about your pictures alternative text for your website indexing; however, it can do more than only be an SEO element. In fact, it is also used by visually impaired people using screen readers. It is then very important to fill the alternative text for your pictures since visually impaired people will not have access to all of them otherwise. Some criteria must be followed when you write alternative text. You can find a guide on how to write image alt text here.
To conclude, these tips will not transform your website into the best accessible medium; however, you will help many people with disabilities to browse your website in an easier way by applying them. If you are interested in learning more about website accessibility, here are some links to read more on this subject:
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://www.w3.org/TR/WCAG21/