In the previous post we talked about how important is to improve the accessibility of your website, not only when your users have disabilities, special conditions or their motor skills are not very fine, but so that your users, in general, can have the best experience in the same and require the least possible help. Remember that some users access computers that are a bit old or failing, are in unfavorable environments, may be elderly or people who don’t speak the language fluently.
Today we’ll see how to handle the colors, optimize the web in terms of audio and the plugins that can help us in these improvement tasks.
Colors
If your type of website has a very large audience and for example, if it’s institutional, maybe the users will have different levels of experience, the recommendation is that the design and construction be quite minimalist. This, for three reasons: 1, some screen readers for blind people don’t work well if the site doesn’t have clear data to read; 2, some special browsers for blind people don’t support all the features of very advanced websites; 3, the low contrast color schemes can make it difficult to identify the content within the web.
Recommendations
- Use tools like Wave and CheckMyColours to learn about the contrast.
- Access pages like American Foundation for the Blind to take note of how they handle certain aspects of the page and what you can include in your design.
- Use colors that make enough contrast between them and with the images so that they do not affect readability and the options or texts are sufficiently striking. For this, you can use colored wheels.
- Consistency is fundamental, stick to the color palette chosen for the website. This isn’t only good for the web image, it also makes it easier for users to associate colors with buttons or navigate more intuitively through the website.
Colorblind users
1 in 12 men and 1 in 200 women have color blindness as a condition, can not distinguish red, green and derivatives of these colors. This means that you must take into account that some colors are not perceived correctly.
Recommendations
- Colorblind people have difficulty distinguishing between colors that do not have much contrast. They will be easier to perceive if they are opposite colors in the chromatic circle if you use more than two colors you can use a triadic color scheme, which means that they are at points equidistant from the chromatic circle.
- Add textures, shapes or elements of different colors to the design, so that if you cannot distinguish some elements, have signals that serve to navigate correctly through the web page.
Audio
This group is quite varied since there are many people with hearing impairment but different degrees of it. In this sense, it is not easy to develop web pages that strictly comply with everything that a person with hearing problems requires, but there are alternatives that will not only help this type of users but all of them.
There are not many websites or video platforms that include sign language for those who learned it in a native way, however, the subtitles will help you a lot in this. Apart from adding subtitles in the video, add an extract with a transcript of it to make it easier for all users.
Themes
In WordPress, there are at least 125 free themes that are labeled “Prepared for accessibility”. In ThemeForest you can also find themes with this tag, although all are paid. However, if you offer advantages that can contribute to the objectives of your website with an excellent design and good accessibility, I would think about investing in that.
Plugins to improve web accessibility in WordPress
Some plugins can help you achieve better accessibility on your website.
WP Accessibility
If you do not want to completely change the template, this plugin helps you with minor changes such as adding a toolbar with large letters, grayscale, high contrast colors (which can be corrected by adding CSS, adding long descriptions to images and ALT attributes, add labels to the fields of the forms and more.
SOGO Accessibility
With this plugin, you can configure the accessibility button on the screen, increase the size of the letters, change the color of the plugins and include custom CSS.
Accessibility Widget
With this widget, you can increase the size of texts with a widget in the sidebar and make settings for users with limited vision or eyestrain.
Zoom widget
It is similar to the previous plugin, allows the user to increase the size of the typography with a widget in the sidebar.
Contact Form 7: Accessible defaults and Gravity Forms WCAG 2.0
These plugins configure the forms on your website using labels and codes so that they comply with the accessibility conditions.
YouTube Shortcode
This plugin allows you to configure a different title for each video and add comments through the voice, also insert shortcodes in the videos.
More information
The W3C (World Wide Web Consortium) establishes the main internet standards at the international level. You can review its guidelines to make your site more accessible.
The University of the State of Utah in the United States has promoted accessibility since 1990 and provides quite useful information for designers in its 508 checklist.
