Dominar las bases de la accesibilidad

1

¿Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas automáticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

15

Usando HTML semántico en el contenido principal de nuestro sitio

16

Usando HTML semántico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios dinámicos

Conclusión

35

Siguientes pasos

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Contrastes de color

22/35
Recursos

Aportes 35

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Chrome no deja de sorprenderme con todas las herramientas que incluye y pasaba por alto 🤯

Dejo un programa muy util para seleccionar colores de la pantalla, crear paletas con ellos y de paso tambien podés ver el contraste entre dos colores: Swach.io

Guau, tanto tiempo usando el selector de color y no me había percatado de que te indicaba el contraste 😪

🎴 Contrastes de color

<h4>Ideas/conceptos claves</h4>

El contraste de color es la diferencia existente entre dos o más colores que interactúan en un diseño de forma que afectan al modo en el cual se percibe. El color según sus diferentes características influye en el efecto que causa en las personas

<h4>Apuntes</h4>
  • Los contrastes de color se refieren a la diferencia del color de fondo y color del texto
  • Normalmente es tarea del diseñador encargarse de este aspecto, pero como desarrolladores podemos encargarnos de detectar problemas de contraste para posteriormente comunicar el problema
  • Si el contraste es muy bajo no se puede ver el texto correctamente
  • Podemos usar Chrome Dev Tools para revisar el contraste de los colores de los textos
    • Nos indicaran a que nivel de WCAG estaremos llegando

RESUMEN: El contraste de color es importante para llegar a más personas, se trata de la diferencia del color de fondo y del color del texto. Podemos usar las Chrome Dev Tools para verificar este aspecto

No me gusta usar etiquetas <p class="form-label"> cuando se podría utilizar un <label>… No es semántico eso…

En el curso de DevTools nos enseñan todos esto trucazos 😁

Y yo les dejo una herramienta extra para que puedan jugar con su paleta de colores cuando estén haciendo sus proyectos
llink: https://material.io/resources/color/#!/?view.left=1&view.right=0

Que interesante. No conocía esa herramienta de Chrome Dev Tools 😧

<p class="form-label">Nombre</p>

Esto no lo veo muy conveniente, para eso están los labels.
Ahí no está cumpliendo con el HTML semántico.

Me parece muy interesante como podemos apreciar si cumplimos o no con esos Principios de WCAG, específicamente la del contraste con el fondo y las letras a través de Chrome DevTools

no conocía eso de las dev tools con respecto a los colores. buenisimo.

Estoy desarrollando un portafolio propio, para desarrollar todo lo aprendido. Poco a poco voy agregando lo aprendido en el curso.
Les comparto el link:
https://github.com/Christiano0407/Portfolios

No me aparece los datos de contraste

Se ve muy bello el uso de hover para cambiar tanto bgc como color. 😃

Ojalá esto también se pueda implementar para las app móvil, ya que ahora se usa mucho más este dispositivo

Tremendas herramientas que no conocía! Súper útiles.

Diría que hay que tener trabajado, aunque sea pensado la guía de estilo (defines un color primario, defines sus ‘shades’ y sus complementarios y de ahí ya no te sales’. Lo mismo con la tipografía y la escabilidad de su tamaño.

Les recomiendo echarle un vistazo al curso de teoría del color y al de figma, muy util. De hecho, antes de programar se realiza todo el proceso de validación de idea de negocio, validación de idea de producto, prototipados de baja fidelidad y UX testings, prototipado y finalmente ya la programación

Considero que sería directamente mejor por temas de semántica que en lugar de agregar los labels en una etiqueta de p, sería mejor agregarlo en una etiqueta de label

WOW no conocía nada de estoooo , ¡muy interesante! Gracias Juliana.

Qué interesante. No sabía que dentro del mismo inspector tenemos todas esas opciones.

Sorprendido

Me parece buenísimo que Chrome te permita verificar cómo el cambio en el CSS hace que se cumpla con una calificación de WCAG 👏🏽👏🏽

Chrome Dev Tools cuenta con una herramienta que nos dice si cumplimos con las reglas del contraste 😳😳

Hay un curso de Debugging con Chrome Dev Tools
Pero, con lo que he visto, creo que amerita un curso entero para conocer de arriba a abajo toda la herramienta, tiene un montón de utilidades!

Solo agregando esto al CSS se consigue:

.form-container {
  color: var(--blanco);
}```
Podríamos colocar también la etiqueta label con el atributo for apuntando al name del input. Imagino que eso ayuda a la accesibilidad en los formularios. Pero es bueno saber que no tiene por qué ser así para que sea accesible.

Listo! en CSS:

footer label {
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
}

Y en la clase .send-button modifique el color dado que no cumple con los niveles por negro:

color: var(--gris-oscuro);

Cada día me encanta más Chrome DevTools con tantas herramientas que tiene 🤩🤩🤩🤩

DevTools ! Algo nuevo en el contraste de colores para verificar el WCAG. Genial.

Increíble esta herramienta que permite medir el contraste y validar si es el indicado, Chrome lo tiene todo.

Increíble

Recomendadisimo el curso de Chrome DevTools muestran todas las herramientas del navegador que podemos utilizar https://platzi.com/clases/devtools/

A veces ignoramos tantas utilidades importantes solo por desconocimiento, estoy fascinado aprendiendo tanto sobre A11Y 🤯

.form-container .form-label {
  color:var(--blanco);
}

👌

que seca! no me sabia esa parte