Saltar la navegación

💡 Guía rápida: Optimización de tu Web

🔧Mejorar la Accesibilidad

✅ Imágenes: texto alternativo

Toda imagen debe tener alt:

<img src="imagen.jpg" alt="Alumno trabajando con un portátil en clase">

✔ Bien: describe lo que se ve
✖ Mal: alt="imagen1" o dejarlo vacío

👉 Esto ayuda a lectores de pantalla y también al posicionamiento web.

✅ Audio y vídeo: controles visibles

Nunca uses autoplay.

<audio controls>
<video controls>

✔ El usuario decide cuándo reproducir
✔ Personas con dificultades auditivas no se ven forzadas

Si el vídeo es importante, añadir subtítulos es un plus de accesibilidad (en YouTube es fácil).

✅ Estructura semántica

Usa etiquetas con significado:

<header>
<main>
<section>
<footer>

👉 Esto permite que:

  • Un lector de pantalla entienda la página
  • El contenido tenga un orden lógico

✅ Contraste y legibilidad

  • Texto oscuro sobre fondo claro (o al revés).
  • Evita letras muy pequeñas.
  • No uses colores para transmitir información importante sin apoyo de texto.

Mejorar la Usabilidad

✅ Organización clara

Tu web debe tener:

  • Título claro
  • Secciones bien diferenciadas
  • Espacios en blanco (no todo apelotonado)

Ejemplo correcto:

<section>
  <h2>Vídeo</h2>
  <p>Explicación breve del contenido</p>
</section>

👉 El usuario sabe qué va a ver antes de verlo.

✅ Diseño responsive

El contenido debe adaptarse al tamaño de pantalla.

En vuestra práctica:

  • Imágenes al 100% del contenedor
  • Vídeos y mapas con proporción 16:9
  • Nada que “se salga” de la pantalla en móvil

Esto no es un extra, hoy en día es obligatorio.

✅ No sobrecargar de multimedia

Más no es mejor.

✔ Un audio con sentido
✔ Un mapa si aporta información
✔ Un vídeo relevante

✖ Música de fondo innecesaria
✖ Vídeos enormes que distraen
✖ Mapas sin contexto

👉 La usabilidad también es saber qué no poner.

✅ Mensajes claros

Evita textos ambiguos:

  • “Pulsa aquí” → ¿para qué?
  • “Más info” → ¿sobre qué?

Mejor:

  • “Ver ubicación en el mapa”
  • “Reproducir vídeo explicativo”

Creado con eXeLearning (Ventana nueva)