# Pretext: demo accessible > Rehice el demo del editorial engine de Cheng Lou con Pretext como una app React conforme con WCAG 2.2: orbes arrastrables por teclado, soporte para lectores de pantalla, prefers-reduced-motion, y un fallback HTML nativo al 150%+ de zoom o en viewports menores a 500px. *By Micaela Avigliano — Frontend & Accessibility Engineer · Publicado 19 abr 2026* [Read the original on micaavigliano.com](https://micaavigliano.com/es/blog/pretext-demo-accesible) --- ## [Qué hice](#que-hice) Rehice el demo de [Pretext](https://github.com/chenglou/pretext), creado por Cheng Lou, donde se muestra un "[editorial engine](https://somnai-dreams.github.io/pretext-demos/the-editorial-engine.html)" (motor editorial?) e hice [mi propio demo completamente accessible](https://the-editorial-engine-a11y.netlify.app/). Mi demo incluye estructura HTML semántica, operabilidad por teclado, soporte para lectores de pantalla y soporte de `prefers-reduced-motion`. El resultado es una demo accesible y performante que cumple con los criterios de la WCAG 2.2 sin comprometer la estética ni el rendimiento. Las orbes siguen siendo arrastrables con el mouse, pero con el agregado de que ahora también se pueden mover usando el teclado. Este demo utiliza un **sistema de renderizado dual**. Cuando no hay zoom, pretext crea una capa visual donde las líneas de texto se adaptan dinámicamente a la posición de las orbes que se mueven por todo el documento. Por debajo de esta capa, hay un elemento de HTML nativo `
` que con la ayuda de la propiedad de CSS `column-count` permanece de forma estática en el DOM para que lectores de pantalla puedan anunciar su contenido de manera fluída, para que los usuarios puedan copiar el texto, pegarlo en otras aplicaciones o usar la funcionalidad de búsqueda en la página, etc. Cuando el usuario hace zoom en el navegador por encima del 150% o el ancho de la pantalla es menor a 500px, la capa visual de pretext se elimina completamente y el artículo HTML nativo se convierte en el diseño visible. Finalmente, la letra inicial del texto cuando no hay zoom o el viewport es amplio utiliza pretext para su estilado, mientras que cuando hay zoom o la pantalla es pequeña, el estilado de la letra inicial se maneja utilizando la propiedad nativa de CSS `::first-letter`. ## [Uso de la librería Pretext](#uso-de-la-libreria-pretext) La librería Pretext es el protagonista detrás del renderizado y el layout del texto. Usé las siguientes APIs: | API | Propósito | Donde se usa | | --- | --- | --- | | `prepareWithSegments()` | Mide y almacena el ancho de las palabras para cada párrafo | Preparar el texto cuando se carga la fuente | | `layoutNextLine()` | Cada línea de texto se acomoda en un ancho máximo dado | Organiza las columnas del layout, se llama por línea o por espacio disponible | | `layoutWithLines()` | Acomoda todas las líneas de texto en un bloque de texto ya preparado | Ordena los encabezados | | `walkLineRanges()` | Itera sobre los rangos de líneas sin asignar objetos de línea | Búsqueda binaria de encabezados, ancho de capítulos iniciales | ## [Mejoras de accesibilidad](#mejoras-de-accesibilidad) ### [Estructura de HTML semántica](#estructura-de-html-semantica) Esta aplicación utiliza elementos semánticos y landmarks de HTML5: - `
`: elemento que agrupa los controles de interacción de la página - `
`: contenido principal (texto y orbes) - `
`: elemento independiente que contiene el texto legible para usuarios visuales y el texto accessible para usuarios de tecnologías asistivas con el idioma español - `
`: región donde se contienen las orbes - `