Uso adecuado de roles en aplicaciones web
Contenido del curso
Define el tipo general del objeto ( como un artículo, una alerta o un deslizador)
Los roles le comunican al navegador cuáles son las interacciones que debería esperar y cómo se va a usar este objeto en nuestro proyecto. Se utilizan en situaciones muy específicas, es mejor depender del HTML semántico para comunicar los roles.
Contribución creada con aportes de: Karla
Sergio Estrella
ProfesorEntonces, hay que usar los roles solamente cuando el HTML semántico se nos queda corto para dar accesibilidad a lo que tenemos.
Platzi Team
Entendi exactamente lo mismo compañero
Fernando Quinteros Gutierrez
Apuntes
RESUMEN: Los ARIA roles preparan al navegador o lectores de pantalla a indicar cuales son las interacciones que debería esperar, se usan en ocasiones especiales, en la mayoría de los casos se recomienda usar HTML semántico
Ulises Antonio Sámano Galván
Un buen ejemplo de cuándo utilizar los ARIA roles es con los emojis 🚀 que deben de quedar así:
<span role="img" aria-label="emoji de cohete">🚀</span>
Andrés González
Friendly suggestion: hubiera sido interesante ver un ejemplo concreto en práctica :) saludos
Jose Tellez
Hey pero necesitamos ejemplos de esto
Jonathan David Olivos
Recursos complementarios:
Bernardo Ayala Montezuma
Los roles de ARIA definen el tipo general del objeto. . Sólo se usan en situaciones muy específicas, siempre es mejor depender de HTML semántico para especificar los roles y no agregar roles a todos los elementos ya que esta especificación es compleja de utilizar.
Mateo Espinosa Cubillos
Camila Galassi Borba
Hola! Me falto uno o dos ejemplos de roles bien usados y por que aca si son vitales, y otros contratastando el "se usan en situaciones muy especificas"
Jose Tellez
Sirven para agregar información que interpretan los lectores de pantalla a los elementos de una pagina pero la recomendacion sigue siendo usar HTML semantico .
Carolina Gómez
Gracias
Jefred Bedoya
Los roles definen la naturaleza y comportamiento de un elemento para el navegador y los lectores de pantalla, dictando qué interacciones esperar.
Carolina Gómez
Andrés Felipe Barreto Guio
Existen Roles definidos? Una lista o algo por el estilo?
Sergio Brandon De Lucio Chavero
Claro que si !!! Mira aqui
Robinson Mora Sanchez
Listado de Roles Aria
Lucas Ramirez
En qué casos hay que tenerlos en cuenta para usarlos?¿AAA?
Juliana Gomez
ProfesorMás que todo cuando estas creando tus propios elementos desde zero.. y cuando harías esto? Normalmente para aplicaciones con mucha complejidad, como Google Docs, por ejemplo
Christian David Sánchez
El atributo role define el tipo general del objeto (como un artículo, una alerta o un deslizador).
Efraín Hernández García
Los roles se usarían más en aplicaciones complejas no? Como herramientas de G Suite
Andrés Felipe Barreto Guio
Estaría bien usar html semantico y adicional role? Ejemplo: <header role="header></header>
Sergio Brandon De Lucio Chavero
Esto puede responder tu duda: Here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle. As this is the main header for the site, we've added the banner landmark role to the container element.
<div role="banner"> <a href="#nav" id="skipToMenu" class="skiptocontent">Skip To Keyboard Navigation</a> <img src="images/w3c.png" alt="W3C Logo"> <h2>ARIA Landmarks</h2> <p>Identifying page subsections for easy navigation</p> </div>
We could also have written the above with the HTML header element:
<header> <a href="#nav" id="skipToMenu" class="skiptocontent">Skip To Keyboard Navigation</a> <img src="images/w3c.png" alt="W3C Logo"> <h2>ARIA Landmarks</h2> <p>Identifying page subsections for easy navigation</p> </header>
Fuente
