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

Overview retos resueltos con CSS

26/35
Recursos

Aportes 12

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Dif铆cil los retos, los hice toditos pero si me costaron sobre todo porque no soy front end programmer pero super interesante desde el punto que necesito que es para hacer auditoria de estos temas 鈥 super bueno

Para los compa帽eros que de pronto no entrado en el mundo del frontend o llevan poco tiempo, quisiera que tuvieran en cuenta un consejo de buenas pr谩cticas para cuando escriban CSS.

El orden de las propiedades dentro de los selectores si importa y tienen un orden:

  1. Position
  2. Modelo de caja
  3. Texto
  4. color
  5. Miscelanea

ejemplo:

.button {
  display: block;
  width: 220px;
  height: 40px;
  position: relative;
  text-transform: uppercase;
  background-color: #fff;
  @extend h1;
}

Muy buenos Retos! me tomo poco tiempo pero lo logr茅 al fin

Me gusta que Juliana deja los retos clases atr谩s y en una los hace todos. Esto permite ver otras formas de solucionar algo o aprender una nueva soluci贸n

En otros cursos cursos que he tomado en platzi los profesores dicen: Te reto y deja as铆鈥

Este curso me ha despertado mayor inter茅s por la programaci贸n Frontend. La maestra es amena, su tono de voz agradable, domina bien los temas y sabe transmitir sus conocimientos de manera 贸ptima.

yo los solucione de esta manera los inptu
.form-label, .message-input, .contact-section button {
color: white;
font-size: 1.5rem;

Vamos bien, aprendiendo sobre todo 馃槂

Me cost贸 sobre todo el de focus-within 馃槄
Pero los pude hacer todos! 馃槃

C贸mo puedo hacer para que el foco lo reciba un elemento hijo y no el elemento padre, por ejemplo tengo una etiqueta <a> que adentro tiene un <svg> quiero que el foco lo reciba <svg> y no <a> c贸mo puedo hacerlo?

馃憣

Buenos retos, pero deber铆an advertir que para tomar este curso hay que tener conocimientos b谩sicos de CSS.