Estructura Semántica

La estructura semántica es la base de un EPUB accesible. InDesign permite definir esta estructura mediante estilos y configuraciones específicas.

Jerarquía de Encabezados

Los encabezados proporcionan estructura y permiten navegación eficiente mediante lectores de pantalla.

Reglas fundamentales:

1. Nunca saltar niveles: Si usas h1, el siguiente nivel debe ser h2, no h3
2. Un solo h1 por documento: Generalmente el título del capítulo
3. Jerarquía lógica: h2 para secciones principales, h3 para subsecciones, etc.
4. Consistencia: Usa el mismo nivel para elementos del mismo rango jerárquico

Configuración en InDesign:

Para cada estilo de párrafo que representa un encabezado:

1. Abre Opciones de estilo de párrafo
2. Ve a Opciones de exportación > Etiquetas de exportación EPUB y HTML
3. Selecciona la etiqueta HTML apropiada (h1, h2, h3, etc.)
4. Marca "Dividir documento" si quieres que cada sección sea un archivo XHTML separado

Ejemplo de jerarquía correcta:

h1: Capítulo 1: Introducción
  h2: Contexto Histórico
    h3: Siglo XIX
    h3: Siglo XX
  h2: Metodología
    h3: Enfoque Cualitativo
    h3: Enfoque Cuantitativo

h1: Capítulo 1: Introducción
  h2: Contexto Histórico
    h3: Siglo XIX
    h3: Siglo XX
  h2: Metodología
    h3: Enfoque Cualitativo
    h3: Enfoque Cuantitativo

Secciones y Roles ARIA

EPUB 3 soporta el atributo epub:type y roles ARIA para definir el propósito de secciones.

Tipos de sección comunes:

Implementación en código XHTML:

Después de exportar desde InDesign, deberás editar el XHTML para añadir estas etiquetas:

<section epub:type="chapter" role="doc-chapter">
  <h1>Capítulo 1</h1>
  <p>Contenido del capítulo...</p>
</section>

<section epub:type="chapter" role="doc-chapter">
  <h1>Capítulo 1</h1>
  <p>Contenido del capítulo...</p>
</section>

Importante: InDesign no añade automáticamente estos atributos en la exportación. Deberás agregarlos manualmente en el post-procesamiento o mediante scripts.

Texto Alternativo para Imágenes

El texto alternativo (alt text) describe imágenes para usuarios que no pueden verlas, ya sea por discapacidad visual o porque las imágenes no se cargan.

Principios de Buen Alt Text

1. Ser descriptivo y conciso

• Describe el contenido y función de la imagen
• Generalmente 125 caracteres o menos
• Más largo si es necesario para comprensión

2. Contexto es clave

• Describe lo que es relevante para el contenido circundante
• No repitas información ya en el texto

3. No usar frases redundantes

• ❌ "Imagen de...", "Fotografía de..."
• ✅ Descripción directa del contenido

4. Imágenes decorativas

• Si la imagen es puramente decorativa, usa alt="" (vacío)
• Esto indica a lectores de pantalla que la ignoren

Ejemplos de Alt Text

Fotografía descriptiva:

• ❌ "Imagen de un gato"
• ✅ "Gato atigrado durmiendo en un sofá azul"

Gráfico informativo:

• ❌ "Gráfico"
• ✅ "Gráfico de barras mostrando aumento del 45% en ventas de 2020 a 2024"

Diagrama técnico:

• ❌ "Diagrama del proceso"
• ✅ "Diagrama de flujo del proceso de exportación EPUB: preparación, exportación, validación y distribución"

Portada de libro:

• ✅ "Portada: título 'Accesible EPUB 3', autor Matt Garrish, ilustración de una cabra"

Imagen decorativa:

• ✅ alt="" (vacío, sin descripción)

Configurar Alt Text en InDesign

Método 1: Texto alternativo de objeto

1. Selecciona la imagen
2. Ve a Objeto > Texto alternativo de objeto
3. En la pestaña EPUB y HTML, ingresa:
   • Texto alternativo personalizado: Tu descripción
   • O marca Texto alternativo de estructura si quieres usar texto del documento

Método 2: Panel de texto alternativo

1. Abre Ventana > Texto alternativo
2. Selecciona la imagen
3. Ingresa la descripción en el panel

Método 3: Metadata XMP

Para imágenes reutilizadas, puedes guardar alt text en los metadatos de la imagen misma usando Adobe Bridge.

Descripciones Largas

Para imágenes complejas (diagramas detallados, gráficos con múltiples datos, infografías), el alt text puede no ser suficiente.

Opciones para descripciones largas:

1. Descripción en el texto principal

• Incluye la descripción detallada en el texto que rodea la imagen
• El alt text puede ser breve: "Diagrama del ciclo del agua (descripción en texto siguiente)"

2. Enlace a descripción

• Proporciona un enlace a una página con descripción detallada
• Usa el atributo aria-describedby

3. Elemento <details>

• Descripción expandible junto a la imagen
• Requiere edición post-exportación

Ejemplo de descripción larga:

<figure>
  <img src="images/sales-chart.png" 
       alt="Gráfico de ventas trimestrales 2020-2024" 
       aria-describedby="sales-desc"/>
  <figcaption>Ventas trimestrales por región</figcaption>
</figure>

<div id="sales-desc">
  <p>El gráfico muestra ventas trimestrales de 2020 a 2024 
  para tres regiones: Norte, Sur y Este. La región Norte 
  muestra crecimiento constante de €50,000 en Q1 2020 a 
  €120,000 en Q4 2024. La región Sur...</p>
</div>

<figure>
  <img src="images/sales-chart.png" 
       alt="Gráfico de ventas trimestrales 2020-2024" 
       aria-describedby="sales-desc"/>
  <figcaption>Ventas trimestrales por región</figcaption>
</figure>

<div id="sales-desc">
  <p>El gráfico muestra ventas trimestrales de 2020 a 2024 
  para tres regiones: Norte, Sur y Este. La región Norte 
  muestra crecimiento constante de €50,000 en Q1 2020 a 
  €120,000 en Q4 2024. La región Sur...</p>
</div>

Tablas Accesibles

Las tablas deben estructurarse correctamente para que lectores de pantalla puedan navegar y comprender la relación entre encabezados y datos.

Estructura de Tabla Accesible

Elementos esenciales:

1. Encabezados de columna (<th>)
2. Encabezados de fila (si aplica)
3. Caption (título de la tabla)
4. Scope (alcance de encabezados)

Ejemplo de tabla accesible:

<table>
  <caption>Ventas mensuales por región en 2024</caption>
  <thead>
    <tr>
      <th scope="col">Mes</th>
      <th scope="col">Norte</th>
      <th scope="col">Sur</th>
      <th scope="col">Este</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Enero</th>
      <td>€15,000</td>
      <td>€12,000</td>
      <td>€18,000</td>
    </tr>
    <tr>
      <th scope="row">Febrero</th>
      <td>€16,500</td>
      <td>€13,200</td>
      <td>€19,800</td>
    </tr>
  </tbody>
</table>

<table>
  <caption>Ventas mensuales por región en 2024</caption>
  <thead>
    <tr>
      <th scope="col">Mes</th>
      <th scope="col">Norte</th>
      <th scope="col">Sur</th>
      <th scope="col">Este</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Enero</th>
      <td>€15,000</td>
      <td>€12,000</td>
      <td>€18,000</td>
    </tr>
    <tr>
      <th scope="row">Febrero</th>
      <td>€16,500</td>
      <td>€13,200</td>
      <td>€19,800</td>
    </tr>
  </tbody>
</table>

Configurar Tablas en InDesign

InDesign tiene soporte limitado para configuración de accesibilidad de tablas. La mayoría de la configuración debe hacerse en post-procesamiento.

Durante la creación en InDesign:

1. Usa la herramienta de tabla de InDesign (no imágenes de tablas)
2. Define claramente filas de encabezado
3. Mantén estructura simple (evita celdas fusionadas complejas)
4. Añade un título descriptivo cerca de la tabla

Después de exportar:

1. Abre el XHTML en un editor (Sigil, Oxygen, etc.)
2. Añade <caption> dentro de <table>
3. Convierte encabezados a <th> con atributo scope
4. Verifica que la estructura sea lógica

Tablas Complejas

Para tablas con múltiples niveles de encabezados o estructura compleja:

• Considera dividir en tablas más simples
• Usa atributos id y headers para asociaciones explícitas
• Proporciona resumen o descripción de la tabla
• Considera alternativas visuales (gráficos, listas)

Roles ARIA

ARIA (Accessible Rich Internet Applications) proporciona roles, estados y propiedades adicionales para mejorar la accesibilidad.

Roles de Documento ARIA

EPUB 3 soporta roles de documento específicos para publicaciones:

Implementación de Roles ARIA

Los roles ARIA se añaden como atributos HTML en el post-procesamiento:

<section epub:type="chapter" role="doc-chapter">
  <h1>Capítulo 1: Introducción</h1>
  <!-- contenido -->
</section>

<aside epub:type="footnote" role="doc-footnote" id="fn1">
  <p>Esta es una nota al pie.</p>
</aside>

<section epub:type="chapter" role="doc-chapter">
  <h1>Capítulo 1: Introducción</h1>
  <!-- contenido -->
</section>

<aside epub:type="footnote" role="doc-footnote" id="fn1">
  <p>Esta es una nota al pie.</p>
</aside>

Landmarks ARIA

Los landmarks ayudan a usuarios de lectores de pantalla a navegar rápidamente a secciones principales:

Ejemplo:

<nav role="navigation" epub:type="toc">
  <h2>Tabla de Contenidos</h2>
  <ol>
    <li><a href="chapter01.xhtml">Capítulo 1</a></li>
  </ol>
</nav>

<main role="main">
  <!-- Contenido principal del libro -->
</main>

<nav role="navigation" epub:type="toc">
  <h2>Tabla de Contenidos</h2>
  <ol>
    <li><a href="chapter01.xhtml">Capítulo 1</a></li>
  </ol>
</nav>

<main role="main">
  <!-- Contenido principal del libro -->
</main>

Separadores de Contexto

Los separadores de contexto indican cambios temáticos o de sección dentro de un documento.

Elemento <hr>

El elemento <hr> (horizontal rule) representa un cambio temático entre párrafos.

Uso apropiado:

• Cambio de escena en narrativa
• Transición entre temas en no-ficción
• Separación de secciones dentro de un capítulo

Implementación:

<p>Final de la primera escena.</p>

<hr/>

<p>Inicio de la segunda escena.</p>

<p>Final de la primera escena.</p>

<hr/>

<p>Inicio de la segunda escena.</p>

Configuración en InDesign

InDesign 19.3+ soporta exportación de separadores de contexto:

1. Crea un estilo de párrafo para separadores
2. En Opciones de exportación EPUB y HTML, configura para exportar como <hr>
3. Aplica el estilo donde necesites separadores

Estilo CSS para <hr>:

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2em 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2em 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

Capitulares Accesibles

Las capitulares (drop caps) son letras iniciales grandes que pueden causar problemas de accesibilidad si no se manejan correctamente.

Problema con Capitulares

Si una capitular se implementa como imagen o elemento separado, lectores de pantalla pueden:

• Leer la letra dos veces
• Perder la continuidad de la palabra
• No reconocer la palabra completa

Solución: Pseudo-elementos CSS

InDesign 19.3+ exporta capitulares usando pseudo-elementos CSS, que son accesibles:

p.drop-cap::first-letter {
  font-size: 3em;
  line-height: 1;
  float: left;
  margin-right: 0.1em;
}

p.drop-cap::first-letter {
  font-size: 3em;
  line-height: 1;
  float: left;
  margin-right: 0.1em;
}

Ventajas:

• Lectores de pantalla leen el texto normalmente
• Efecto visual se mantiene
• No duplica contenido

Configuración en InDesign

1. Crea un estilo de párrafo con capitular
2. Configura la capitular en Opciones de estilo de párrafo > Capitulares y estilos anidados
3. InDesign exportará automáticamente usando pseudo-elementos

Checklist de Implementación

Antes de exportar tu EPUB desde InDesign:

• ✅ Todos los estilos de párrafo tienen etiquetas HTML configuradas
• ✅ Jerarquía de encabezados es correcta y secuencial
• ✅ Todas las imágenes tienen texto alternativo descriptivo
• ✅ Imágenes decorativas tienen alt="" (vacío)
• ✅ Tablas usan herramienta de tabla de InDesign (no imágenes)
• ✅ Capitulares configuradas mediante estilos (no manualmente)
• ✅ Separadores de contexto usan estilo específico
• ✅ Idioma del documento configurado correctamente
• ✅ Metadata de accesibilidad completado
• ✅ Orden de lectura verificado en Panel de Artículos

Después de exportar:

• ✅ Añadir atributos epub:type y role a secciones
• ✅ Verificar y mejorar estructura de tablas
• ✅ Añadir descripciones largas donde sea necesario
• ✅ Validar con EPUBCheck y Daisy ACE

La implementación correcta de accesibilidad en InDesign ahorra tiempo significativo en post-procesamiento y garantiza un EPUB de alta calidad desde el inicio.