What is ARIA (Accessible Rich Internet Applications)?

Question

What is the function of this technology, how to use it or even, when it is necessary to make use of it ?

Answer 1

O/A ARIA is a set of attributes in HTML that provides greater accessibility to people with disabilities (motor, blindness or deafness).

You can see a list of attributes in the W3

You can see the support of browsers here

A simple example of a form with ARIA support:

[role="tooltip"] {
  display: none
}

input:focus + [role="tooltip"] {
	display: block;
	top: 100%;
}

<form action="">
  <fieldset>
<legend>Login</legend>
<div>
  <label for="username">Username</label>
	  <input type="text" id="username" aria-describedby="username-tip" required />
	  <div role="tooltip" id="username-tip">O seu username é o seu email</div>
	</div>
	<div>
	  <label for="password">Password</label>
	  <input type="text" id="password" aria-describedby="password-tip" required />
	  <div role="tooltip" id="password-tip">Escolha uma password que se vai lembrar</div>
	</div>
  </fieldset>
</form>

As you can see the ARIA does not work by magic(magic) it is necessary to make changes to the style of the page to really do something that can help this type of users.

See also:

Aria attributes in Html5

New EDIT - how ARIA increases accessibility after all?

Again I repeat: ARIA does not work by magic(magic) it is necessary to make changes to the style of the page to actually do something that can help this kind of users.

Sometimes all it takes is a little more focus, or an explanation. It is also common for these explanations to be in a more noticeable letter (larger and more readable font).

Other times these users use assistive technology such as screen readers.

There when you use the attribute aria-label the content of label is read to the user. There is specialized software to reproduce these sounds.

Answer 2

What is?

Rich Applications to Make the Internet Accessible - Accessible Rich Internet Applications (ARIA) define ways to make content and web applications more accessible to people with disabilities. It allows you to highlight important content on the page for easy navigation. Because it is a set of special attributes for accessibility, it can be added to any markup language, but is more suitable for HTML.

When necessary and how to use it?

ARIA helps with accessibility, as some screen readers do not recognize the new HTML5 tags, you need information about the role of each tag. For this, he possesses the attribute role, which has a defined set of values to represent each type of information. ARIA defines abstract roles (for general concepts only, not to be used), widget (mostly form elements), document structure and Landmark (areas where the user can find quick access, such as navigation, search, etc.)

The example below shows the fragment of an HTML5 page using a trivial blog structure. With this code, if the page were accessed by a screen reader, the content would not be interpreted.

<header>  
    <div>Nome do Site</div>
    <nav>
        <ul>...</ul>
    </nav>
</header>

<section>  

    <h1>Título 1</h1>

    <div><p>Neste espaço pode ser inserido um formulário.</p></div>

    <article>             
            <h2>Um post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>

    <article>
            <h2>Outro post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>

</section> 

<aside>  
    <h2>Sidebar</h2>
    <ul>...</ul>
</aside>

<footer>Informações do footer.</footer>

With the application of the roles in the following elements:

• header: role="banner". Defines a region that primarily has site-oriented content and not page-specific content.
• Nav: role="navigation". Define a collection of navigation elements (usually links) to navigate the document or related documents.
• Section: role="main". Defines the main content of the document.
• div: role="application". Declares a region for a web application, usually containing forms, as opposed to a simple document.
• article: role="article". Defines a section of a page that consists of a composition that forms an independent part of the document.
• aside: role="complementary". Defines a document support section to complement the main content.
• footer: role="contentinfo". Defines a region that contains information about the document.

With these markings, screen readers can inform the content that the user will find in each section of the code. This is just one of ARIA’s applications, which has other properties to allow interactive elements to be accessible and interoperable.

Examples

The examples were taken from that website.

The element <header>

In HTML5 the element <header> can be used more than once on a page. It can mark the top (or header) of the page as a whole, or the top of page subsections, such as those marked by the elements <section>, <article> or <aside>.

If the element <header> marks the top of the page as a whole we should use the banner value for the role attribute. Only the element <header> that marks the top of the page should receive the banner value in the role attribute:

<header role="banner">
    Conteúdos do topo do site
</header>

If there are elements <header> intended to mark element headers <article>, <section> or <aside> the value of the role attribute in such cases shall be Heading:

<article>
  <header role="heading">
    Cabeçalho do artigo
  </header>
    Conteúdos do artigo
</article>

The value Heading can also be used in tables.

The element <footer>

In HTML5 the element <footer> can be used more than once on a page. It can mark the footer of the page as a whole, or the footer of page subsections, such as those marked by the elements <section>, <article> or <aside>.

If the element <footer> marks the bottom of the page as a whole we should use the value contentinfo for the role attribute. Only the element <footer> that marks the footer of the page should receive the value contentinfo in the role:

<footer role="contentinfo"> 
  Conteúdo do rodapé da página
</footer>

Depending on the nature of the information inserted in the footer of articles or other small sections of the page we should use the value complementary for the role attribute inserted in the element footer:

<footer role="complementary"> 
  Conteúdo informativo de um artigo
</footer>

The element <aside>

The element <aside> is intended to mark content complementary to the main content of the page, that is to say, not crucial but supplementary content. Thus the value complementary for the role attribute is perfect for these cases:

<aside role="complementary">
  Conteúdo suplementar
</aside>

References:

• ARIA
• ARIA DOCUMENTATION
• Documents accessible with HTML5 WAI-ARIA
• HTML5 accessibility with WAI-ARIA Roles
• WAI-ARIA