Construcción de una landing page accesible

Objetivo práctico

Al terminar esta lección sabrás personalizar y publicar, dentro de WordPress con el editor clásico, la landing page de ejemplo real de este curso, verificando con NVDA que conserva su estructura accesible tras la personalización.

Resultado que obtendrás

Una landing page personalizada con los datos de tu propio negocio, publicada (o lista para publicarse) en tu WordPress, verificada como accesible.

Dónde encaja dentro del sistema final

Esta lección entrega el resultado tangible del módulo 5.3: el escaparate público completo de tu negocio, con el que trabajarás en la prospección del módulo 5.4.

Conocimientos previos

• Escaparate comercial: dominio, hosting y WordPress (lección anterior).
• Qué problema vender y a quién (módulo 5.1).
• Modelos de precio: setup, retainer y consumo (módulo 5.1).

Herramientas necesarias

• La landing page de ejemplo descargada de Recursos.
• Un navegador con NVDA activo.

Modelo mental

Piensa en decorar el escaparate de una tienda con un cartel de oferta ya impreso, al que sólo tienes que cambiarle el nombre del producto y el precio, en lugar de diseñar el cartel entero desde una hoja en blanco.

Explicación

La landing page de ejemplo de este curso está construida siguiendo las mismas reglas de accesibilidad de toda la plataforma: un único <h1>, jerarquía de encabezados correcta (h2 para las secciones principales, h3 para las preguntas frecuentes), un enlace «Saltar al contenido principal», un formulario con etiquetas (label) correctamente asociadas a cada campo, una tabla de precios con caption, th y scope, y contraste de color adecuado, sin depender de ningún framework visual externo ni de JavaScript.

Su estructura sigue el patrón de conversión habitual de una landing page de servicios: un titular centrado en el problema resuelto (no en la tecnología, siguiendo el módulo 5.1), una llamada a la acción destacada («Pruébalo tú mismo: llama a este número»), una sección de qué resuelve, una sección de cómo funciona, una tabla de precios orientativa, preguntas frecuentes, y un formulario de contacto final.

Personalizarla implica sustituir los textos entre corchetes (nombre del negocio, precios, número de teléfono real de tu demostración) y, al pegarla en WordPress con el editor clásico, comprobar que la estructura de encabezados se conserva: algunos temas de WordPress alteran automáticamente los niveles de encabezado según su propio diseño, por lo que conviene verificarlo después de publicar.

Preparación

Descarga «Landing page de ejemplo, accesible» desde Recursos.

Procedimiento paso a paso

1. Contexto: Vas a personalizar la landing page de ejemplo con los datos de tu propio negocio.

   Acción de teclado: Abre el archivo descargado en un editor de texto y usa Ctrl + F para localizar cada corchete [.

   Respuesta esperada de NVDA: NVDA anunciará cada coincidencia de la búsqueda.

   Qué significa: Cada corchete es un dato que debes sustituir: nombre del negocio, precios reales (módulo 5.1), y tu número de demostración cuando lo tengas.

   Acción siguiente: Sustituye cada campo, guarda el archivo, y ábrelo en tu navegador para revisarlo antes de publicarlo.

2. Contexto: Vas a verificar, con NVDA, que la estructura accesible se mantiene tras la personalización.

   Acción de teclado: Con el archivo abierto en el navegador, pulsa H repetidamente para recorrer todos los encabezados de principio a fin.

   Respuesta esperada de NVDA: NVDA debería anunciar exactamente un encabezado de nivel 1, seguido de los encabezados de nivel 2 de cada sección, en orden lógico.

   Qué significa: Si el orden de encabezados sigue siendo coherente tras tus cambios, la estructura accesible se ha conservado.

   Acción siguiente: Pulsa F para recorrer los campos de formulario y confirma que cada uno tiene una etiqueta clara asociada.

3. Contexto: Vas a publicar el contenido dentro de WordPress usando el editor clásico.

   Acción de teclado: En tu wp-admin, crea una página nueva, activa el editor clásico (o el modo «Texto»/HTML si tu editor de bloques no ofrece pegado directo de HTML), y pega el contenido del cuerpo de la landing page.

   Respuesta esperada de NVDA: NVDA leerá el contenido del editor conforme lo revisas.

   Qué significa: WordPress puede envolver tu contenido con su propio encabezado de página; revisa que no se acabe generando más de un h1 en la página final.

   Acción siguiente: Guarda como borrador, previsualiza, y repite la verificación de encabezados (paso anterior) sobre la página ya publicada dentro de WordPress.

Errores frecuentes y diagnóstico

La página final en WordPress muestra dos encabezados de nivel 1 (el del tema de WordPress y el de la landing page).

Cómo localizarlo: Muchos temas de WordPress generan automáticamente un h1 con el título de la página, además del que trae el contenido pegado.

Solución: Elimina el h1 propio del contenido pegado y deja que el título de la página de WordPress sea el único h1, ajustando el resto de encabezados un nivel si hace falta.

Comprobación final

Recorre con NVDA, usando H, toda la estructura de encabezados de tu landing page ya personalizada (en el navegador o ya publicada en WordPress) y confirma que hay exactamente un h1 y una jerarquía coherente. Si lo consigues, la comprobación es positiva.

Qué acabas de conseguir

Tienes un escaparate comercial real, accesible y personalizado, listo para usarse en la prospección del módulo 5.4.

Ejercicio práctico

Pide a alguien que use NVDA en modo de exploración que navegue tu landing page personalizada sin ninguna guía previa, y anota si consigue entender, sólo con la navegación por encabezados, qué ofrece tu negocio y cómo contactar.

Resumen de lo imprescindible

• La landing page de ejemplo de este curso sigue las mismas reglas de accesibilidad que toda la plataforma: un h1, jerarquía correcta, formulario con etiquetas, tabla con caption/th/scope.
• Personalizarla implica sustituir los datos entre corchetes por los reales de tu negocio.
• Verifica siempre la estructura de encabezados después de pegar el contenido en WordPress, porque el tema puede alterarla.
• El titular y el CTA deben centrarse en el problema resuelto, no en la tecnología, siguiendo el módulo 5.1.

No necesitas aprender todavía

Todavía no necesitas usar esta landing page en una prospección real: se practica en el módulo 5.4.

Estoy preparado para continuar si puedo…

• Personalizar la landing page de ejemplo con datos reales de un negocio.
• Verificar con NVDA que la estructura de encabezados se mantiene correcta tras publicarla en WordPress.
• Diagnosticar y corregir un problema de encabezados duplicados al integrar contenido en un tema de WordPress.

Fuentes

• Classic Editor — WordPress.org (consultado el 2026-08-30)
• Headings — W3C Web Accessibility Initiative (WAI) (consultado el 2026-08-30)

Última actualización de esta lección: 2026-08-30.

Test de la lección

Para realizar el test y obtener Puntos de profesionalidad necesitas iniciar sesión o crear una cuenta.

Navegación

Lección anterior: Escaparate comercial: dominio, hosting y WordPress

Continuar con la siguiente lección: Prospección: encontrar clientes y organizarlos

Descargar esta lección en PDF accesible