Uso adecuado de roles en aplicaciones web

Clase 18 de 35 • Curso de Accesibilidad Web

Contenido del curso

Dominar las bases de la accesibilidad

Presentar el proyecto

7
Creación de un Portafolio Accesible con HTML, CSS y JavaScript
05:27 min

Evaluar la accessibilidad de sitios web

Refactorizar HTML para ser mas accessible

Utilizar CSS para aumentar la acessibilidad de un sitio web

Extender la accesibilidad usando JavaScript

Conclusión

35
Accesibilidad Web: Mejora Continua y Pruebas Prácticas
02:16 min

Tomar examen

Resumen

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

Comentarios

Karla

student•

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.

Alex Leonardo Rodriguez Carvajal

student•

Sergio Estrella

teacher•

Entonces, hay que usar los roles solamente cuando el HTML semántico se nos queda corto para dar accesibilidad a lo que tenemos.

Platzi Team

student•

Entendi exactamente lo mismo compañero

Fernando Quinteros Gutierrez

student•

Apuntes

Definen el tipo general del objeto (como un artículo, una alerta o deslizador)
Los roles comunican al navegador cuales son las interacciones que debería esperar y como se va usar este objeto dentro de la página o aplicación
Se usan en ocasiones especiales es mejor usar HTML semántico para no meterse en agregar roles a todos los elementos
Es una especificación difícil de usar y se debe saber muy bien cómo usar
Especifican de cómo se navega en esa sección
Los navegadores, en especial los lectores de pantalla navegan diferentes roles en diferentes estilos
Ejemplo ⇒
- Articulo ⇒ Poca Interacción
- Formulario ⇒ Mucha Interacción

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

student•

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

student•

Friendly suggestion: hubiera sido interesante ver un ejemplo concreto en práctica :) saludos

Jose Tellez

student•

Hey pero necesitamos ejemplos de esto

Jonathan David Olivos

student•

Recursos complementarios:

ARIA Roles

Bernardo Ayala Montezuma

student•

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

student•

Los roles definen el tipo general del objeto (como un artículo, una alerta o un deslizador)
Comunican al navegador cuales son las interacciones que se debe esperar y como se va a usar este objeto dentro de nuestra página o aplicación
Se usan en situaciones muy específicas
Es una especificación muy difícil de usar
Los navegadores y especialmente los lectores de pantalla navegan diferentes roles en diferentes estilos

Camila Galassi Borba

student•

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

student•

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 .

Vienen ya predeterminados, debe escoger entre los que hay
No cambian el comportamiento del elemento, pero si cambian el arbol de accesibilidad
Hay restricciones en los atributos role que se aplican a algunos elementos
Le comunican al navegador como será la interacción de tal elemento
No hay que usarlos mucho solo en situaciones muy especificas (¿Cuáles? excelente pregunta) Usalos en esas situaciones donde el HTML semantico no es suficiente para describir un elemento, por ejemplo, los popup

Carolina Gómez

student•

Gracias

Carolina Gómez

student•

ARIA Roles: uno de los atributos de ARIA que podríamos usar en estas aplicaciones, son los roles
Los roles definen el tipo general del objeto, como un artículo, una alerta o un deslizador
Los roles de comunican al navegador, cuáles son las interacciones que debería esperar y cómo se va a usar este objeto dentro de nuestra página de nuestra aplicación
La profe nos hace la advertencia, los roles sólo se usan en situaciones muy específicas
Por eso nos sugiere que mejor dependamos del HTML, semántico para comunicar los roles y no meterse, agregarle roles a todos nuestros elementos, o algunos elementos y dejar otros elementos atrás
Es una especificación muy difícil de usar y hay que saber cuáles son los momentos apropiados
Los roles, comunican diferentes interacciones a navegadores y lectores de pantalla de cómo se navega en esa sección
Los navegadores, especialmente los lectores de pantalla navegan Diferentes roles, en diferentes estilos, Digamos, por ejemplo, un artículo, un artículo en un lector de pantallas Sabes que no va a esperar mucha interacción del usuario
Mientras que en un formulario que es mucha interacción con el usuario, el lector de pantalla tiene el método para esperar esa interacción para manejarla cuando esta pasa
Los roles se usan muy ligeramente

Andrés Felipe Barreto Guio

student•

Existen Roles definidos? Una lista o algo por el estilo?

Sergio Brandon De Lucio Chavero

student•

Claro que si !!! Mira aqui

Robinson Mora Sanchez

student•

Listado de Roles Aria

Lucas Ramirez

student•

En qué casos hay que tenerlos en cuenta para usarlos?¿AAA?

Juliana Gomez

teacher•

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

Christian David Sánchez

student•

El atributo role define el tipo general del objeto (como un artículo, una alerta o un deslizador).

Efraín Hernández García

student•

Los roles se usarían más en aplicaciones complejas no? Como herramientas de G Suite

Andrés Felipe Barreto Guio

student•

Estaría bien usar html semantico y adicional role? Ejemplo: <header role="header></header>

Sergio Brandon De Lucio Chavero

student•

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

Miguel Angel Reyes Moreno

student•

Los roles definen el tipo general del objeto (como un artículo, una alerta o un deslizador). Le comunican al navegador cuáles son las interacciones que debería esperar y cómo se va a usar el objeto dentro de nuestra página o aplicación. Solo se usan en situaciones muy específicas y difíciles de usar. Es mejor usar HTML semántico.

<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>

<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>

Uso adecuado de roles en aplicaciones web

Dominar las bases de la accesibilidad

Bases de Accesibilidad Web y Creación de Portafolio Personal

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

Pautas de Accesibilidad Web: Comprensión y Aplicación

Pautas de Accesibilidad Web: Principios y Criterios WCAG

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

Pruebas de Accesibilidad Web con Lighthouse en Chrome

Simulación de Accesibilidad Visual en Sitios Web

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

HTML Semántico para Mejora de Accesibilidad Web

HTML Semántico: Mejora la Estructura de tu Página Web

Refactorización de HTML para Mejorar Semántica y Accesibilidad

Mejorando la Accesibilidad Web con HTML Semántico

Uso de WAI-ARIA para Mejorar la Accesibilidad Web