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

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Contrastes de color

22/35
Recursos

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.

Caracter铆sticas del contraste de color

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

Conclusi贸n

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

Conoce qu茅 significa constraste.

Aportes 40

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

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

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

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

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.

No me aparece los datos de contraste

Aqu铆 estuve organizando un poco mi espacio de trabajo para simplificarlo, siempre hay nuevas cositas que hacer.

Jam谩s habr铆a pensado que el blanco sobre verde tuviera una mala relaci贸n de constraste. Supongo que causa problemas para personas con dificultad visual.
.
Muy util esa herramienta de chrome

Yo recomiendo agregar un font-weigth de 700 para que se mire mejor:

.nav-item:hover, .nav-item:hover a {
  background-color: var(--verde);
  color: var(--gris-oscuro);
  font-weight: 700;
  cursor: pointer;
}

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 鈥榮hades鈥 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