Haz tus páginas accesibles.

Dale a cada imagen una descripción, mantén los encabezados en orden y haz el texto legible sobre el color, para que las personas que usan lector de pantalla o teclado puedan usar tus páginas. Esta página enumera lo que DXPR Builder hace por ti, lo que añades por tu cuenta y cómo compruebas el resultado antes de publicar.

Lo que el constructor hace por ti

• Real text structure. El elemento Text usa CKEditor 5 con encabezados reales (Heading 1 a Heading 6), párrafos y listas.
• ARIA on interactive elements. Las pestañas llevan role="tablist" y role="tab". Las barras de progreso y los contadores circulares llevan role="progressbar" con su valor mínimo, máximo y actual. Los títulos de paneles plegables son botones que informan de si su panel está abierto.
• Accessible editor dialogs. Cada diálogo de ajustes es un role="dialog" con aria-modal y un título.
• Keyboard access in the editor. Enter abre los ajustes de un elemento, Escape cierra un panel o deselecciona el elemento, y Ctrl (Cmd en un Mac) con una tecla de flecha mueve elementos. Consulta la referencia de atajos de teclado.

Los elementos de diseño (secciones, filas y columnas) son elementos div simples. La estructura que anuncia un lector de pantalla viene de tus encabezados.

Añade texto alternativo a una imagen

1. Señala la imagen y haz clic en More > Settings.
2. Abre el panel SEO.
3. Escribe una descripción en Alt attribute: lo que muestra la imagen y por qué está en la página, en una o dos frases, sin "image of".
4. Haz clic en Save en el diálogo y luego en Save en la barra del contenedor.

Cuando Alt attribute está vacío, el elemento Image no escribe ningún alt y los lectores de pantalla pueden leer el nombre del archivo. Para una imagen puramente decorativa, usa una Background image de sección en el panel Style; los lectores de pantalla omiten los fondos. El carrusel de imágenes usa un solo Alt attribute para todas sus imágenes, así que describe el conjunto.

Las imágenes generadas con IA empiezan con tu prompt como texto alternativo. Edítalo para que describa el resultado en lugar de la petición. Consulta el texto alternativo de imágenes.

Mantén los encabezados en orden

1. Dale a la página un Heading 1. La mayoría de los temas muestran el título de la página como Heading 1, así que no añadas un segundo en el constructor. En DXPR CMS puedes ocultar ese título en una página: en su formulario de edición, abre DXPR Theme Settings y marca Page Title en DXPR Hide Regions.
2. En la barra del elemento Text, usa la lista de encabezados para marcar los títulos de sección como Heading 2 y las subsecciones como Heading 3. No te saltes niveles.
3. Usa los botones de lista de la barra para las listas en lugar de guiones escritos.

Tres elementos fijan su nivel de encabezado. El Title del Jumbotron es siempre Heading 1, el Title de la Card es siempre Heading 5, y cada Toggle title de un panel Collapse es un Heading 2.

Comprueba el contraste de color

Los selectores de color ofrecen la paleta de tu tema pero no miden el contraste, así que compruébalo por tu cuenta:

Para texto sobre una foto, oscurece la foto para que la proporción se mantenga en toda la imagen. En el panel Background effects de la sección, fija Background effect en Gradient con Start color y End color oscuros semitransparentes. Backgrounds muestra los pasos.

Usa enlaces y botones descriptivos

Los elementos Button y Link muestran el texto que escribes como texto del enlace. Escribe lo que hace el enlace ("Register for Open Day"), no "click here". El elemento Link también tiene un Title attribute en su panel SEO para una descripción más larga.

Lo que ves

1. Fija View mode en la barra del contenedor en Preview, para que ningún control del editor estorbe.
2. Pulsa Tab para recorrer la página. Cada botón, enlace y pestaña es alcanzable y muestra un anillo de foco visible.
3. Un comprobador automático, como la auditoría de accesibilidad del navegador o la extensión axe, no informa de errores para el contenido del constructor en la página publicada.

Si no ves un informe limpio

• El comprobador informa de una imagen sin texto alternativo. El Alt attribute del elemento Image está vacío. Rellénalo, o mueve una imagen decorativa a un fondo de sección.
• El comprobador informa de dos Heading 1. Un Title de Jumbotron es siempre Heading 1, junto al título de página de tu tema. Usa un elemento Text con un Heading 2 en su lugar.
• El comprobador informa de un nivel de título omitido. Un Title de Card es siempre Heading 5. Déjalo vacío y empieza la tarjeta con un encabezado de elemento Text en el nivel correcto.
• El comprobador informa de contraste bajo en texto sobre una foto. Añade el degradado descrito arriba, o elige un fondo de texto más oscuro.

¿Qué sigue?

• Atajos de teclado: la lista completa de atajos del editor.
• Cortafuegos y residencia de datos: los demás temas de cumplimiento.