Web accessibility involves a series of resources that make it possible for everyone to browse, understand and interact on the Internet, regardless of their difficulties or limitations.
This means that websites, tools and technologies are properly designed, developed and coded so that people with permanent disabilities or those with momentary disabilities can use them. In this way, people, regardless of their limitations, can perceive, understand, navigate, interact and contribute to the environment in which that page or program is made available on the web.
Disabled people represent 15% of the world population. Sites or systems that do not have specific adaptations for this audience, in addition to suffering from this lost share of users, are still subject to legal penalties in certain countries.
The Web Content Accessibility Guidelines (WCAG), created in 2014 and renewed in 2018, is a list of features to be followed for a website or web system to become accessible. Among the elements to be discussed in these guidelines are:
- Clean navigation
- Tab order
- Landmarks and site maps
- HTML structure
- Expressive titles
- Well-placed and defined headings
- Content lists
- Descriptive images
Each of these items represents a functionality of building a page (involving HTML + CSS + JS) that can be implemented in order to help the final understanding of the website.
To test whether our website or system is accessible or not, we can imagine the following scenarios:
Blind users use websites through a screen reader, which is navigated exclusively by the keyboard. To do this test, consider browsing your website with the TAB key. Check if you can reach all possible inputs and buttons, perform actions with them sequentially.
Users with color blindness or low vision use high contrast functions or color adaptations for images and texts. Does your page have any of these options?
Deaf people make use of the sign language text transcriber integrated in the website and also of video descriptions. Does your website have any free sign language translation options?
This group of people has difficulty interacting with very small or complex screen elements, such as menus in navbars or badly positioned buttons. Does your website have these well positioned elements?
If your website or system has not passed one, or none of the following, don't worry. In the next part of this article, we will discuss how we can prepare our front-end for these diverse situations, using simple and easily accessible tools in the community. Are you ready?
Thanks for reading! :)