Para que foi adicionado o atributo roll?

O atributo role é utilizado no ARIA (Aplicações Ricas de Internet Acessíveis) para definir explicitamente o tipo de interface de utilizador de um elemento. Isto ajuda tecnologias assistivas, como leitores de ecrã, a compreender a finalidade do elemento e transmitir essa informação aos utilizadores com limitações. Complementa a semântica HTML, especialmente para elementos que não têm semântica incorporada, ou quando a semântica padrão não é suficiente.

Por exemplo:

• Um elemento div com o papel button será percebido por leitores de ecrã como um botão, mesmo que não tenha comportamento padrão nem semântica de botão HTML.

<div role="button" tabindex="0" aria-pressed="false">
  Clica em mim
</div>

• O papel navigation num elemento nav (embora nav já tenha semântica de navegação incorporada) pode melhorar a sua interpretação em certos casos.

<nav role="navigation">
  <ul>
    <li><a href="/">Início</a></li>
  </ul>
</nav>

• Alguns widgets complexos criados a partir de elementos não semânticos recebem os seus papéis para uma representação correta:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Aba 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Aba 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Conteúdo da aba 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Conteúdo da aba 2.
</div>

O atributo role classifica os elementos de acordo com a sua função e objetivo, garantindo uma interação mais precisa e útil para utilizadores que usam tecnologias assistivas. É importante usá-lo juntamente com outros atributos ARIA (por exemplo, aria-label, aria-expanded, aria-hidden) que transmitem o estado e as propriedades dos elementos.

Deve lembrar-se:

• A prioridade é sempre dada à semântica nativa do HTML5. Se existir um elemento HTML adequado, utilize-o em vez de simular o seu comportamento através de role e outros atributos ARIA. Por exemplo, utilize <button> em vez de <div role="button">.
• Alterar o papel de um elemento não altera o seu comportamento incorporado. Por exemplo, role="button" num div não o torna focável ou ativável com Space ou Enter sem JavaScript adicional.