As a product development company, we at Amalgama are quite aware of the importance of taking into account the accessibility in our projects and understanding the benefits for everyone. First of all, users, then our clientes. Yes, all those founders and startups trying to make on impact on their users lives MUST keep in mind the accessibility of their products in order to actually reach all their potential.
If you’ve ever been interested in implementing accessibility in your projects you may have heard about WCAG guidelines. In this article, you will find all the necessary information to take your first steps in the accessibility world.
What are the WCAG guidelines?
The WCAG guidelines, recognized, followed and demanded on an international level are a series of recommendations whose objective is to make our content more accessible and allow it to be used by the largest amount of people in as many circumstances as possible. These guidelines are posted by W3C, an international consortium that makes recommendations and standards for the web. Depending on the country we are in, we need to take into account the reach they will have in our project.
WCAG guidelines principles
Within the guidelines, we can differentiate 4 principles whose objectives are that every website is perceivable, operable, understandable and robust. In each principle, we have many rules that include several success criteria which are assessable on 3 different levels: A, double-A and triple-A. When it comes to testing success criteria, we have techniques that help us meet the criteria or the errors which don’t allow us to meet them (techniques are divided into sufficient and advisory techniques).
1. Perceivable
The first principle states that the website must be perceivable, meaning we need to offer several alternatives for people with different preferences or capabilities. One example of this is the criteria that talks about alternative text, where we would need to offer alternative texts for the images as long as they provide new information. Alt texts are very important in cases where the user utilizes a screen-reader and wants to hear about the information that image is showing. They are also relevant in cases where the images don’t load and we can just see the text.
2. Operable
The second principle states that the website must be operable, meaning that elements that require interaction by the user have to be accessible for people with different capabilities.
A success criteria within this principle that tells us functionalities must be accessible through keyboards so we have a guarantee that our website can be navigated and operated correctly using only the keyboard. I challenge you to navigate the following website just with your keyboard and post your experience in the comments below. I’ll leave this link here with the most common commands for navigation.
3. Understandable
The third principle refers to the information and the user operations being understandable which means that the text content must be legible and comprehensible, the navigation must be predictable and they need to help users correct or prevent mistakes. For example, it is important to be able to provide labels or instructions in a form, identifying the mistakes and describing them through a text. Lastly when an element receives the focus it prevents it from initiating any context change.
3. Robust
The fourth and last principle states that the website must be robust therefore may be interpreted by different browsers (like Chrome, Mozilla, and Safari). In addition, it has to interact with technical help like the screen reader, screen magnifier and much more.
Here we have some tips if you want to achieve this success criterion.
a- HTML elements have to have full opening and closing tags.
b- HTML elements have to be nested according to their specifications.
c- There can’t be duplicated attributes and the identifiers have to be unique.
Conclusion
The WCAG guidelines may seem a monster at the beginning with a huge amount of information, but to start step by step you just need to remember that you will evaluate success criteria depending on the scope defined above.
Consult all the time with the suggested techniques and the frequent errors that often appear! You now have the necessary knowledge to understand the guidelines. If you liked this article stay tuned for our next article on accessibility! Where we will be sharing in detail how we have to report an accessibility error.
If you have an idea or are working on a project you could use some help with, feel free to contact us! We’d be happy to help you… or who knows? Maybe be your new partner in crime.
You enjoyed this post and want to read more?