La mayoría de los papeles que se ven se definieron como parte de ARIA 1.0, y luego más tarde incorporado en HTML5. Algunos de los nuevos elementos HTML5 (diálogo, principal, etc.) incluso se basan en los roles originales de ARIA.
http://www.w3.org/TR/wai-aria/
Hay dos razones principales para usar papeles, además de su elemento semántico nativa.
Motivo n. ° 1. Reemplazando la función donde no es apropiado un elemento de lenguaje de host o, por varias razones, se utilizó un elemento menos apropiado semánticamente.
En este ejemplo, se utilizó un enlace, aunque la funcionalidad resultante es más parecida a un botón que un enlace de navegación.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Los lectores de pantalla oír esto como un botón (a diferencia de un enlace), y se puede utilizar un selector de atributos CSS para evitar clase-itis y div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Motivo # 2. Copia de seguridad del rol de un elemento nativo, para admitir navegadores que implementaron el rol ARIA pero que aún no implementaron el rol del elemento nativo.
Por ejemplo, la función "principal" ha sido admitida en 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 ninguno. En unos pocos años, esta técnica probablemente será innecesaria.
También escribió:
veo algunas personas conforman su propia cuenta. ¿Está permitido o un uso correcto del atributo de rol?
Ese 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, sólo se link y note son papeles válidos, por lo que el papel de enlace se pueden aplicar, ya que es lo primero. Si utiliza las funciones personalizadas, asegúrese de que no entren en conflicto con cualquier papel definido en ARIA o la lengua de acogida que está usando (HTML, SVG, MathML, etc.)
Este enlace puede ser útil también. Usando ARIA en HTML. http://rawgithub.com/w3c/aria-in-html/master/index.html –
¿Por qué pusiste el selector universal delante de [role = "button"]? – Evgeny
@EugeneXa mi suposición es señalar cualquier elemento con el '[role =" button "]' guardará tener que hacer 'a [role =" button "], span [role =" button "]' – ngplayground