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 link
y note
son 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.)
[role="button"]
voluntad ahorrará tener que hacera[role="button"], span[role="button"]
role
en general.Según tengo entendido, los roles fueron definidos inicialmente por XHTML pero fueron desaprobados. 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 cosa de accesibilidad para lectores de pantalla, pero también puedo verlo como útil para navegadores integrados y raspadores de pantalla. Para ser útil para el cliente HTML inusual, el atributo debe establecerse en uno de los roles de la especificación que vinculé. Si crea el suyo propio, esta funcionalidad 'futura' no puede funcionar; un comentario sería mejor.
Datos prácticos aquí: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
fuente
Respuesta: sí .
Te proporciona:
fuente
Me doy cuenta de que esta es una pregunta antigua, pero otra posible consideración dependiendo de sus requisitos exactos es que la validación en https://validator.w3.org/ genera advertencias de la siguiente manera:
fuente
El atributo de rol 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. Conozca más haga clic en: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .
fuente