El problema del HTML sin semántica
Un sitio construido con divs anidados puede verse igual que uno con HTML semántico. Pero para Google, para lectores de pantalla y para el desarrollador que lo mantiene meses después, la diferencia es enorme.
Las etiquetas semánticas que más importan
header: encabezado de la página o sección, con logo y navegación principal. nav: bloque de navegación, permite a lectores de pantalla saltar directo a la navegación. main: contenido principal, solo debe haber uno por página. article: contenido autónomo como un post de blog o una noticia. section: agrupación temática que siempre debe tener un heading. aside: contenido relacionado pero no esencial como sidebar o widgets. footer: pie de página con datos de contacto y links legales.
La jerarquía de headings: el error más frecuente
Solo debe haber un h1 por página. Los h2 son secciones principales, los h3 son subsecciones de esos h2. Nunca saltes niveles por razones visuales: si querés un texto más pequeño, usá CSS. Google usa los headings para entender la estructura del contenido.
Accesibilidad básica que todo sitio debería tener
- Todas las imágenes deben tener alt text descriptivo, o alt vacío si son decorativas.
- Los links deben tener texto descriptivo. 'Hacé click aquí' no dice nada fuera de contexto.
- El contraste entre texto y fondo debe cumplir un ratio mínimo de 4.5:1.
- El sitio debe ser navegable solo con teclado (Tab, Enter, flechas).
- Los formularios deben tener labels asociados a cada input.
ARIA: cuándo usarlo y cuándo no
La regla de oro: no uses ARIA si hay un elemento HTML nativo que hace lo mismo. Un button con role='button' es redundante. Un div con role='button' es un parche que indica que deberías usar un button real.