Accesibilidad
¿Por qué la accesibilidad?
Saludsa cuenta con más de 300.000 clientes, cada uno con capacidades muy distintas. Muchas de estas personas probablemente utilizan lectores de pantallas o navegan sus dispositivos con joysticks u otros periféricos. Para nosotros es muy importante que nuestro contenido pueda ser leído por la gran mayoría de personas, es por esto que debemos tomar en cuenta los siguientes puntos al momento de crear correos electrónicos. Estos puntos requieren muy poco trabajo sin embargo hacen una gran diferencia.
Partes:
Cada parte del mail consta con lo siguiente:
Existen dos partes principales en el código:
<mj-head> Donde se coloca lo siguiente:
<mj-preview> El subject del mail (la parte que se lee en el buzón de los mails).
<mj-attributes>Los atributos que se designan a cada etiqueta del mail, etiquetas que se definen a continuación.
<mj-style> Se usa para asignar clases y dar estilos específicos a cada uno.
</mj-head>
<mj-body> Donde se coloca lo siguiente:
Partes generales que le dan la estructura al mail:
<mj-section>: Contiene todos los elementos que se pueden incluir en el mail.
<mj-group>: Se recomienda usar solo para dos columnas, ayuda para que si hay dos o más columnas en una sección, al ver el contenido desde un celular este se mantenga visiblemente con la misma. posición y no uno debajo de otro.
<mj-column>: Establece el número de columnas que están en una sección.
Elementos que se incluye en cada parte mencionada anteriormente según corresponda:
<mj-text> Para agregar texto siempre hay que usar esta etiqueta seguida de los siguientes tags.
<h>Se refiere a los títulos, se recomienda numerarles (hasta h3) para establecer jerarquías en los títulos.
<p> Se refiere a cualquier texto, no es necesario numerarles.
<span> Esta etiqueta sirve para dar estilos específicos a una parte del texto, como cambio de color, tamaño, entre otras. Para poder aplicar los estilos se debe realizar con código CSS, usando la palabra style, por ejemplo:
<span style="font-size:18px;">
<mj-image> Para agregar imagen siempre hay que usar esta etiqueta. Seguida de la ubicación donde se encuentra la imagen, con
scr="xxx"por ejemplo:
<mj-button> Esta etiqueta se la usa para colocar botones en el mail, los cuales direccionan a otros sitios web con el propósito de facilitar la información para el usuario.
</mj-body>
IMPORTANTE:
SIEMPRE que se abre un tag, ya sea para crear secciones, columnas, dar estilos o agregar atributos se lo debe cerrar con otro tag el cual tenga la misma palabra del tag que lo abrió. Ejemplo:
<mj-text></mj-text>
SIEMPRE se debe ir cerrando cada parte de las que se va abriendo los tags, desde las más pequeñas hasta las que contienen todo como body o head.
Alt text
El atributo alt="" siempre debe ser usado en las etiquetas de imágenes <mj-image />. Utiliza el atributo para describir las imágenes para las personas que utilizan lectores de pantalla para leer sus correos. En caso que no sea necesario describir la imagen, debes de todas formas utilizar el atributo pero dejarlo vacío, caso contrario el lector de pantalla leerá en alto la url de la imagen.
<h1> <p>
Navegar este artículo resulta fácil porque está dividido en varias determinadas por <h2> y <p>. Estas etiquetas también sirven para que las personas que utilizan lectores de pantalla u otros métodos para navegar su dispositivo pueda saltar sin problema de una sección a otra. Recuerda siempre usar las etiquetas <h> y <p>, no es suficiente con modificar el estilo de <mj-text> o de <td>
Más información
Last updated
