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

Iconos

23/35
Recursos

Aportes 15

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

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=鈥渟ocial-media鈥>
<li>
<a
href=鈥渉ttps://twitter.com/gmzjuliana"
title=鈥淭witter"
target=鈥漘blank鈥
><img src=鈥渋mages/twitter.pngalt=鈥渢witter鈥
/></a>
</li>
<li>
<a
href=鈥渉ttps://github.com/gmzjuliana"
title=鈥淕ithub"
target=鈥漘blank鈥
><img src=鈥渋mages/github-logo.pngalt=鈥済ithub鈥
/></a>
</li>
<li>
<a
href="https://www.linkedin.com/in/gomezjuliana/鈥
title=鈥淟inkedIn"
target=鈥漘blank鈥
><img src=鈥渋mages/linkedin.pngalt=鈥渓inkedin鈥
/></a>
</li>
</ul>

Comparto mi soluci贸n y creer铆a que es un poco m谩s legible agregarlos en la parte inferior

Tambi茅n en este caso servir铆a agregarle el aria-label a los iconos.

馃檶 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 鈥淩edes 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

Profesora, Suena m谩s incluyente si se dirige a mujeres y hombres, y no solo a mujeres鈥

Yo agregu茅 la descripci贸n de los iconos con <figure> y <figcaption>, entiendo que estas etiquetas se pueden usar en este caso, esta es la estructura de cada elemento de la lista
.

 <li>
          <a href="https://twitter.com/gmzjuliana" alt="twitter" target="_blank" class="social-network-link">
            <figure>
              <img src="images/twitter.png " alt="twitter de Juliana"/>
              <figcaption>Twitter</figcaption>
            </figure>
          </a>
        </li>

<li><a href=鈥https://twitter.com/gmzjuliana鈥 target="_blank"
><img src=鈥渋mages/twitter.png鈥 alt=鈥渢witter鈥
/><p class=鈥渟ocial-link-text鈥>Twitter</p></a>
</li>
<li><a href=鈥https://github.com/gmzjuliana鈥 target="_blank"
><img src=鈥渋mages/github-logo.png鈥 alt=鈥済ithub鈥
/><p class=鈥渟ocial-link-text鈥>Github</p></a>
</li>
<li><a href=鈥https://www.linkedin.com/in/gomezjuliana/鈥 target="_blank"
><img src=鈥渋mages/linkedin.png鈥 alt=鈥渓inkedin鈥
/><p class=鈥渟ocial-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: