La mayoría de los roles que ve se definieron como parte de ARIA 1.0 y luego se incorporaron a HTML5. Algunos de los nuevos elementos HTML5 (diálogo, principal, etc.) se basan incluso en los roles originales de ARIA.
http://www.w3.org/TR/wai-aria/
Hay dos razones principales para usar roles además de su elemento semántico nativo.
Razón # 1. Reemplazar el rol donde ningún elemento del lenguaje host es apropiado o, por varias razones, se utilizó un elemento menos semánticamente apropiado.
En este ejemplo, se utilizó un enlace, aunque la funcionalidad resultante es más como un botón que un enlace de navegación.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Los lectores de pantalla escucharán esto como un botón (en lugar de un enlace), y puede usar un selector de atributos CSS para evitar class-itis y div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Razón # 2.Copia de seguridad de la función de un elemento nativo, para admitir navegadores que implementaron la función ARIA pero aún no han implementado la función del elemento nativo.
Por ejemplo, la función "principal" ha sido admitida en los navegadores durante muchos años, pero es una adición relativamente reciente a HTML5, por lo que muchos navegadores aún no admiten la semántica <main>.
<main role="main">…</main>
Esto es técnicamente redundante, pero ayuda a algunos usuarios y no daña a ninguno. En unos pocos años, esta técnica probablemente se volverá innecesaria.
También escribiste:
Veo que algunas personas hacen las suyas. ¿Está permitido o un uso correcto del atributo de rol?
Es un uso válido del atributo a menos que no se incluya un rol real. Los navegadores aplicarán el primer rol reconocido en la lista de tokens.
<span role="foo link note bar">...</a>
Fuera de la lista, solo linky noteson roles válidos, por lo que el rol de enlace se aplicará porque es lo primero. Si usa roles personalizados, asegúrese de que no entren en conflicto con ningún rol definido en ARIA o el idioma del host que está usando (HTML, SVG, MathML, etc.)