What is web accessibility?

The term accessibility means enabling all people, regardless of their physical, motor, hearing or cognitive abilities, to be able to use a certain object or visit a specific place in the same way without any problem.

This term was coined by architect Ronald L. Mace (Ron Mace) in 1989 proposed "Universal Design" as a stage of evolution of the concepts of "Physical Accessibility

It is quite possible that you may have seen in a hospital that there are ramps for people with mobility problems, either temporarily or permanently, so that they can access the building safely. And this is what accessibility represents.

Figure 1. Wheelchair ramp

In the web area, let's take the following two images

Figure 2. Page that a person would normally view

Figure 3. Page as someone with visual impairment would see it without glasses

Here we can see two clear problems in Figures 2 and 3, which can be solved using accessibility tools (a11y).

The WC3 ( The World Wide Web Consortium ) defined the guide on standards to be able to develop accessible web pages, which it called WCAG ( Web Content Accessibility Guidelines).

This guide is defined by 3 types of acceptance levels: A (the minimum), AA (basic), AAA (the highest). Normally, when a public web page is being developed, the best practice is to have the AA level. The AAA level is generally used more in university contexts or government pages where greater inclusion of these standards is required.

More information about the guide in the following link

https://www.w3.org/TR/WCAG21/#wcag-2-layers-of-guidance

What are the principles of accessibility?

1. Perceptible

Information and user interface components must be presentable to users in a way that they can perceive.

An example of this are images that are not page backgrounds or decorations, but rather represent something we want to convey to our user.

Figure 4. Smartphone

In this example, we can imagine that this cell phone is on a platform of an online store, so its intention is for the user to see the article.

One way to fix this is by adding the alt attribute to our HTML code.

<img alt="SAMSUNG Galaxy S24 Ultra,Negro,12GB_256GB" src="https://cdn/mifoto.com" />

2. Operable

User and navigation components must be operable

Let's imagine the situation where a person, either temporarily or permanently, cannot use the mouse; otherwise, they could navigate a web page using the keyboard.

In order to read a web page, you need a screen reader. This software helps you navigate within a web page by providing an audio guide with a cursor that changes depending on whether you press certain keys on your keyboard.

I won't cover how screen readers work at this point.

3. Understandable

The information and operation of the user interface must be understandable

The language we use must be understood by everyone. An example of this is a technical acronym, if I say the word a11y, it is quite possible that not everyone is familiar with that term, so it is usually the norm to say the name and put the acronym in parentheses.

accesibility ( a11y )

4. Robust

Content must be robust enough to be interpreted by a variety of agents, including assistive technologies.

In order for our content to be robust, we need to use certain good practices in our HTML ( Hypertext Markup Language) code, which is the code used on all web pages. Some of these practices are:

1. HTML elements must have their start and end tags.

2. HTML elements are ordered in their parent-child relationship correctly.

3. HTML elements do not have duplicate attributes

4. HTML elements that contain the ID attribute are unique, only in exceptional cases is this the case.

5. Accordance

This section lists the requirements for conformance to WCAG 2.1. It also provides information on how to make conformance claims, which are optional. Finally, it describes what it means to support accessibility, as only the ways of using supported technologies can be relied upon to support accessibility for conformance.

This section explains the different levels of acceptance previously discussed (A, AA, AAA) as well as the official guides for all the points to follow.

Conclusion

This was the introduction to what web accessibility is, its origin, its importance and what its 5 basic principles are.

Thank you for taking the time to read this article and I hope you stay tuned for future posts.

K'a'ak'ate ( Goodbye )