¿Cuál es el propósito del atributo "rol" en HTML?

La mayoría de los roles que ve se definieron como parte de ARIA 1.0 y luego se incorporaron a HTML a través de especificaciones de soporte como HTML-AAM. Algunos de los nuevos elementos de HTML5 (diálogo, principal, etc.) incluso se basan en los roles originales de ARIA.

http://www.w3.org/TR/wai-aria/

Hay algunas razones principales para usar roles además de su elemento semántico nativo.

Razón # 1. Anular el rol donde ningún elemento del idioma anfitrión es apropiado o, por varias razones, se usó un elemento menos apropiado desde el punto de vista semántico.

En este ejemplo, se utilizó un enlace, aunque la funcionalidad resultante es más parecida a un botón que a un enlace de navegación.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

Los usuarios de 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 as buttons w/o relying on a .button class */
}

[Actualización 7 años después: eliminó el selector * para hacer felices a algunos comentaristas, ya que la peculiaridad del antiguo navegador que requería un selector universal en los selectores de atributos no es necesaria en 2020.]

Razón # 2. Copia de seguridad de la función de un elemento nativo, para admitir navegadores que implementaron la función ARIA pero que aún no han implementado la función del elemento nativo.

Por ejemplo, la función "principal" ha sido compatible con 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 para <main>.

<main role="main">…</main>

Esto es técnicamente redundante, pero ayuda a algunos usuarios y no daña a ninguno. En unos años, esta técnica probablemente se volverá innecesaria para main.

Razón # 3. Actualización 7 años después (2020): como señaló al menos un comentarista, esto ahora es muy útil para elementos personalizados, y se están realizando algunos trabajos de especificación para definir el rol de accesibilidad predeterminado de un componente web. Incluso si/una vez que la API esté estandarizada, es posible que sea necesario anular la función predeterminada de un componente.

Nota/Respuesta

También escribiste:

Veo que algunas personas inventan las suyas. ¿Está permitido o es un uso correcto del atributo de rol?

Ese es un uso permitido 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, sólo link y note son roles válidos, por lo que el rol de enlace se aplicará en la API de accesibilidad de la plataforma porque es lo primero. Si usa funciones personalizadas, asegúrese de que no entren en conflicto con ninguna función definida en ARIA o el idioma host que está utilizando (HTML, SVG, MathML, etc.)

Según tengo entendido, los roles se definieron inicialmente por XHTML pero quedaron obsoletos. Sin embargo, ahora están definidos por HTML 5, consulte aquí: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

El propósito del atributo de rol es identificar al software de análisis la función exacta de un elemento (y sus elementos secundarios) como parte de una aplicación web. Esto es principalmente como una cuestión de accesibilidad para los lectores de pantalla, pero también puedo verlo como útil para los navegadores integrados y los raspadores de pantalla. Para que sea útil para el cliente HTML inusual, el atributo debe establecerse en uno de los roles de la especificación que vinculé. Si crea la suya propia, esta funcionalidad 'futura' no puede funcionar; un comentario sería mejor.

Prácticas aquí: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

¿Es necesario este atributo de rol?

Respuesta Sí.

• El atributo de rol es necesario para admitir aplicaciones de Internet enriquecidas accesibles (WAI-ARIA) para definir roles en lenguajes basados ​​en XML, cuando los idiomas no definen su propio atributo de rol.
• Aunque esta es la razón por la cual el atributo de rol es publicado por el Grupo de Trabajo de Protocolos y Formatos, el atributo también tiene casos de uso más generales.

Te proporciona:

• Accesibilidad
• Adaptación del dispositivo
• Procesamiento del lado del servidor
• Descripción de datos complejos,...etc.

Me doy cuenta de que esta es una vieja pregunta, pero otra posible consideración dependiendo de sus requisitos exactos es que validar en https://validator.w3.org/ genera advertencias de la siguiente manera:

Advertencia: el rol de formulario no es necesario para el formulario de elemento.

El atributo de función mejora principalmente la accesibilidad para las personas que usan lectores de pantalla. Para varios casos lo usamos, como accesibilidad, adaptación de dispositivos, procesamiento del lado del servidor y descripción de datos complejos. Saber más clic: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute.