Accessibility is gaining more and more strength in the field of Web development and design, but at the same time, it is a bit confusing to learn about the subject or how to take the first step to start with them. Many developers plan a project without considering some aspect of web accessibility .
A couple of years ago while working on my daily tasks and for the project I am currently developing, we were asked to join a call and stop all the work we were doing, then we were handed a google docs document with hundreds of Accessibility Bugs and we were told - Person fixing maximum bugs gets a surprise.
The "Surprise" issue caught my attention, but what caught my interest the most was to find out that the site I work for every day had this huge amount of accessibility bugs that I had never thought about, and I didn't even care about. It's a site that gets millions of hits a day and it wasn 't available to everyone.
Thinking about business, it's a big loss, but it's not just about business, it's about inclusion and creating sites and applications that are available to everyone, including those with disabilities.
What is Accessibility?
Laura Kalbag defines web accessibility as:
"The degree to which a website is accessible to as many people as possible."
Accessibility is the right thing to do legally and morally, but in addition, an accessible site can bring more users or customers to our websites, which can give us many economic benefits.
Given the above, where should we start?
Where to start?
We can find a global standard for web accessibility in the Web Content Accessibility Guidelines (WCAG), this was developed through the W3C process and aims to explain how to make web content more accessible to people with disabilities and is aimed at developers.(https://www.w3.org/TR/WCAG21/).
In addition, I have found some lectures on Youtube that helped me to know where to start, like this video by Sara Soueidan https://youtu.be/are7ZZgA86I, I also follow people that every day teach me more about accessibility, for example the case of Ted Drake on twitter: https://twitter.com/ted_drake
What can we do right now?
We can start with the following steps:
Keyboard navigation
By default, every website should be navigable by keyboard.
The use of Alt-tags
It is the attribute to describe an image.
This text will be used by the screen reader to interpret the content.
| <img src="path-de-la-imagen" alt="acá va la descripción de la imagen"> |
Using ARIA Benchmarks
ARIA landmarks allow developers to provide programmatic access to sections or "landmarks" of a web page. You can assign "roles" to elements on a page to identify sections of your page.
For example, we can create a header and indicate the role of this section as follows:
| <div id="header" role="banner">Bienvenido</div> |
Likewise with the rest of the sections, and in this way we can create some guidance and facilitate navigation within the site for users who rely on assistive technologies.
Use default HTML tags
Utilicemos botones para los botones, y no un etiqueta <a>, utilicemos los headings (h1, h2, h3…) para los títulos, utilicemos etiquetas <a> para los links. Creo que este es el mejor ejemplo que puedo usar.
Conversely, we can confuse screen readers.
What else?
Here is a list of tools we can use to validate accessible websites:
I recommend you to follow Sara Soueidan, she always has very interesting posts in her social networks related to accessible websites, also, in her website she has a blog where we can find accessibility topics. And finally, on Youtube she has some conferences related to Accessibility.
As a conclusion and understanding that excluding this type of tools in our developments could mean losses in the business, I believe that the most important thing is to understand that we have a social duty from our part as professionals in the development area, to provide opportunities for everyone.
