> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.laposta.org/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server.

# ¿Qué requisitos cumple un código HTML accesible?

> Pautas sobre encabezados, tablas, textos alternativos y lectores de pantalla, entre otros, para un boletín importado o una plantilla propia.

La estructura de tu código HTML determina qué tan bien un lector de pantalla puede leer tu boletín en voz alta. Esto es relevante cuando importas un boletín o creas tu propia plantilla. En el editor drag & drop [no defines tú mismo el HTML](/kan-ik-zelf-html-code-aan-mijn-nieuwsbrief-toevoegen).

## Utiliza un código sencillo y semántico

El HTML para boletines suele ser complejo, ya que tiene que funcionar en muchos programas de correo electrónico diferentes. Aun así, mantén el código lo más sencillo posible, especialmente pensando en los lectores de pantalla. Con un código más simple también puedes crear un boletín atractivo y moderno.

Elige etiquetas que se ajusten al contenido. Pon un encabezado en una etiqueta `<h>`, para que un lector de pantalla reconozca directamente que se trata de un encabezado:

```html
<h1>Título del boletín</h1>
<h2>Encabezado de un artículo</h2>
<p>Un párrafo de texto.</p>
<ul>
  <li>Un elemento en una lista</li>
</ul>
```

Utiliza etiquetas de encabezado en orden descendente (empieza con `<h1>`, dentro de este `<h2>`, y así sucesivamente), una etiqueta `<p>` para un párrafo y `<ol>`, `<ul>` o `<dl>` para listas, con etiquetas `<li>` en su interior.

Presta también atención al orden en el código. En HTML, el orden de las etiquetas no tiene por qué coincidir con el orden visible del contenido, pero un lector de pantalla sí sigue el orden del código. Especialmente cuando uses varias columnas, asegúrate de que este orden de lectura siga siendo lógico.

## Limita las tablas y utiliza role="presentation"

En los boletines, las tablas se utilizan a menudo para el diseño, aunque no estén pensadas para ello. Úsalas lo menos posible. Si aun así necesitas tablas, lo cual suele ocurrir mientras exista Outlook, añade el atributo `role="presentation"` a cada tabla que contenga una parte del contenido:

```html
<table role="presentation">
  <tr>
    <td>Una parte del contenido del boletín</td>
  </tr>
</table>
```

De este modo, un lector de pantalla no leerá en voz alta todas las celdas sueltas (las etiquetas `<td>`), sino únicamente el texto relevante.

## Ten en cuenta el uso del teclado y el zoom

No todo el mundo utiliza un ratón. Por eso, todo el contenido debe ser accesible también mediante el teclado, para que, por ejemplo, se pueda hacer clic en los enlaces. Puedes probar esto recorriendo el correo electrónico con la tecla Tab: todos los elementos importantes deben poder seleccionarse en un orden lógico. Si el orden en tu HTML es lógico, esto suele funcionar bien por sí solo.

Algunos lectores amplían el texto para poder leer mejor el boletín. En un ordenador de escritorio lo hacen con Ctrl y + o Comando y +, y en un teléfono o tableta pellizcando la pantalla. Como regla general, el boletín debe seguir siendo fácil de leer con una ampliación de hasta el 200 %.

## Utiliza bien el atributo alt

Muchos programas de correo electrónico no muestran las imágenes de forma predeterminada. En ese caso, el texto del atributo alt aparece en el lugar de la imagen. Para la accesibilidad, el texto alternativo es más que una alternativa a la imagen: es una parte esencial del contenido.

Por lo tanto, distingue entre dos tipos de imágenes:

* Asigna a una imagen puramente ilustrativa un atributo alt vacío (`alt=""`).
* Asigna a una imagen que forme parte del contenido un texto alternativo que reemplace a la imagen lo mejor posible. Puedes leer qué poner exactamente en dicho texto en [el contenido de tu boletín](/inhoud-van-jouw-nieuwsbrief-in-het-kader-van-toegankelijkheid). Si trabajas en el editor, puedes [rellenar el texto alternativo en el propio bloque](/kan-ik-een-alt-tekst-plaatsen-bij-de-afbeelding-in-mijn-nieuwsbrief).

## Comprueba tu boletín

Puedes comprobar la accesibilidad de diferentes maneras:

* Utiliza [WAVE](https://wave.webaim.org/). Laposta utiliza esta misma herramienta para comprobar las plantillas que elabora.
* Utiliza las [herramientas de accesibilidad](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) en las herramientas para desarrolladores de Chrome. Para ello, utiliza la versión web de tu correo electrónico.
* Haz pruebas tú mismo: visualiza el correo electrónico sin cargar las imágenes, haz que un lector de pantalla como [VoiceOver](https://www.apple.com/accessibility/iphone/vision/) de Apple lea el boletín en voz alta, navega con el teclado por todo el contenido e intenta hacer zoom.

Si prefieres no desarrollarla por tu cuenta, Laposta puede [diseñar y desarrollar una plantilla accesible para ti](/kan-laposta-helpen-een-toegankelijke-nieuwsbrief-te-maken).

## Artículos relacionados

#### [¿En qué debes fijarte para lograr un diseño accesible?](/vormgeving-in-het-kader-van-toegankelijkheid)

Haz que el diseño de tu boletín sea accesible para cualquier lector con un tipo de…

#### [Escribir contenido accesible para tu boletín](/inhoud-van-jouw-nieuwsbrief-in-het-kader-van-toegankelijkheid)

Haz que tu boletín sea más fácil de leer para cualquier destinatario y apto para…

#### [¿Cuál es el ancho ideal al importar un boletín?](/wat-is-bij-import-de-ideale-breedte-van-mijn-nieuwsbrief)

¿Creas un boletín fuera de Laposta? Asegúrate de que tenga un ancho de 600 a 620…

#### [Trabajar con el editor Joe antiguo](/hoe-werkt-de-editor-bij-een-joe-verouderd)

Coloca, rellena y mueve bloques en tu plantilla personalizada de tipo Joe y lee qué…