Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Guía de Principiante al Correo Accesibilidad (Checklist + Recursos)

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Esta guía le guiará a través de una lista de más de 30 mejoras se pueden hacer a su correo electrónico para asegurarse de que son tan accesibles como sea posible. También está lleno de tutoriales y enlaces útiles, así que marque esta página y hacerla tu ir a recursos para acceso de correo electrónico.

feature image from Wax Seal Logo Mockup on Envato Market
Imagen característica de WaxSeal logotipo maqueta en Envato Market

Nota: este tutorial es parte de valor de una semana de contenido de correo electrónico sobre Tuts+ Web Design – la guía de aprendizaje del Dominio de Correo Electrónico HTML para más!

Correo Electrónico Profesionales: Es el Momento de Priorizar la Accesibilidad

Ponemos mucho esfuerzo en los boletines, campañas de marketing y otros correos electrónicos que enviamos. Nos elaborar cuidadosamente el mensaje correcto. Diseñamos diligentemente las visuales. Probamos triunfalmente en Outlook.

Y vale la pena. Correo electrónico sigue siendo cómo la mayoría de la gente prefiere escuchar a las empresas, y como canal de marketing, tiene un rendimiento promedio de la inversión de 32 a 1.

Pero aún así, la mayoría de nosotros podría hacer aún mejor. Mensajes de correo electrónico HTML no tradicionalmente diseñados y codificados con accesibilidad en mente. Como resultado, muchos de nuestros destinatarios luchan participar en, y nos estamos convirtiendo a parte de nuestra audiencia.

A veces las mejoras son evidentes. Si su correo electrónico toda consiste en letra pequeña, la mayoría de nosotros más de 25 años tendrá un tiempo difícil leerlo. Pero más a menudo, las barreras que ponemos entre nuestro mensaje y nuestros recipientes son más sutiles. Admito que me tomó un momento para notar el problema en la siguiente foto:

Una vez que nos damos cuenta de estas cuestiones, a menudo son fáciles de arreglar. Al leer esto, ya está tomando un importante primer paso para hacer tus mensajes de correo electrónico accesible a más personas.

Si eres nuevo en codificación de mensajes de correo electrónico, te recomiendo primero leer los tutoriales de Nicole Merlin. Estos le enseñará los fundamentos de HTML emails, y cómo se diferencian de las páginas web.

Construiremos en esas habilidades como aprender cómo aplicar consideraciones de accesibilidad para nuestros correos electrónicos.

¿Qué Se Entiende por "Accesibilidad"?

En esencia, accesibilidad correo electrónico trata de hacer tus e-mails como muchos de sus destinatarios como sea posible, sin importar sus circunstancias. Generalmente pensamos de la accesibilidad como contable para diferentes discapacidades y eso es cierto, pero es realmente una definición más amplia que eso, como se indica por Sami Keijonen:

"Todos somos diferentes y nuestras necesidades pueden cambiar con el tiempo." – Sami Keijonen

Discapacidad viene en muchas formas y niveles de gravedad. QUE es Mundo Informe sobre discapacidad se estima que 15% de la población mundial vive con alguna discapacidad. Dependiendo de su situación, estas personas pueden tener acceso a la tecnología asistiva que facilita las tareas diarias. Para hacer nuestros correos más accesible, hay que evitar colocar obstáculos delante de las personas así como las herramientas que dependen.

Comenzar Con una Base de Experiencia

Seleccione un correo electrónico que has enviado recientemente. Abrir en la pantalla, o imprimirlo para que pueda tomar notas en él.

¿Cuál es el objetivo del correo electrónico? ¿Qué medidas deben tomar los beneficiarios después de leerlo, o ¿qué información debe tener aprendido?

¿Qué elementos se compone el email? ¿Cómo cada uno contribuye a la meta? ¿El correo electrónico todavía tendría sentido si uno de los párrafos, enlaces o imágenes fueron quitado?

Pidiendo a este tipo de preguntas le ayuda a definir la línea base experiencia – el mínimo que necesita para comunicarse con éxito al destinatario. Esto podría ser tan simple como un enlace y su etiqueta, o puede haber que más necesita transmitir.

Sobre todo, la experiencia de la línea de base debe estar disponible para todos los destinatarios acceder y entender. Y todo lo demás debe diseñarse para no ponerse en el camino. Ahora para los detalles...

1. Hacer Texto Legible

Evitar Paredes de Texto

Más el párrafo más difícil que es leer. Esto se aplica a todos, pero especialmente las personas con dislexia u otras dificultades de aprendizaje.

Estos son algunos consejos para hacer tu texto más escaneable:

  • Divide los párrafos largos en más cortos. Cada párrafo debe tener un solo foco. Lea cada frase y ver si se centra en lo mismo que la última. Si no, iniciar un nuevo párrafo.
  • El grupo los apartados relacionados con epígrafes descriptivos. Si se utiliza el nivel de más de un título, asegúrese de que la jerarquía tiene sentido; normalmente vamos a usar un <h1> para el título principal, <h2> para cada sección, <h3> para sub secciones y así sucesivamente. Utilizando elementos de la dirección semántica también facilita su correo electrónico navegar usando lectores de pantalla.
  • Utilizar cursiva o negrita para enfatizar, pero utilizarlos con moderación. Si usted subrayar todo, nada está parado hacia fuera.
  • Presentar grupos de puntos como con viñetas (<ul>) o números (<ol>) listas para que sean fácilmente digeribles.
  • Incluyen gráficos para visualizar y apoyar el contenido del texto.

Utilice Palabras Sencillas

Si eres un diseñador o desarrollador, la escritura no puede ser parte de su trabajo. En ese caso, considere la posibilidad de compartir este tutorial con tu colega o cliente. Cuando se trabaja para hacer que nuestros correos sean accesibles, el lenguaje que utilizamos es al menos tan importante como los aspectos más visuales o técnicos.

Recuerde que la gente lea en niveles de lectura diferentes, por muchas razones. Pueden tener recipientes con dislexia. Usted podría escribir en su segundo idioma. O tal vez están familiarizados con la jerga de la materia.

Si está escribiendo a un grupo de personas sobre un tema, usted será a menudo ser más versados en la materia que ellos. Cuanto más sabemos sobre algo, más nos olvidamos de lo que es para no saber. Este fenómeno se conoce como la "maldición del conocimiento".

Si no estás seguro si gente menos familiarizados con el tema pueda entender tu escritura, encontrar a alguien que pida una devolución. Sus colegas pueden sufrir también de la maldición del conocimiento. ¿Tal vez usted puede obtener ayuda de un amigo, miembro de la familia o uno de sus suscriptores?

Cuando firmé escribir para Tuts+, me enviaron a su guía de estilo que tiene algunos ejemplos de opciones de la palabra en inglés llano:

Uso de "comprar", no "compra". Uso de "ayuda", no "ayudar". Utilizar "sobre", no "aproximadamente".

¿Podría reemplazar cualquiera de las palabras en sus correos electrónicos con los más simples? ¿Por qué mantener una lista de términos que comúnmente utilizamos confuso y palabras a utilizar en su lugar?

También hay varias fórmulas para medir cómo legible su texto es.

Si copia y pegar el contenido en Word o Outlook, puede obtener su legibilidad clasificado mediante dos pruebas: prueba de la facilidad de lectura de Flesch, que anota la facilidad de lectura de 0 a 100, y la prueba de nivel de grado Flesch-Kincaid, que estima en lo que Estados Unidos escuela de grado por lo general alguien entendería el texto.

Estas pruebas miran el número promedio de palabras por frase y el número promedio de sílabas por palabra, como indicadores de lo fácil que es el texto a leer.

Para pruebas más amplias, trate de readable.io. Esta herramienta en línea le permite ejecutar su contenido a través de varias pruebas de legibilidad. Sus planes pagados incluso ofrecen una herramienta específicamente para mensajes de correo electrónico: reenviar el correo a una dirección de correo electrónico específico, y respondan con un informe de lectura automatizada.

Utilice Tamaños de Fuente 14px o Mayor

Aumentar el tamaño de fuente no es sólo un truco tonto para hacer tu ensayo parece más largo.

También es una forma sencilla para facilitar la lectura de su correo electrónico. 14px es el mínimo absoluto para la copia de cuerpo. El texto aquí en Tuts + tiene un tamaño de 18px, y que no se siente demasiado grande tampoco.

Las partidas deben ser suficientemente grandes a facilidad de la copia de cuerpo. Tipo de Escala es una herramienta práctica de cálculo y vista previa de tamaños de fuente adecuado. Más información sobre la escala y jerarquía de estos tutoriales:

Asegúrese de que Usted Utilice Colores Contrastantes

Como regla general, texto oscuro sobre un color de fondo claro es más fácil de leer para la mayoría de las personas.

Si se utiliza una combinación de color con bajo contraste, tales como texto gris claro sobre un fondo blanco, puede ser difícil de leer para las personas con baja visión o ceguera para los colores. Bajo contraste también hace al texto más difícil de leer en condiciones de poca iluminación como luz directa del sol.

Texto claro sobre un fondo oscuro también puede trabajar bien, especialmente para personas con sensibilidad a la luz, o cuando se utiliza una pantalla brillante en un entorno oscuro. Pero para las personas con presbicia (visión borrosa), texto claro sobre un fondo oscuro crea a una especie de efecto de halo o resplandor. Todo el mundo experimenta finalmente presbicia en cierto grado. Capacidad de nuestros ojos para enfocar disminuye con la edad, suele comenzar en algún momento después de los 40.

Hay muchas herramientas para comprobar si el contraste de color es bastante alto:

  • contrast.ratio.com es una herramienta útil con un nombre de dominio memorable. Al entrar en una combinación de color, al instante los avances del contraste y cambia la barra de direcciones a un enlace directo para que puedan compartir la combinación de colores.
  • Me gusta también mucho el buscador de contraste tanaguru, que sugiere otras opciones de color si el contraste es demasiado bajo.


color contrast tool
Así es, PapayaWhip y DarkSlateGrey, hermoso

Evitar Fuentes de Ancho Delgado

Fuentes ultra ligeras han sido populares con diseñadores desde hace algunos años, pero son menos populares con personas con baja visión.

Contrast good font weight bad
Buen contraste, fuentes pobres de ancho

Cuando se combina con el color bajo contraste y pantallas mayores, estos pesos de fuente son particularmente difíciles de leer. Para una mejor experiencia de lectura, usar pesos de 500 (normal) y para arriba.

Alinear Su Texto al Body, no justificar o Centrar

Idiomas que se leen de izquierda a derecha, como el inglés, son fáciles de leer cuando izquierda alinea. Para escrituras de derecha a izquierda como los usados en árabe, persa y hebreo, alinear el texto a la derecha.

Incluso si usted prefiere la mirada de texto centrado, debe evitar si se puede. El texto es más fácil para que todos puedan leer cuando comienza cada línea justo debajo de la anterior. Esto es cierto incluso para las partidas pero es especialmente importante para la copia de cuerpo.

Por último, usted nunca debe usar alineación justificada, donde se arregla el texto por lo que tiene los bordes incluso en ambos lados. Texto justificado es más difícil de leer en general, y especialmente en los navegadores web y clientes de correo electrónico, que no manejan bien justificación.

Uso Alto de Línea lo Suficientemente Grande como el Alto

Palabras necesitan espacio para respirar.

Si las líneas del texto están demasiado juntos, puede ser difíciles para el ojo separar. Resulta demasiado fácil saltar accidentalmente a la línea incorrecta. Si están demasiado lejos aparte, comienzan a mirar como párrafos independientes.

La mejor altura de la línea a utilizar depende del tamaño de la fuente y la longitud de línea. Pero si usted quiere una regla rápida, general, se puede ir muy mal con una altura de la línea de 1,5 veces el tamaño de fuente. Por ejemplo, un tamaño de 16px sería cómodo para leer con una altura de línea de 24px.

Soporte de cliente de correo electrónico para la propiedad line-height es principalmente sólido, excepto algún comportamiento extraño en Outlook. Utilizar valores de px en vez de em, porcentaje o valores "sin unidades" para resultados más consistentes.

Hacer legible la longitud de la línea (la "Medida")

Cuanto más lejos vas a lo largo de una línea de texto, más difícil es encontrar su camino de regreso a donde empezaste.

Si el texto es demasiado amplio, el ojo tiene que moverse mucho, y es difícil seguir la lectura de una línea a la siguiente.

Para una óptima legibilidad, apunte para una longitud de alrededor de 45-75 caracteres.

El tamaño de fuente, altura de línea y longitud de la línea influyen entre sí. Hay muchos enfoques para decidir las proporciones. Algunas personas les gusta usar la proporción áurea (aunque sus propiedades mágicas no son necesariamente una receta garantizada para el éxito). Usando la Calculadora de Proporción Tipografía, puede rápidamente obtener línea recomendaciones de altura y calcular la longitud de la línea aproximada (CPL, o caracteres por línea) basada en su tamaño y columna la anchura de la fuente.

Usar un Marcado Semántico

Tradicionalmente, los desarrolladores de correo electrónico han codificados cada parte de su correo electrónico como marcado de tabla, como filas de tabla separada para cada título y el párrafo. Esto es en parte porque algunos clientes de correo electrónico utilizan para cambiar los estilos de los elementos semánticos, pero también porque la gente conseguiría tan familiarizada con cómo tablas HTML trabajaban terminaron usando por defecto.

Como dice el refrán va: si todo lo que tienes es un martillo, todo parece un clavo.

Pero como clientes de correo han mejorado su representación, y como los desarrolladores correo electrónico hemos mejorado colectivamente nuestras prácticas de codificación, muchos han encontrado que hay más desventajas que ventajas a la tabla de basan de estilo de codificación.

Si en lugar de otro código sus párrafos, listas y títulos, como <p>, <ul>, <ol>,<h1>,<h2>, etc., personas que utilizan lectores de pantalla y otras tecnologías de asistencia se navegar más fácilmente y dar sentido a su contenido.

Usted todavía tendrá el mismo nivel de control sobre el contenido de su apariencia de estilo con CSS, y va a ser más accesible, con menos código. Tienes que aplicar los márgenes que desee para cada elemento, mientras que estilos como el tamaño de fuente de copia de cuerpo y color se puede ajustar en un elemento primario y heredado por todos los párrafos.

Aquí es un ejemplo básico:

Utilizar el lang Attribute

Mayoría de ordenadores y smartphones vienen con el software de lector de pantalla que lee texto como discurso. Con el fin de pronunciar palabras correctamente y no como un especialista italiano, pantalla lectores necesidad de saber el idioma que el texto está escrito.

Para especificar el lenguaje de contenido, utilizamos el atributo lang. Aquí está un ejemplo rápido de cómo una sentencia francesa suena con y sin el idioma especificado (video de Léonie Watson):

El atributo lang trabaja con cualquier elemento HTML. Si utilizas elementos diferentes en el mismo correo electrónico, especificar el idioma correcto para cada parte.

La lengua principal debe establecerse para la <html> elemento. Pero porque algunos clientes de correo electrónico eliminará este elemento cuando se muestra el correo electrónico, es más seguro repetir también el atributo de un elemento contenedor dentro de la <body>, como un <div> todo el contenido de todo.

Para encontrar el valor correcto para su idioma, usted puede consultar el Registro de Subetiquetas de Idioma IANA, que es un archivo de texto largo de idiomas y sus valores correspondientes de la subetiqueta. O use la búsqueda de subetiquetas de idioma más amigable que le permite buscar la misma información.

Aquí está la frase francesa desde antes, con la lengua bien configurada:

2. Utilice Color considerablemente

No Comunicarse Exclusivamente Con el Color

Uso reflexivo del color puede ayudar a apoyar su mensaje o transmitir un estado de ánimo. Pero si confías en el color para comunicar cierta información, puede perderse por los beneficiarios que son ciegos, ciegos de color, o de una cultura donde esos colores llevan significado diferente.

Por ejemplo, en lugar de utilizar un punto rojo o verde para indicar si un producto está en stock, utilizar el texto como "en stock" y "sold out" y utilizar color sólo para apoyarlo.

Tener Ceguera Para los Colores en Cuenta

Hay diferentes tipos de daltonismo que causan que las personas que tienen dificultad para distinguir colores. El tipo más común es la ceguera para los colores rojo y verde, que hace difícil diferenciar los tonos rojos y verdes apartes. Total de daltonismo, que todo lo hace ver blanco y negro, es raro.

Al elegir colores para texto, gráficos y elementos de diseño, ser conscientes de las combinaciones de colores en la gama del rojo-naranja-amarillo-verde, colocados muy juntos. Especialmente si los colores son similares en brillo y saturación.

También hay otras combinaciones de color que pueden ser incómodos para personas con tipos de ceguera de color diferente distinguir. Puede utilizar un simulador de ceguera de color para atrapar cualquier problema en su correo electrónico. Hay muchos para elegir.

No utilice Colores Brillantes, Saturados

Para personas con sensibilidad a la luz y las migrañas, mirando a contraluz pantallas puede causar cansancio ocular y actuar como un desencadenante de migraña. Esto puede empeorar por colores brillantes, especialmente en tonos azules y rojos.

Para grandes áreas tales como colores de fondo, uso de colores más apagados cuando sea posible.

Evitar Texto Enlace Sin Subrayado o Coloreado (Especialmente Azul)

No todos los enlaces son azules y subrayados, pero depende de todo el texto subrayado y azul. Al menos eso es lo que los lectores esperan.

Para evitar confusión y frustración, no utiliza colores y subrayados para enfatizar.

3. Verifique que Sus Imágenes Sean Accesibles

Evitar Texto en Imágenes

Muchos remitentes todavía diseñar correos electrónicos con el texto en imágenes en vez de en texto HTML. Si su empleador o cliente exige representación perfecta de píxeles, es fácil ver cómo esto podría parecer una buena solución. Pero las desventajas para atrapar el texto en archivos de imagen son mayores que las ventajas.

  • Los lectores de pantalla no pueden leer texto en imágenes.
  • Si bloqueo de imagen está activada en el cliente de correo, o si el correo es leído fuera de línea, romperán las imágenes.
  • No puede seleccionar, copiar y pegar el texto.
  • Software de traducción no puede interpretar el contenido.
  • El texto no puede ser correctamente escalado o adaptarse a tamaños de pantalla diferentes o niveles de zoom.

Algunos de estos problemas se pueden solucionar en parte el contenido como texto alternativo de la imagen y estilo con CSS. Pero desafortunadamente, clientes de correo electrónico no comparten la forma coherente de manejar texto alternativo y bloqueo de imagen. Y una jerarquía, como las rúbricas, se perdería en la versión de texto alternativo del contenido.

Si su diseño requiere texto sobre una imagen, backgrounds.cm le ayuda a este código de manera que funciona en la mayoría clientes de correo electrónico principal.

Por último, en situaciones donde no puede evitar el uso de imágenes para el texto, agregar el role="text" a la imagen para que los lectores de pantalla tratará su valor texto alternativo como texto normal.

Usar Texto Alternativo Util

Utilizamos imágenes para muchos propósitos diferentes. Algunos contienen información importante, otros son ilustraciones o parte de la disposición.

Todas las imágenes deben tener un atributo alt, pero el atributo no debería tener siempre un valor. En casos donde no es necesario texto alternativo, utilice un atributo alt en blanco para evitar que los lectores de pantalla deletrear el nombre de archivo de imagen o enlace URL. Revisa este ejemplo de Rémi Parmentier:


Si la imagen tiene contenido valioso, describir en el texto alternativo. O si la imagen es un enlace, añadir texto alternativo para describir a donde apunta el enlace.

W3C tiene un árbol de decisión útil para texto alternativo. Cubre la mayor parte de los usos comunes de imágenes y cómo utilizar el atributo alt en cada caso.

Usar GIFs Responsablemente

Nuestra principal opción para incluir animaciones en nuestros mensajes de correo electrónico que funcionarán en la mayoría de clientes de correo electrónico es utilizar GIFs. Hemos visto muchos ejemplos de GIF en correo electrónico. Pueden ser grandes para explicar ideas más con eficacia que podría con una imagen estática, o para agregar interés visual. Cronómetros y previsualizaciones de vídeo son otras aplicaciones populares.

Por desgracia, GIFs pueden causar problemas para algunos receptores.

En casos extremos, animaciones intenso pueden desencadenar convulsiones en personas con epilepsia fotosensible. Si tienes GIFs esa característica parpadear o destellar colores, audaces patrones o con alto contraste, merece la pena probarlos usando Fotosensible Epilepsia Análisis Herramienta gratuita el Trace Center (sólo Windows). Esta herramienta captura animaciones desde tu pantalla e identifica posibles riesgos de convulsión.

Aunque menos dramáticos, sutiles animaciones demasiado pueden causar problemas. GIFs que para siempre del lazo pueden distraer de su otro contenido, especialmente para las personas con autismo o con trastorno por déficit de atención con hiperactividad (TDAH). Correo electrónico ácido ofrece una animación las mejores prácticas para los suscriptores con TDAH.

4. Prestar Atención al Diseño y las Tablas

Evitar Tablas Innecesarias

Aunque las tablas HTML son necesarias para conseguir algunos diseños para mostrar correctamente en clientes de correo electrónico, sobre todo en el Outlook, desarrolladores de correo electrónico tienden a les por uso excesivo.

Recomendaría buscar a través de su código de plantilla para cada instancia de <table> y evaluar si esa <table> es necesaria. A menudo me encuentro con etiquetas de tabla que podrían reemplazarse fácilmente con un más accesible y liviano <div>, o incluso eliminarse por completo, sin que esto afecte a cómo se procesa el correo electrónico.

Usar role="presentation" en Diseño de Tablas

En las mesas restantes, agregar el role="presentation". Los lectores de pantalla suelen anunciaron cada celda de tabla que se encuentran, que puede hacer muy tedioso de leer mensajes de correo electrónico.

Mediante la adición de role="presentation", están diciendo el lector de pantalla para el tratamiento de la tabla como un elemento de texto normal y a no navegar como una tabla de datos. Revisa los ejemplos de Accesibilidad en correo electrónico: Parte II por Mark Robbins.

Si su correo electrónico tiene tablas que contienen datos de la tabla reales, no utilice el atributo de role en eso.

Usar aria-hidden="true" en Elementos de Espaciador

Como marginpadding un poco inconsistente apoyo a través de clientes de correo electrónico, no es infrecuente utilizar elementos como <div> o incluso de vieja escuela espaciador imágenes para agregar espacio a un diseño de correo electrónico.

Tales elementos de espaciador no agregan ningún valor para personas que leen su correo electrónico con un lector de pantalla. Para hacer que los lectores de pantalla ignore un espaciador, agregue el atributo de aria-hidden="true" al elemento.

5. Diseño de Vínculos Claros y Objetivos

Hacer Enlaces Obvio, Más Allá de Color

Enlaces son a menudo la parte más importante de un correo electrónico, ya que son como sus destinatarios dar el siguiente paso. Dándoles un color diferente que el resto del contenido les hará más fácil de encontrar. Texto azul tiene la mejor oportunidad de ser reconocido como un enlace, pero puede utilizar otros colores como ellos destacan, incluso para usuarios ciegos de color.

Evite usar su color de enlace para el texto solucionado, para evitar confusión.

Subrayando el texto también ayuda a sugerir es clickable. Algunos prefieren a sus enlaces en negrilla en su lugar, por razones estéticas, pero cabe realizar una negrita para enfatizar.

Es generalmente mejor evitar "Botones de fantasma", un estilo común de botones con un color de contorno pero un fondo transparente. Estos pueden ser difíciles para los receptores reconocer como activo, especialmente cuando se coloca en la parte superior una imagen de fondo. Estilos de botón con un fondo contrastante de color son más fáciles de descubrir.

Utilizar el Texto de Enlace Util

Personas que leen su correo electrónico con un lector de pantalla pueden saltar de enlace sin leer el contenido entre ellos. Y los destinatarios de la baja visión pueden leer que correo zoom, falta el contexto alrededor de tus enlaces. Enlaces tener acceso a ellos, el texto del vínculo debería poder independiente y todavía tienen sentido.

Un texto breve y descriptivo del enlace ayuda a la gente navegar eficientemente.

Enlaces apuntando a lugares distintos no tienen el mismo texto del enlace. Hacer cada uno de ellos único, no hay enlaces "Leer más"!

Evite Mostrar largo sitio web URL como texto del enlace, puesto que son generalmente menos útiles como texto de enlace a todos los destinatarios.

Hacer Botones Grandes y Totalmente Clickable

Para los enlaces más importantes en tu correo electrónico, un bonito botón de llamada a la acción grande puede dar un buen aumento en clics en enlaces de texto.

Tener un gran suficiente área para haga clic en el botón para facilita todos a golpear, especialmente muchos usuarios con discapacidades físicas.

Fuego tiene una buena descripción de formas de código de botones de correo electrónico. Para evitar dificultades y frustraciones, elegir uno donde la superficie de todo botón es clickable.

Litmus button

Al decir esto, tengo una preferencia personal para buttons.cm.

No Hacer Todo un Link

Para aumentar clics, puede ser tentador convertir cada título, la imagen y el párrafo incluso, en un enlace a tu página de inicio. Esto también significa que la gente puede hacer clic en el enlace fácilmente sin tener que ser demasiado exacto. Sin embargo, hay algunas desventajas a todo hacer un enlace.

Para personas que leen su correo electrónico con un lector de pantalla, se leerá cada enlace, para repetir el mismo enlace para cada elemento hará que tu correo tedioso navegar.

Si tienes cerca unos de otros los elementos que deberían enlazar al mismo lugar, por ejemplo, un icono con una etiqueta de texto, una buena solución suele ser envolverlos en el mismo link, crear una sola área clicable.

Si la mayor parte de su correo electrónico consta de enlaces, esto puede también dificultar su correo electrónico para desplazarse en los móviles y demás pantallas táctiles. Especialmente para personas con temblores u otros problemas de control muscular, lo que es a través de un correo electrónico sin accidentalmente, haga clic en vínculos inesperados puede ser un desafío.

Considerar los Estilos de :hover y :focus

Dando enlaces una sutil :hover el estilo es una forma simple de confirmar a las personas que lo son por clic es, de hecho, un enlace.

Al navegar a través de los enlaces en un correo electrónico con el teclado, ayuda de estilos de :focus tus lectores mantienen la pista que enlaza están en. La mayoría de los navegadores y clientes de correo electrónico añaden un contorno como un defecto :focus estilo para enlaces. Es generalmente mejor no quita este esquema, pero si lo hace, asegúrese de reemplazarlo con una igualmente clara :focus estilo.

Cualquier momento añades un estilo :hover, es generalmente bueno a aplicar el mismo estilo :focus así la gente tendrá una experiencia similar Si navega con su ratón o teclado.

Enlace a Contenido Accesible

Si bien no es algo que siempre puede controlar, cuando se enlaza a páginas web es bueno al contenido de favor que también es accesible.

Si puedes elegir entre vincular a dos artículos similares, donde uno es fácil de leer y el otro tiene contraste de coloración pálida o un tamaño de fuente pequeño, todo lo demás siendo igual, ir con el más accesible si se puede.

6. No te Olvides de Texto Plano

Incluyen una Versión de Texto

Debido a los problemas de accesibilidad que pueden experimentar con muchos correos electrónicos HTML, algunos destinatarios deciden usar en su lugar la versión de texto de mensajes de correo electrónico.

Puesto que usted no puede usar imágenes, tamaños de letra, colores y así sucesivamente, sus opciones de diseño son limitadas. Al componer la versión texto, reflexionar sobre la mejor manera de presentar su mensaje con solo texto y preocuparse menos sobre lo que es consistente con la versión HTML.

Prestamos especial atención a cómo formatear enlaces, ya que sólo la URL del enlace será enlace. Un buen patrón es escribir una etiqueta de enlace descriptivo seguida de dos puntos en una línea y la URL del enlace en la línea siguiente.

Muchos ESPs (proveedores de servicio de correo electrónico) generará automáticamente una versión de texto sin formato para usted, pero si se da una lectura a través de, usted encontrará generalmente poco formas de hacerla más legible.

7. Familiarizarse Con las Pruebas y Herramientas

Usar Estas Herramientas Específicas de Correo Electrónico

Hay muchas maneras de comprobar su correo electrónico, para ayudar a encontrar problemas de accesibilidad tanto para comprobar que sus soluciones funcionan como se esperaba.

Un buen lugar para empezar es accesible-email.org, que le proporciona un informe de accesibilidad de su correo electrónico. Comprueba que todas las imágenes tienen un atributo alt, que niveles de partida siguen una jerarquía correcta y muchos de los otros puntos que hemos cubierto aquí.

thorough report from httpwwwaccessible-emailorg
Por lo general exhaustivo informe de accessible-email.org

Si es la primera vez que está evaluando la accesibilidad de sus correos electrónicos, las posibilidades son que usted conseguirán una lista limpia de mejoras que puede hacer. Cuando vuelvas a probar el código de correo electrónico actualizada, puede esperar a la satisfacción de cruces rojas en verde las marcas de verificación.

Con su popular sistema de correo electrónico, herramientas de prueba, Litmus le permite controlar muchos aspectos de la accesibilidad de su correo electrónico, como la versión de texto sin formato, la vista de imágenes y simulaciones de ceguera de color diferente de su diseño de correo electrónico.

Pruebas con Lectores de Pantalla

Una buena forma de experimentar tu email como algunos de sus destinatarios es intentar leer usando tecnologías asistivas como lectores de pantalla. Mayoría de sistemas operativos tienen un integrado de lector de pantalla que usted puede probar con:

También puede considerar pruebas con lectores de pantalla de terceros. Los lectores de pantalla más utilizadas son JAWS (comercial) y NVDA (fuente abierta), que funcionan en Windows. Para JAWS, una licencia de 90 días está disponible, que ayuda a reducir el costo de las pruebas.

Instalar su Navegador Recomendado: Herramientas y Plugins

Todos los navegadores web mayores ahora vienen con herramientas para desarrolladores integradas para pruebas de accesibilidad. Aunque no son específicos de correo electrónico, se aplica igual mayoría de los problemas.

Uno que utilizo a menudo es la pestaña auditoría en herramientas para desarrolladores de Chrome, que anota la página y le da un práctico Resumen de cuestiones a corregir.

Además, existen varios plugins de terceros que pueden ayudar a conseguir una perspectiva ligeramente diferente en su mayoría los mismos puntos. Estas son algunas que recomiendo:

  • tota11y es un bookmarklet y una extensión de Chrome que puede utilizar en el navegador para comprobar su correo electrónico. Sus controles son contraste de color de texto y señales ARIA. También muestra cómo los lectores de pantalla ven los distintos elementos en su correo electrónico.
  • Web Developer es una extensión del navegador para Chrome, Firefox y Opera, que facilita la desactivación de imágenes de prueba y encajado CSS, entre otras cosas.
  • La extensión de Chrome funkify consiste en un conjunto de "simuladores de discapacidad". Cada modo modifica la página de maneras que representan diferentes desafíos, tales como dislexia y manos temblorosas, para ayudarle a evaluar qué tan bien mantiene su diseño. Dale funky a también viene con tota11y incluido como uno de sus modos.

Comprender la Importancia de las Pruebas de Usuario

Ninguna herramienta o simulador puede reemplazar absolutamente hablando con personas que viven con discapacidad y conocer cómo interactúan con su correo electrónico. InVision tiene un útil artículo sobre cómo empezar con las pruebas de accesibilidad de usuario.

Conclusión

Después de haber leído este artículo, lo mejor que puede hacer es encontrar una rápida mejoría puede hacer a uno de sus correos electrónicos y hacerlo.

Cualquier paso que tomar hacia la creación de correos electrónicos más accesibles le ayudará a incluir a más personas, que aumenta su audiencia. Y cuando usted solucionar los problemas que dificultan su correo electrónico a leer para las personas con discapacidad, las posibilidades son que usted estará también haciendo las cosas mejor para todos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.