Accesibilidad web desde cero: HTML semántico y alt

Ya sabes que <div> es una caja genérica que no significa nada. HTML tiene etiquetas que sí dicen qué es cada parte de la página: <header>, <nav>, <main>, <footer>. Un lector de pantalla las usa para saltar directo a lo que la persona busca.

<header>
  <h1>Mi página</h1>
  <nav>
    <a href="#">Inicio</a>
    <a href="#">Contacto</a>
  </nav>
</header>

<main>
  <h2>Contenido principal</h2>
  <p>Esto es lo importante de la página.</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

Ya viste alt en el primer tutorial de HTML. Acá el detalle importante: qué escribir adentro.

<!-- Mal: no dice nada útil -->
<img src="/img/logo-icon.png" alt="imagen">

<!-- Mal: repite lo obvio del contexto -->
<img src="/img/logo-icon.png" alt="logo">

<!-- Bien: describe lo que la imagen aporta -->
<img src="/img/logo-icon.png" alt="Logo de JICA LABS, un pulpo con un controlador de videojuegos">

<!-- Si la imagen es puramente decorativa, alt vacío es correcto -->
<img src="/img/adorno.png" alt="">

Un botón que solo tiene un ícono —una lupa, una X para cerrar— no dice nada por sí solo a un lector de pantalla. aria-label le agrega un nombre que solo esa tecnología escucha.

<style>
  button { font-size: 20px; padding: 10px 14px; border-radius: 8px; border: 0;
           background: #34a2fd; color: #04122b; margin-right: 8px; }
</style>

<!-- Sin aria-label, un lector de pantalla solo dice "botón" -->
<button>🔍</button>

<!-- Con aria-label, dice exactamente qué hace -->
<button aria-label="Buscar">🔍</button>
<button aria-label="Cerrar">✕</button>

Un texto gris claro sobre blanco se ve elegante en tu pantalla nueva, y es casi ilegible para alguien con baja visión, o bajo el sol. La razón de contraste entre texto y fondo tiene un mínimo recomendado.

<div style="font-family:sans-serif;display:flex;flex-direction:column;gap:14px;padding:16px">
  <p style="background:#fff;color:#ccc;padding:12px;margin:0">
    Contraste malo: 1.6:1, casi no se lee
  </p>
  <p style="background:#fff;color:#767676;padding:12px;margin:0">
    Contraste al límite: 4.5:1, el mínimo recomendado (AA)
  </p>
  <p style="background:#fff;color:#1a1a1a;padding:12px;margin:0">
    Contraste bueno: 16:1, se lee sin esfuerzo
  </p>
</div>

Usar etiquetas semánticas en vez de <div> para todo, escribir un alt que describa de verdad, nombrar botones sin texto con aria-label, y por qué el contraste de color no es solo estética.

Para cerrar el curso, algo que conecta directo con todo lo que hiciste: cómo hacer que Google encuentre tu página.

Accesibilidad web

Web accessibility