Qual é o objetivo do atributo "role" em HTML?

Continuo vendo atributos de função no trabalho de algumas pessoas. Eu também o uso, mas não tenho certeza sobre seu efeito.

Por exemplo:

<header id="header" role="banner">
    Header stuff in here
</header>

Ou:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Ou:

<section id="main" role="main">
     Main content stuff in here
</section>

Esse atributo de função é necessário?

Esse atributo é melhor para a semântica?

Melhora o SEO?

Uma lista de papéis pode ser encontrada aqui , mas vejo que algumas pessoas fazem seus próprios. Isso é permitido ou o uso correto do atributo role?

Alguma idéia sobre isso?

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 linke notesã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.)

Pelo que entendi, as funções foram inicialmente definidas pelo XHTML, mas foram descontinuadas. No entanto, agora eles são definidos pelo HTML 5, veja aqui: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

O objetivo do atributo role é identificar para analisar o software a função exata de um elemento (e seus filhos) como parte de um aplicativo da web. Isso é principalmente uma questão de acessibilidade para os leitores de tela, mas também posso vê-lo como útil para navegadores incorporados e raspadores de tela. Para ser útil para o cliente HTML incomum, o atributo precisa ser definido como uma das funções da especificação que vinculei. Se você criar sua própria, essa funcionalidade 'futura' não funcionará - um comentário seria melhor.

Aspectos práticos aqui: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Esse atributo de função é necessário?

Resposta: Sim .

• O atributo de função é necessário para oferecer suporte a Aplicativos Acessíveis à Internet Ricos ( WAI-ARIA ) para definir funções em idiomas baseados em XML, quando os idiomas não definem seu próprio atributo de função.
• Embora esse seja o motivo pelo qual o atributo role é publicado pelo grupo de trabalho Protocolos e Formatos , o atributo também possui casos de uso mais gerais.

Ele fornece:

• Acessibilidade
• Adaptação do dispositivo
• Processamento no servidor
• Descrição de dados complexos, ... etc.

Sei que essa é uma pergunta antiga, mas outra consideração possível, dependendo de seus requisitos exatos, é que a validação em https://validator.w3.org/ gera avisos da seguinte maneira:

Aviso: A função do formulário é desnecessária para o formulário do elemento.

O atributo de função aprimora principalmente a acessibilidade para pessoas que usam leitores de tela. Para vários casos, usamos-o como acessibilidade, adaptação de dispositivo, processamento no servidor e descrição de dados complexos. Saiba mais, clique em: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .