Improving the web accessibility of a site with Aria labels

Aria labels are a textual alternative that describes the role of elements on your website. It is recommended to use them toimprove the accessibility of your website.

Why isweb accessibility an important criterion when designing a website?

More than 1 billion people in the world suffer from disabilities. It is essential to include them in your web content creation.

What is an Aria or WAI Aria attribute?

Technically, an aria is a textual definition of the role of an html element. The mozzila browser defines aria as :

"The aria-label attribute is used to define a non-visible caption associated with an HTML element whose meaning is conveyed solely by the visual. For example, a cross to close a modal window."

Web Accessibility

Access to the web is a major concern. There are over a billion people with disabilities (visual, motor, etc.). We therefore believe that :

Google cannot leave 1 billion people "out" when defining the user needs of its search engine.

We are convinced that the accessibility of a website has a direct impact on the website's natural referencing performance. It is therefore more than relevant for us to integrate accessibility in the design and development phase.

The best known web accessibility practices are :

1. The way you choose to display your content or even select the colour and font has a direct impact on the readability of your text. This criterion of text visibility is assessed with the famous WACG AA or AAA score. It defines the legibility of a text on the basis of: text colour / background colour.
2. (Video tutorial: Make your text WACG compliant | Webflow Accessibility)
3. Alternative text (aka alt text) for images can be described as the text description that accompanies an image when your readers cannot see it. It is particularly useful for people with vision problems (such as those using screen readers), but it also helps search engines to understand what you are trying to present and to position your image in the Google Images results pages.
4. (Video tutorial : Images : how to add ALT text tag | Webflow tutorial)

Why use an "aria-label"?

Using aria attributes allows you to specify the role of an element to web robots. It is also good practice for screen readers and for SEO. Using aria is beneficial for :

• Accessibility
• Navigation
• SEO
• Good practice

of your website.

Example of an aria attribute

Some examples of the use of aria labels

aria-role="button"

When using a link as a button, it is important to provide information to the user. (⚠️ If you use a native button element, in Webflow for example, you don't need to add an aria)

aria-controls = modal

If your "button" doesn't lead anywhere in particular, for example if it's there to open a pop-up window or something, crawlers won't know what they're supposed to do with it. By adding an aria-label attribute tag, you can give information about the function of this element to the crawler and make it more easily understandable to screen readers.

This makes it easier to navigate and access your site.

How do I integrate an aria attribute on my web page?

Aria works on the basis of attributes. If you are using a content management system (CMS), like Webflow for example, there is an"Add-Attribute" function available to help you manage each component/element.

Integrating an attribute on Webflow

1. Go to the settings of the element
2. Click on "Add-Attribute".
3. Add your information
4. Click on "Save".

Find the complete documentation onweb accessibility and Client-First translated by Digidop !