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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
10 Hrs
50 Min
58 Seg

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

32/35
Resources

How does comprehension relate to web design?

Usability is the key to a successful digital product. Ensuring that users intuitively understand how to navigate and use a platform is paramount. When we talk about being understandable in web design, we mean creating sites, applications and products that are easy to understand and do not require extra effort from users to interact correctly. This implies employing patterns of frequent use on the web. For example, the use of keystrokes to close modalities is a common and familiar practice in many systems.

What does it mean to be predictable in design?

Predictability in design refers to the ability to anticipate actions and outcomes when interacting with a product. By using familiar patterns, the user can deduce how to use a new application based on previous experiences. This not only improves the learning curve, but also increases the user's sense of confidence, minimizing frustrations in the process.

Benefits of using common patterns

  • Facilitates learning: Users feel comfortable navigating in familiar environments.
  • Increases efficiency: Reduces the time the user spends learning how to use the product.
  • Improves user experience: Reduces the possibility of errors or confusion.

Why is it important to be explicit in the instructions?

Since all users have different levels of knowledge and skill on the web, it is vital to be clear and direct in the instructions. We should not assume that everyone understands implicitly how things work, as this can vary widely due to cultural, educational and personal factors.

Strategies for being explicit

  1. Clear and concise instructions: Write direct texts that leave no room for misinterpretation.
  2. Visual examples: Accompany instructions with images or infographics that facilitate understanding.
  3. Control towers: Implement systems that guide the user step by step through complex tasks.

The inclusion of examples and corrections when mistakes are made improves the user experience, making it more user-friendly and intuitive. Through validated forms, the user receives immediate feedback to help correct possible errors.

Finally, remember that by complying with these principles, we not only improve user-product interaction, but also contribute to a more inclusive and accessible web for everyone. The key is to keep learning and adapting to the diverse needs of the audience, so let's keep exploring, designing and improving!

Contributions 9

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Una frase por ahi dice: “El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de la discapacidad es un aspecto esencial.”

🚁 Ayudando a nuestros usuarios a interactuar correctamente con el sitio

<h4>Apuntes</h4>
  • La 3° Ley de WCAG ⇒ “Ser comprensible”
  • Debemos esforzarnos, para que todas las acciones sean fáciles de entender
  • Nuestras acciones deben ser predecibles es decir que estemos usando patrones que se usan en otras aplicaciones, otros contextos para unas mismas acciones

Debemos dar por sentado que los usuarios interactúan de maneras muy diversas en la web y por tanto, hay que darles productos digitales lo suficientemente accesibles, es decir, flexibles para que puedan obtener la misma información, productos y servicios de nuestra empresa o sitio. Además, hay que dar por hecho que los usuarios se van a equivocar al navegar, por eso debemos ofrecerles mecanismos sencillos que les ayuden a deshacer una acción cometida por error o descuido, regresar al estado o página anterior y resolver de modo rápido y fácil los problemas técnicos que puedan surgir en sus interacciones con nuestro sitio o app.

Siempre debemos pensar en todos los posibles usuarios de nuestros productos web

Modalidades dinamicas, seria un concepto ha validar.

exactamente

👌

Donde puedo encontrar documentacion de Modalidades dinamicas?

muy buena explicacion