Módulo 8 de 9

Resolución de problemas comunes

Soluciones a problemas frecuentes en la creación de EPUBs accesibles

Compartir:

Problemas de Orden de Lectura

El orden de lectura incorrecto es uno de los problemas más comunes y frustrantes en EPUBs, especialmente para usuarios de lectores de pantalla.

Síntomas

  • El contenido se lee en orden ilógico
  • Sidebars se leen antes del contenido principal
  • Imágenes se anuncian fuera de contexto
  • Notas al pie interrumpen el flujo de lectura

Causas Comunes

1. Diseño complejo en InDesign

  • Múltiples columnas
  • Marcos de texto no enlazados
  • Elementos flotantes
  • Diseño de revista o periódico

2. Orden automático incorrecto

  • InDesign detecta orden basándose en posición visual
  • No siempre coincide con el orden lógico de lectura

Soluciones

Solución 1: Usar el Panel de Artículos en InDesign

  1. Abre Ventana > Artículos
  2. Crea un nuevo artículo
  3. Arrastra marcos de texto al panel en el orden correcto de lectura
  4. En opciones de exportación EPUB, selecciona "Igual que diseño de artículos"

Orden recomendado:

  1. Título del capítulo/artículo
  2. Subtítulo (si existe)
  3. Autor/byline (si aplica)
  4. Introducción/lead
  5. Cuerpo principal del texto
  6. Imágenes con sus pies de foto (en contexto)
  7. Sidebars o recuadros
  8. Notas al pie o notas finales

Solución 2: Editar XHTML manualmente

Si el orden sigue siendo incorrecto después de exportar:

  1. Abre el EPUB en Sigil
  2. Examina el archivo XHTML
  3. Reorganiza los elementos en el orden correcto
  4. Guarda y valida

Ejemplo de reorganización:

html
<!-- ❌ Orden incorrecto -->
<aside class="sidebar">Información adicional</aside>
<h1>Título del Capítulo</h1>
<p>Contenido principal...</p>

<!-- ✅ Orden correcto -->
<h1>Título del Capítulo</h1>
<p>Contenido principal...</p>
<aside class="sidebar">Información adicional</aside>

Solución 3: Simplificar el diseño

Para diseños muy complejos, considera:

  • Simplificar el layout para la versión EPUB
  • Crear un documento InDesign separado para EPUB
  • Usar diseño de una sola columna
  • Enlazar todos los marcos de texto en cadena lógica

Verificación

Probar el orden de lectura:

  1. En Thorium Reader:

    • Abre el EPUB
    • Lee secuencialmente
    • Verifica que el orden sea lógico

  2. Con lector de pantalla:

    • Activa NVDA o VoiceOver
    • Usa "Leer todo" (Insert + Flecha abajo en NVDA)
    • Escucha el orden de lectura completo

  3. Inspección visual en Sigil:

    • Abre el XHTML
    • Lee el código de arriba hacia abajo
    • Verifica que el orden HTML sea lógico

Imágenes que No se Exportan Correctamente

Las imágenes pueden faltar, exportarse con calidad incorrecta o aparecer en el lugar equivocado.

Problema 1: Imágenes Faltantes

Causas:

  • Imágenes vinculadas (no embebidas)
  • Rutas de archivo rotas
  • Formato de imagen no soportado

Soluciones:

  1. Verificar vínculos en InDesign:

    • Abre Ventana > Vínculos
    • Busca iconos de advertencia (triángulo amarillo o signo de interrogación)
    • Actualiza o vuelve a vincular imágenes faltantes

  2. Embebed imágenes:

    • Selecciona la imagen en el panel Vínculos
    • Menú del panel > Incrustar vínculo
    • Esto embebe la imagen en el documento InDesign

  3. Verificar formato:

    • Formatos soportados: JPEG, PNG, GIF, SVG
    • Convierte formatos no soportados (TIFF, PSD, etc.) a JPEG o PNG

Problema 2: Calidad de Imagen Incorrecta

Causas:

  • Resolución de exportación demasiado baja
  • Compresión excesiva
  • Configuración de formato incorrecta

Soluciones:

  1. Ajustar resolución de exportación:

    • En opciones de exportación EPUB, pestaña Objeto
    • Establece resolución a 96-150 ppi (no 72 ppi)
    • Para imágenes de alta calidad: 150-300 ppi

  2. Configurar calidad JPEG:

    • En opciones de exportación, selecciona formato JPEG
    • Ajusta calidad a Alta o Máxima
    • Balance entre calidad y tamaño de archivo

  3. Usar formato apropiado:

    • JPEG: Fotografías (calidad alta, 80-90%)
    • PNG: Gráficos con transparencia, ilustraciones
    • SVG: Gráficos vectoriales (escalables, tamaño pequeño)

Problema 3: Imágenes en Posición Incorrecta

Causas:

  • Imágenes no ancladas
  • Anclaje incorrecto
  • Orden de lectura problemático

Soluciones:

  1. Anclar imágenes correctamente:

    • Selecciona la imagen
    • Copia (Cmd/Ctrl + C)
    • Coloca el cursor en el texto donde debe aparecer
    • Pega (Cmd/Ctrl + V)
    • La imagen se ancla al texto

  2. Verificar tipo de anclaje:

    • Selecciona la imagen anclada
    • Objeto > Opciones de objeto anclado
    • Para EPUBs reflowable: usa Anclado en línea o Sobre la línea

  3. Usar <figure> en post-procesamiento:

html
<p>El siguiente diagrama muestra el proceso:</p>

<figure>
  <img src="images/diagram01.png" alt="Diagrama del proceso"/>
  <figcaption>Figura 1: Diagrama del proceso de exportación</figcaption>
</figure>

<p>Como se observa en el diagrama...</p>

Problemas de Formato CSS

Los estilos CSS pueden no aplicarse correctamente o causar problemas de accesibilidad.

Problema 1: Estilos No se Aplican

Causas:

  • Archivo CSS no vinculado correctamente
  • Selectores CSS incorrectos
  • Especificidad de CSS conflictiva

Soluciones:

  1. Verificar vínculo CSS en XHTML:
html
<head>
  <meta charset="utf-8"/>
  <title>Capítulo 1</title>
  <!-- Verificar que esta línea exista y la ruta sea correcta -->
  <link href="../styles/stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
  1. Verificar selectores CSS:
css
/* ❌ Selector incorrecto (clase no existe en HTML) */
.parrafo-principal {
  font-size: 1.2em;
}

/* ✅ Selector correcto (coincide con HTML) */
p.body-text {
  font-size: 1em;
}
  1. Simplificar CSS:
    • Elimina selectores no utilizados
    • Usa selectores simples y claros
    • Evita selectores demasiado específicos

Problema 2: Conflictos de Estilo

Causas:

  • Múltiples archivos CSS con reglas conflictivas
  • Estilos inline que sobrescriben CSS
  • Especificidad incorrecta

Soluciones:

  1. Consolidar archivos CSS:

    • Combina múltiples CSS en uno solo
    • Elimina duplicados
    • Organiza lógicamente (reset, base, componentes)

  2. Eliminar estilos inline:

html
<!-- ❌ Estilo inline (difícil de mantener) -->
<p style="font-size: 14px; color: #333;">Texto</p>

<!-- ✅ Usar clase CSS -->
<p class="body-text">Texto</p>
css
.body-text {
  font-size: 1em;
  color: #333;
}
  1. Usar !important con moderación:
    • Solo para sobrescribir estilos de usuario cuando sea absolutamente necesario
    • Generalmente indica problema de especificidad que debe resolverse

Problema 3: Estilos que Afectan Accesibilidad

Causas:

  • Line-height fijo
  • Font-size en píxeles
  • Alineación justificada
  • Contraste insuficiente

Soluciones:

  1. Eliminar estilos problemáticos:
css
/* ❌ Eliminar estos estilos */
p {
  line-height: 1.2;        /* Fijo, no ajustable */
  font-size: 14px;         /* Píxeles fijos */
  text-align: justify;     /* Dificulta lectura */
}

/* ✅ Usar estilos accesibles */
p {
  /* line-height: heredado del sistema */
  /* font-size: heredado o en em/% */
  text-align: left;        /* O sin especificar */
}
  1. Usar unidades relativas:
css
/* ✅ Unidades relativas */
h1 { font-size: 2em; }      /* Relativo al tamaño base */
h2 { font-size: 1.5em; }
p  { font-size: 1em; }
small { font-size: 0.875em; }
  1. Verificar contraste:
    • Usa herramientas como WebAIM Contrast Checker
    • Mínimo 4.5:1 para texto normal
    • Mínimo 3:1 para texto grande (18pt+ o 14pt+ negrita)

Validación de Accesibilidad Fallida

Daisy ACE o EPUBCheck reportan errores que deben corregirse.

Errores Comunes de EPUBCheck

Error 1: "File not found"

Causa: Referencia a archivo que no existe en el EPUB

Solución:

  1. Abre el EPUB en Sigil
  2. Busca la referencia en el manifest (content.opf)
  3. Verifica que el archivo exista
  4. Corrige la ruta o añade el archivo faltante

Error 2: "Invalid XHTML"

Causa: HTML mal formado (etiquetas no cerradas, anidamiento incorrecto)

Solución:

  1. Abre el archivo XHTML en Sigil
  2. Usa Herramientas > Validar XHTML
  3. Corrige errores (etiquetas sin cerrar, atributos incorrectos)
html
<!-- ❌ HTML mal formado -->
<p>Texto <strong>negrita</p></strong>

<!-- ✅ HTML bien formado -->
<p>Texto <strong>negrita</strong></p>

Error 3: "Duplicate ID"

Causa: Dos elementos tienen el mismo atributo id

Solución:

  1. Busca el ID duplicado en Sigil (Cmd/Ctrl + F)
  2. Cambia uno de los IDs a un valor único
  3. Actualiza todas las referencias a ese ID

Errores Comunes de Daisy ACE

Error 1: "Image missing alt text"

Causa: Imagen sin atributo alt

Solución:

html
<!-- ❌ Sin alt -->
<img src="images/photo.jpg"/>

<!-- ✅ Con alt descriptivo -->
<img src="images/photo.jpg" alt="Descripción de la imagen"/>

<!-- ✅ Imagen decorativa -->
<img src="images/decorative.png" alt=""/>

Error 2: "Heading levels skipped"

Causa: Salto en jerarquía de encabezados (h1 → h3, sin h2)

Solución:

html
<!-- ❌ Salto de nivel -->
<h1>Título Principal</h1>
<h3>Subsección</h3>  <!-- Salta h2 -->

<!-- ✅ Jerarquía correcta -->
<h1>Título Principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>

Error 3: "Insufficient contrast"

Causa: Contraste entre texto y fondo menor a 4.5:1

Solución:

  1. Identifica el elemento con contraste insuficiente
  2. Ajusta colores en CSS
  3. Verifica con herramienta de contraste
css
/* ❌ Contraste insuficiente (2.5:1) */
.text {
  color: #888;
  background-color: #fff;
}

/* ✅ Contraste suficiente (7:1) */
.text {
  color: #333;
  background-color: #fff;
}

Error 4: "Missing language declaration"

Causa: Atributo lang faltante en <html>

Solución:

html
<!-- ❌ Sin lang -->
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- ✅ Con lang -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

Error 5: "Table missing headers"

Causa: Tabla sin elementos <th> o atributos scope

Solución:

html
<!-- ❌ Sin encabezados -->
<table>
  <tr>
    <td>Nombre</td>
    <td>Edad</td>
  </tr>
  <tr>
    <td>Juan</td>
    <td>30</td>
  </tr>
</table>

<!-- ✅ Con encabezados -->
<table>
  <thead>
    <tr>
      <th scope="col">Nombre</th>
      <th scope="col">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Compatibilidad entre Dispositivos

El EPUB se ve diferente o no funciona en ciertos dispositivos.

Problema: Diferencias Visuales

Causas:

  • Diferentes motores de renderizado
  • Soporte CSS variable
  • Configuraciones de usuario

Soluciones:

  1. Usar CSS estándar y bien soportado:

    • Evita propiedades CSS experimentales
    • Usa prefijos de navegador si es necesario
    • Prueba en múltiples dispositivos

  2. Diseño flexible:

css
/* Diseño que se adapta a diferentes pantallas */
img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 40em;
  margin: 0 auto;
  padding: 1em;
}
  1. Probar en dispositivos reales:
    • Kindle (E-ink y Fire)
    • iPad (Apple Books)
    • Android (Google Play Books)
    • Kobo
    • Lectores de escritorio (Thorium, Calibre)

Problema: Funcionalidad No Soportada

Causas:

  • JavaScript deshabilitado
  • Media overlays no soportados
  • Fuentes embebidas no renderizadas

Soluciones:

  1. Proporcionar alternativas:

    • No depender exclusivamente de JavaScript
    • Ofrecer contenido estático como alternativa
    • Usar fuentes web estándar como fallback

  2. Degradación elegante:

html
<!-- Contenido funciona con y sin JavaScript -->
<div class="interactive-quiz">
  <noscript>
    <p>Esta sección requiere JavaScript. Aquí está el contenido alternativo:</p>
  </noscript>
  <!-- Contenido interactivo -->
</div>

Checklist de Resolución de Problemas

Cuando encuentres problemas:

  • ✅ Validar con EPUBCheck (sin errores)
  • ✅ Validar con Daisy ACE (corregir violaciones críticas)
  • ✅ Probar orden de lectura con lector de pantalla
  • ✅ Verificar todas las imágenes aparecen y tienen alt text
  • ✅ Revisar CSS para estilos problemáticos
  • ✅ Probar en al menos 3 dispositivos/lectores diferentes
  • ✅ Verificar contraste de color
  • ✅ Comprobar jerarquía de encabezados
  • ✅ Validar estructura de tablas
  • ✅ Verificar metadata de accesibilidad completo

La mayoría de problemas en EPUBs tienen soluciones conocidas. La clave es identificar la causa raíz mediante validación sistemática y pruebas exhaustivas.

Compartir:

Comentarios y Discusión

Comparte tus dudas, experiencias o sugerencias sobre este módulo. La comunidad y yo estaremos encantados de ayudarte.

Nota: Los comentarios están moderados para mantener un ambiente respetuoso y constructivo. Por favor, sé cortés y profesional en tus intervenciones.