INFOTEP Técnico en Programación de Páginas Web: HTML5: estructura, semántica y accesibilidad

Aquí se comprueba si sabes construir documentos HTML5 válidos, con estructura semántica y accesibles para teclado y lectores de pantalla. El examen suele presentar un fragmento de marcado y pedir el error, o describir un formulario y preguntar qué atributo falta.

Estructura y semántica

• El documento parte de <!DOCTYPE html>, html con lang, head con meta charset y meta name=viewport, y body.
• Los landmarks nativos son header, nav, main, footer, aside, section y article. main debe ser único y contener el contenido principal.
• Los encabezados h1 a h6 forman una jerarquía; no se elige el nivel por el tamaño visual. Un article puede tener su propio h1.
• section agrupa contenido con un tema y normalmente lleva encabezado; div queda para agrupación sin significado.

Accesibilidad

• Toda imagen informativa necesita alt descriptivo; una decorativa usa alt="" para que el lector la ignore. Nunca se omite alt en imágenes con contenido.
• Los campos de formulario necesitan label asociado por for e id. El placeholder no sustituye a la etiqueta.
• fieldset y legend agrupan radios o casillas relacionadas. button debe declarar type=submit o type=button.
• En tablas de datos, th con scope=col o scope=row; las tablas de maquetación están desaconsejadas.
• ARIA se usa cuando no existe un elemento nativo adecuado; aria-label nombra un control sin texto visible. Los enlaces deben tener texto comprensible, no solo “clic aquí”.

Ejemplo trabajado

Un formulario de acceso correcto sería: <form action=/login method=post>, <label for=email>Correo</label>, <input id=email name=email type=email autocomplete=email required>, <label for=pass>Contraseña</label>, <input id=pass name=password type=password autocomplete=current-password required> y <button type=submit>Entrar</button>. El razonamiento: label y id coinciden, los tipos activan teclados y validación, autocomplete ayuda a gestores de contraseñas, required da validación nativa y el botón declara su comportamiento. La validación del servidor sigue siendo obligatoria.

Errores que cuestan puntos

Usar placeholder como etiqueta; poner alt vacío en una foto informativa; construir botones con div y onclick; anidar main dentro de section; repetir nav sin aria-label; romper la jerarquía de encabezados por estética.