Cargando...

Accesibilidad HTML

Antes, datalist conectaba sugerencias a un input. Accesibilidad es más amplio: toda la página usable con teclado, lectores de pantalla y zoom. Buen HTML — landmarks, labels, alt, encabezados, botones reales — es la base.

Por qué importa la accesibilidad

Algunos navegan sin ratón, amplían texto o escuchan la página. Un gráfico sin alt está silencioso; una búsqueda sin label sin nombre; un div clicable puede no recibir foco. El marcado inclusivo ayuda a todos. Suele ser hábitos al escribir HTML.

Respuesta directa

1) Regiones semánticas y controles nativos. 2) Label en cada control con for/id. 3) Alt significativo para imágenes informativas; alt vacío solo decorativo. 4) Un h1 claro y anidación lógica sin saltos. 5) Tab a enlaces y botones. 6) ARIA cuando el HTML nativo no basta — estructura primero.

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

Búsqueda etiquetada con landmark

Franja de búsqueda: nav con nombre accesible, campo etiquetado y botón real. El lector anuncia la región y el nombre; Tab llega al input y al botón.

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

Leer el demo de búsqueda

  • nav es landmark de navegación; aria-label distingue varios nav
  • label for + input id dan el nombre accesible
  • name es para enviar — aparte del nombre accesible
  • type=search es nativo
  • button real con Enter/Space
  • Lección anterior: sugerencias; aquí nombrar y alcanzar

Encabezados, alt y botón real

Segundo fragmento: h1, h2 anidado, imagen informativa con alt descriptivo y acción como button. Lo opuesto a «haz clic aquí» y gráficos mudos.

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

Leer el demo de estructura

  • Un h1 fija el tema; h2 debajo sin saltar a h4
  • El alt del gráfico dice la idea, no solo «imagen»
  • Decorativo: alt vacío; este gráfico es informativo
  • La acción es button, no div
  • main marca el contenido principal
  • Siguiente lección JavaScript — conserva estos hábitos HTML

Qué arreglar primero

  • Campos sin nombre: label antes del placeholder
  • Imágenes informativas mudas: escribe alt
  • Controles falsos: sustituye div clicable por button/a
  • Sopa de encabezados: restaura un esquema lógico
  • Parches solo-ARIA: usa el elemento nativo si existe
  • Callejones de teclado: todo lo clicable debe llegar con Tab

Práctica — hábitos de toda la página

  1. Demo de búsqueda; quita el label y restaura for/id
  2. Segundo nav con aria-label distinto
  3. Vacía el alt del gráfico; restaura alt significativo
  4. Salta a propósito h1→h4; corrige a h1→h2
  5. Sustituye el botón por div; vuelve al button y Tab
  6. Frase: la accesibilidad empieza con estructura HTML, no papel ARIA
  7. La siguiente lección añade script — mantén labels y botones

Errores fáciles

  • Enlaces «haz clic aquí» sin contexto
  • Imágenes informativas sin alt o con alt vacío
  • Divs clicables que ignoran el teclado
  • Niveles de encabezado solo por tamaño visual
  • Placeholder en lugar de label
  • Roles ARIA sobre marcado roto
  • Olvidar que datalist también necesitaba label

Resumen

  • Accesibilidad = estructura usable para más personas y herramientas
  • Landmarks, labels, alt, encabezados y botones nativos importan
  • El acceso por teclado es parte del trabajo
  • HTML sólido antes de ARIA pesado
  • Datalist era un control; esta lección mira la página
  • Siguiente: añadir JavaScript a páginas HTML

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
5
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 57 de 68
Html Tutorial