In the past article we saw the importance of web accessibility and how we can see it in our own production.
In the second part, we will show the various structural elements of our HTML/CSS/JS in order to make our website accessible to everyone. All content covered here can be implemented in any front-end framework as well as in pure code.
So, are you ready? Let's get started!
1. The semantic HTML
HTML semantics is nothing more than using the right tags at the right times. It sounds simple doesn't it? But know that many of us don't use it properly.
Most sites are filled with a tangle of
tags and do not use the tag structure predefined by HTML. What's the matter with that? When a screen reader passes through the page, he will easily get lost in the positioning of the site, and can, as a result, access the footer before the nav, or the title of the text after its content , among several other problems caused by this bad structure.
HTML5 came with new tags that completely solve this structure. We can easily adapt the construction of our front so that it follows these guidelines. In addition to gaining better native page positioning, we’ll still be helping screen reader users find their way around.
2. Labels on Forms
Forms are always a problem for people with disabilities. Most of these problems are due to the bad association of labels with their respective inputs.
HTML has a natural solution for this, the for attribute for label tags. This attribute references the input in which it describes. However, it is unfortunately less used in most forms that we find on the web.
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
Alternative image descriptions
Anyone who is already familiar with the use of frameworks like react or vue and has tried to insert an image in their code, has already encountered the mandatory alt attribute, right? The alt attribute refers to alternative description and is another way for the screen reader to receive the description of the image so that people with vision disabilities can understand the meaning of the image.
It is very important to always insert a succinct description about the image presented, because the presence of the description can, in some cases, generate conflicts of understanding due to its bad description.
Descriptive titles
In addition to the description in images, our front-end allows all elements to be better described. This is done through the title attribute and is activated when the component receives focus. Using it is a good alternative to better describe certain complex areas of your project.
Integrations with sign languages
Deaf users who only have the ability to communicate using sign language may need to use it to navigate your website. Fortunately, there are countless alternatives depending on the country you live in and the audience you want to reach. Most plugins are just imports of Javascript code in the head tag. Others may require installation of packages.
The image below is an example of HandTalk, a Brazilian sign language translation plugin.
Color adaptation
Something that has become very fashionable in the new interfaces is the presence of dark themes. They reduce the intensity of the light in our eyes, keeping them more comfortable.
In addition to the dark theme, there are many other features that we can create to include visual impairment or color blind users on our website. One of them, very common in operating systems is the high contrast theme.
The high contrast serves to reduce the amount of colors in an application so that, like the dark theme, its characteristics become more visually perceptive and less harmful to the human eye. However in this case the choice of colors is selective.
The colors shown above are used in the Windows system for auto contrast themes. Several studies show that this palette is extremely effective for users with low vision to better see the elements of the site.
From the construction of a theme with a low amount of colors, it is possible to create several branches of it to also include users with color blindness.
So, where do I start?
After we have seen all this and understand the importance of accessibility, where can we start?
The answer is, simply get started. We don't need to include all the features covered here, but if we include at least one of them, we can change the life of a user of our system and, with that, influence new people to include them as well.
Thanks for reading.
Follow me on dev.to and linkedin
Top comments (0)