Papéis definem o que algo é

Uma função informa à tecnologia assistiva que tipo de coisa é um elemento: botão, aba, alerta ou caixa de diálogo. Ela responde à pergunta: o que é isto?

A maioria das tags HTML já traz uma função implícita. Um nav é uma navegação, um h1 é um título e um botão é um botão.

Quando nenhuma tag nativa é adequada, você define manualmente o atributo role para dar a um elemento genérico uma identidade reconhecida.

Funções de componentes descrevem elementos interativos que às vezes você cria manualmente: tab, slider, switch, menuitem e treeitem.

Funções de regiões dividem a página em áreas como banner, principal e navegação, permitindo que os usuários pulem diretamente para uma seção.

Funções de estrutura descrevem conteúdo estático: título, lista, item de lista e figura. Elas identificam o formato das suas informações.

Um elemento recebe uma função. Você não pode fazer algo ser um botão e um link ao mesmo tempo; escolha a identidade que corresponde à sua finalidade real.

Escolher uma função é assumir um compromisso. role=tab significa que você precisa fornecer um elemento pai tablist, suporte ao teclado e um tabpanel associado.

Nunca atribua uma função a um elemento que já tenha a função correta. Uma função redundante em um botão verdadeiro apenas acrescenta ruído e risco.

role=presentation remove a semântica de um elemento. É útil para uma tabela usada no layout, mas perigoso em qualquer coisa que os usuários precisem compreender.

Defina primeiro a função correta. Estados e propriedades só fazem sentido quando o elemento tem uma identidade clara à qual possam ser associados.

Você aprendeu que uma função dá nome ao que um elemento é. Prefira funções implícitas nativas, adicione uma única função explícita quando necessário e respeite o compromisso assumido.