A maioria das funções que você vê foi definida como parte do ARIA 1.0 e, posteriormente, incorporada ao HTML5. Alguns dos novos elementos HTML5 (caixa de diálogo, principal etc.) são baseados nas funções ARIA originais.
http://www.w3.org/TR/wai-aria/
Há dois motivos principais para usar funções, além do elemento semântico nativo.
Razão # 1. Substituindo a função em que nenhum elemento de idioma do host é apropriado ou, por vários motivos, um elemento menos semanticamente apropriado foi usado.
Neste exemplo, um link foi usado, mesmo que a funcionalidade resultante seja mais parecida com um botão do que um link de navegação.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Os leitores de tela ouvirão isso como um botão (ao contrário de um link), e você pode usar um seletor de atributos CSS para evitar class-itis e div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Razão # 2. Fazendo backup da função de um elemento nativo, para suportar navegadores que implementaram a função ARIA, mas ainda não implementaram a função do elemento nativo.
Por exemplo, a função "principal" é suportada nos navegadores há muitos anos, mas é uma adição relativamente recente ao HTML5, pois muitos navegadores ainda não suportam a semântica <main>
.
<main role="main">…</main>
Isso é tecnicamente redundante, mas ajuda alguns usuários e não prejudica nenhum. Em alguns anos, essa técnica provavelmente se tornará desnecessária.
Você também escreveu:
Eu vejo algumas pessoas inventando as suas. Isso é permitido ou o uso correto do atributo role?
Esse é um uso válido do atributo, a menos que uma função real não esteja incluída. Os navegadores aplicarão a primeira função reconhecida na lista de tokens.
<span role="foo link note bar">...</a>
Fora da lista, apenas link
e note
são funções válidas; portanto, a função de link será aplicada porque é a primeira. Se você usar funções personalizadas, verifique se elas não conflitam com nenhuma função definida no ARIA ou no idioma do host que você está usando (HTML, SVG, MathML etc.)