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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Iconos

23/35
Recursos

Aportes 12

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Consulta agregarle una etique de title="" a cada enlace no seria correcto!? no romperia el diseño original y le agregaria ese texto para identificar cuando se hace :hover sobre el.

<ul class=“social-media”>
<li>
<a
href=“https://twitter.com/gmzjuliana"
title=“Twitter"
target=”_blank”
><img src=“images/twitter.png” alt=“twitter”
/></a>
</li>
<li>
<a
href=“https://github.com/gmzjuliana"
title=“Github"
target=”_blank”
><img src=“images/github-logo.png” alt=“github”
/></a>
</li>
<li>
<a
href="https://www.linkedin.com/in/gomezjuliana/“
title=“LinkedIn"
target=”_blank”
><img src=“images/linkedin.png” alt=“linkedin”
/></a>
</li>
</ul>

También en este caso serviría agregarle el aria-label a los iconos.

Comparto mi solución y creería que es un poco más legible agregarlos en la parte inferior

🙌 Iconos

<h4>Apuntes</h4>
  • Pensamos que los iconos son universales, pero pueden ser confusos si nunca los has visto o dependiendo de la aplicación que estas usando
  • Para comunicar de una manera más eficiente se podría agregar un texto especificando el icono

RESUMEN: Los iconos pueden a llegar a ser confusos en algunos casos con personas con discapacidades para solucionar esta problemática es importante especificar un texto

En este tema de los iconos, no dependera mucho del contexto? Porque si mi portafolio es de desarrollo pues la persona que entre debe tener conexto a ello, como conocer GitHub, y capaz varias redes sociales. Hablando de una página con público más generico como una e-commerce como Mequeo si debería encargarse más de ese detalle, no?

Es un pequeño análisis sobre el tema y espero opiniones.

En este caso coloque un aria-label para describir que red social es cada enlace y puse un párrafo “Redes sociales” para indicar que es la sección.

Reto Hecho!

Solo agregué este CSS

.social-media img {
  margin-left: 22px;
}

.social-link-text {
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 8px;
}

Acá se podría añadir la imagen y el texto en un contenedor y describir la red con un aria-label :thi

<li><a href=“https://twitter.com/gmzjuliana” target="_blank"
><img src=“images/twitter.png” alt=“twitter”
/><p class=“social-link-text”>Twitter</p></a>
</li>
<li><a href=“https://github.com/gmzjuliana” target="_blank"
><img src=“images/github-logo.png” alt=“github”
/><p class=“social-link-text”>Github</p></a>
</li>
<li><a href=“https://www.linkedin.com/in/gomezjuliana/” target="_blank"
><img src=“images/linkedin.png” alt=“linkedin”
/><p class=“social-link-text”>Linkedin</p></a>
</li>
.social-media{
width: 40%;
}

👌

Reto cumplido 😃

<ul class="social-media">
          <li>
            <a href="https://twitter.com/gmzjuliana" target="_blank">
              <img src="images/twitter.png" alt="Twitter" />
              <p class="social-media-text">Twitter</p>
            </a>
          </li>
          <li>
            <a href="https://github.com/gmzjuliana" target="_blank">
              <img src="images/github-logo.png" alt="Github" />
              <p class="social-media-text">Github</p>
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/in/gomezjuliana/" target="_blank">
              <img src="images/linkedin.png"  alt="LinkedIn" />
              <p class="social-media-text">LinkedIn</p>
            </a>
          </li>
        </ul>

css:

.social-media {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 32px auto 0;
  width: 50%;
}

Cambié el width de 20% a 50% para que no se empalmaran los elementos.
Resultado: