--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: 'Haz tus páginas accesibles | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:15:16+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:15:16+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Haz tus páginas accesibles' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:15:16+0000' dateModified: '2026-10-24T11:15:16+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Haz tus páginas accesibles. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [Atajos de teclado](/es/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Cortafuegos y residencia de datos](/es/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts). 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](/hc/documentation/learn-dxpr-builder/ai/image-alt-text). ## 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: | Texto | Proporción mínima (WCAG AA) | |---|---| | Texto del cuerpo | 4.5:1 | | Texto grande (24 px, o unos 19 px en negrita) | 3:1 | 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](/hc/documentation/learn-dxpr-builder/element-settings/background)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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts): la lista completa de atajos del editor. - [Cortafuegos y residencia de datos](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall): los demás temas de cumplimiento.