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

Adquiere por un a√Īo todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a√Īo

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
0H
31M
49S
Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Estilos de foco y hover

25/35
Recursos

Aportes 20

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Este curso es muy bueno la verdad ūüĎć

Y yo siempre le quitaba los outlines a todo ūüėĀ

Por si quieren saber un poco m√°s de esta pseudo clase: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

La pseudo-clase CSS :focus-within representa un elemento que ha recibido el foco o que contiene un elemento que ha recibido el foco.

La intención es hacer que los estilos sean similares al enfocarnos o interactuar con un elemento de la página sin importar si el usuario está usando el mouse o el teclado.

Muy buena clase. Cosas b√°sica que debemos tener en cuenta al codear.

Estoy impresionado con una chica!, he aprendido con ella lo que jam√°s hab√≠a logrado en a√Īos

Este no es un curso tan b√°sico como dice.

Recursos complementarios:

Me parece gracioso que siempre hable en femenino.

Cuando empecé a ver este curso lo hice más por cumplir este tema en mi ruta de aprendizaje, pero ahora he descubierto mucho más acerca de accesibilidad, es un mundoi muy interesante y con muchas buenas practicas para que personas con dificultades puedan usar nuestros productos

No me qued√≥ claro el uso de focus:within ūüė¶

Tremendo!!! no sabia eso jajajajaj

Crea una navegación accesible para el usuario desde el teclado con CSS

Este curso es muy bueno para los que estamos escribiendo y creando nuestras primeras líneas de código para web

ūüĎĆ

Muy buen reto para esta clase!

Cuál sería la forma correcta de dar estilos al foco de los elementos solamente cuando el usuario esté navegando con el teclado. Entiendo que este es el comportamiento deseado para evitar agregar estilos adicionales, por ejemplo un outline, al hacer click con el ratón.