Iconos

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>

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

• 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

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=“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: