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

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.

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:

<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:

<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. Si trabajas en el editor, puedes rellenar el texto alternativo en el propio bloque.

Comprueba tu boletín

Puedes comprobar la accesibilidad de diferentes maneras:

• Utiliza WAVE. Laposta utiliza esta misma herramienta para comprobar las plantillas que elabora.
• Utiliza las herramientas de accesibilidad 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 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.

Artículos relacionados