¿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 HTML5 (diálogo, principal, etc.) incluso se basan en los roles ARIA originales.

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

Mientras que la Primera Regla de Aria establece:

Si puede utilizar un elemento HTML nativo [HTML51] o un atributo con la semántica y el comportamiento que necesita ya integrados, en lugar de reutilizar un elemento y agregar una función, estado o propiedad ARIA para hacerlo accesible, entonces hágalo.

Existen algunas razones principales para utilizar roles además de su elemento semántico nativo.

Razón #1. Anular la función cuando ningún elemento del idioma anfitrión es apropiado o, por diversas razones, se utilizó un elemento semánticamente menos apropiado.

En este ejemplo, se utilizó un enlace, aunque la funcionalidad resultante se parece más 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 pueden usar un selector de atributos CSS para evitar clases y divisiones.

[role="button"] {
  /* style these as buttons w/o relying on a .button class */
}

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

Razón #2. Realizar una 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 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 de <main>.

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

Esto es técnicamente redundante, pero ayuda a algunos usuarios y no perjudica a ninguno. En unos años, esta técnica probablemente será 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 especificaciones para definir la función de accesibilidad predeterminada de un componente web. Incluso si/una vez que esa 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 propias. ¿Está eso 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, solo linky noteson 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 roles personalizados, asegúrese de que no entren en conflicto con ningún rol definido en ARIA o el lenguaje anfitrión que esté usando (HTML, SVG, MathML, etc.)

Sep 06 '2013 18:09 James Craig