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

🙌 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

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

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: