Uso adecuado de roles en aplicaciones web
Contenido del curso
Karla
Alex Leonardo Rodriguez Carvajal
Sergio Estrella
Profesor
Platzi Team
Fernando Quinteros Gutierrez
Ulises Antonio Sámano Galván
Andrés González
Jose Tellez
Jonathan David Olivos
Bernardo Ayala Montezuma
Mateo Espinosa Cubillos
Camila Galassi Borba
Jose Tellez
Carolina Gómez
Jefred Bedoya
Carolina Gómez
Andrés Felipe Barreto Guio
Sergio Brandon De Lucio Chavero
Robinson Mora Sanchez
Lucas Ramirez
Juliana Gomez
Profesor
Christian David Sánchez
Efraín Hernández García
Andrés Felipe Barreto Guio
Sergio Brandon De Lucio Chavero
Roles de ARIA: Define el tipo general del objeto ( como un artículo, una alerta o un deslizador)
Los roles le comunican al navegadores cuales son las interacciones que debería esperar y cómo se va a usar este objeto en nuestro proyecto. Se usan en situaciones muy especificas, es mejor depender del HTML semántico para comunicar los roles.
Entonces, hay que usar los roles solamente cuando el HTML semántico se nos queda corto para dar accesibilidad a lo que tenemos.
Entendi exactamente lo mismo compañero
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
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>
Friendly suggestion: hubiera sido interesante ver un ejemplo concreto en práctica :) saludos
Hey pero necesitamos ejemplos de esto
Recursos complementarios:
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.
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"
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 .
Gracias
Los roles definen la naturaleza y comportamiento de un elemento para el navegador y los lectores de pantalla, dictando qué interacciones esperar.
Existen Roles definidos? Una lista o algo por el estilo?
Claro que si !!! Mira aqui
Listado de Roles Aria
En qué casos hay que tenerlos en cuenta para usarlos?¿AAA?
Má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
El atributo role define el tipo general del objeto (como un artículo, una alerta o un deslizador).
Los roles se usarían más en aplicaciones complejas no? Como herramientas de G Suite
Estaría bien usar html semantico y adicional role? Ejemplo: <header role="header></header>
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
