Consejos para mejorar el contenido del sitio web para lectores de pantalla

¿Tu blog está funcionalmente incluido?

Estoy trabajando con el equipo de CMI para mejorar este blog.

Recientemente, Melissa Eggleston destacó algunas áreas problemáticas que dificultan la lectura del blog para las personas con discapacidad visual. Aunque las soluciones estaban en mi radar, su nota las llevó al principio de mi lista de tareas pendientes.

Comencé a cavar a través de Pautas de accesibilidad al contenido web. Los documentos WCAG explican cómo hacer que el contenido web sea más accesible para las personas con discapacidades.

Los primeros temas en los que trabajamos son los elementos importantes para los lectores de pantalla: software de conversión de texto a voz que da voz a texto, imágenes, botones, etc.

Dado el uso cada vez mayor de la tecnología de voz: Apple Siri, Alexa Amazon, búsqueda por voz de Google, etc. – Adaptar contenido para lectores de pantalla es una decisión inteligente. Ayuda a las personas con discapacidad visual y a cualquier persona de su audiencia que utilice tecnologías de voz.

(Para probar el contenido de su lector de pantalla, intente Respuesta para Android y Narración para iOS.)

Léelo fácilmente

Una técnica que mejora la legibilidad para su audiencia también funciona bien para lectores de pantalla: use oraciones más cortas y viñetas.

Ann Smarty recomienda usar TextOptimizer verifique su contenido y sugiera mejoras en la legibilidad, incluida la elección de palabras, la longitud de oraciones y párrafos, la diversidad, pero la claridad, del vocabulario.

[email protected] es una herramienta útil para ayudar a verificar la legibilidad del contenido y sugerir mejoras, dice @SEOSmarty a través de @CMIContent @Brandlovellc. #strumentos Haga clic para enviar un Tweet

CONTENIDO VINCULADO MANUAL:

Evite las abreviaturas y los errores ortográficos

La corrección es importante sin importar quién o qué lea su contenido, pero la ortografía y la gramática exactas son especialmente importantes para los lectores de pantalla. Los errores ortográficos pueden hacer que los lectores de pantalla pronuncien mal una palabra.

También debe tomar medidas para evitar que los lectores de pantalla pronuncien acrónimos como palabras; piense en «mlah» para MLA, la abreviatura de Modern Language Association. Entre las mejores opciones: eliminar abreviaturas, usar puntos entre letras (MLA) o delimitar palabras a la primera mención seguida de su acrónimo (Modern Language Association [MLA]).

CONTENIDO DEL MANUAL RELACIONADO: Evidencia y edición: cómo hacer que el contenido sea menos aterrador

Usa títulos en lugar de negrita

Utilice títulos apropiados para indicar nuevas secciones o categorías en lugar de negrita. El uso constante de los encabezados H2 y H3 brinda a las tecnologías de asistencia y a todos los lectores un sentido de organización y estructura de la página.

El uso constante de los encabezados H2 y H3 brinda a las tecnologías de asistencia un sentido de estructura de página, dice @Brandlovellc a través de @CMIContent. #Accesibilidad Haga clic para enviar un Tweet

«Mantener una jerarquía adecuada también ayuda a comunicar cómo estos subtítulos se relacionan entre sí. Dicho esto, no comience el artículo con un subtítulo H3 seguido de un subtítulo H2 ”, escribe Ann Smarty. (Para obtener más información, consulte su artículo, Cómo estructurar su contenido para hacerlo accesible).

Imagen que muestra un ejemplo de una jerarquía adecuada.  El uso de encabezados H2 y H3 ayuda constantemente a comunicar cómo los subtítulos se relacionan entre sí.

CONTENIDO DEL MANUAL RELACIONADO: Lista de verificación requerida para crear contenido valioso

Espera los emojis

Si usa emojis en la copia, colóquelos al final de una oración. Ponerlos en medio de una interpretación de voz confusa y disminuir la legibilidad de su contenido, como Alexa Heinrich ilustre en este ejemplo:

PROPINA: Echale un vistazo Emojipedia o Diccionario emoji para ver cómo un lector de pantalla de emojis interpreta su contenido.

Presta atención a los hashtags

PascalCase y camelCase son el lenguaje del amor para los lectores de pantalla. Facilitan la lectura correcta de los hashtags. Con PascalCase, la primera letra de cada palabra está en mayúscula. Con camelCase, la primera letra de la primera palabra está en minúscula, mientras que la primera letra de cada palabra subsiguiente está en mayúscula.

El hashtag de captura de pantalla a continuación es un ejemplo de PascalCase:

Captura de pantalla de un clic para tuitear usando PascalCase para hashtags para que sea más fácil de entender para los lectores de pantalla.

El nombre de usuario de Twitter y los hashtags en la captura de pantalla a continuación usan camelCase:

Captura de pantalla de un clic en un tweet usando camelCase para hashtags para que sea más fácil de entender para los lectores de pantalla.

No «haga clic aquí»

El texto vinculado debe tener sentido independientemente de las oraciones circundantes. En lugar de decir «haga clic aquí», utilice una copia descriptiva, como «Vea esta publicación sobre el tema A». Los visitantes del sitio sabrán lo que verán si hacen clic en el enlace.

PROPINA: Los enlaces descriptivos facilitan a los motores de búsqueda la búsqueda de contenido.

Renunciar a las nuevas ventanas

Cuando incluya un enlace en el texto, permita que se abra en la ventana existente para minimizar la confusión y evitar restablecer el botón Atrás. Si tiene una razón principal por la que desea que los enlaces se abran en nuevas ventanas, proporcione una advertencia. Los visitantes pueden entonces decidir si quieren salir de la ventana actual y, si la abren, pueden encontrar el camino de regreso a la ventana original.

Reconsidere su texto incrustado en imágenes

Los lectores de pantalla no pueden leer el texto impreso en una imagen. Solo inserte texto relevante en una imagen si ha creado texto alternativo explicativo o subtítulos para ella.

Haga que las infografías y los gráficos funcionen

Si está creando una infografía o un gráfico, incluya una explicación detallada de los datos o la información proporcionada en la imagen.

Etiquete sus datos directamente en lugar de usar solo subtítulos codificados por colores para reducir la carga cognitiva de los usuarios. Esta técnica también reduce la necesidad de que el lector humano escanee de un lado a otro para hacer coincidir la leyenda con los datos. El siguiente gráfico muestra la etiqueta junto a la línea para cada región (EE. UU., Europa, Reino Unido y Asia Pacífico) en lugar de basarse en una leyenda codificada por colores.

Imagen que muestra un ejemplo de etiquetado directo con subtítulos junto a cada serie.

Fuente de imagen

Acceder al punto en texto alternativo

Sea descriptivo, no poético, con su texto alternativo. No incluya palabras clave innecesarias. En cambio, describe la imagen en una oración o dos. En una reciente Chat de Twitter de CMI, Alexa Heinrich publicó en Twitter: «La mayoría de los lectores de pantalla pausan descripciones de texto alternativas después de 120 o 125 caracteres, así que evite publicar imágenes o gráficos que contengan demasiadas copias si no puede escribir descripciones de imágenes efectivas para ellos».

Gorjeo, Facebook, Instagram, y LinkedIn todos le permiten agregar texto alternativo personalizado a las imágenes. Para obtener más información sobre cómo escribir descripciones de texto alternativas, consulte el artículo de ayuda de Alexa. El arte del texto alternativo.

Describir imágenes funcionales

Los sitios web utilizan imágenes con fines funcionales y también con fines ilustrativos. Las imágenes utilizadas como enlaces (incluidos los botones) deben incluir una alternativa de texto para describir su funcionalidad. Por ejemplo, el texto alternativo de un óvalo azul con la palabra «enviar» podría ser «un botón para enviar un formulario».

Complete los detalles del formulario

Utilice un símbolo, como un asterisco, para indicar un campo obligatorio en un formulario. Mostrar el asterisco al principio en un color diferente facilita la identificación de los campos obligatorios. En los formularios que le pide a un lector que complete, agregue «requerido» en la codificación para que los lectores de pantalla puedan decir «requerido».

Elimine los campos opcionales o al menos etiquételos como «opcionales».

Este artículo proporciona consejos detallados sobre cómo crear formularios que cumplan con WCAG 2.0. normas: Identificación de un campo obligatorio con la propiedad requerida por Aria.

Sección de bonificación: piense en el color

Es posible que el color no afecte la forma en que los lectores de pantalla interpretan su copia. Pero el color puede afectar la legibilidad de las personas con discapacidad visual. No es necesario que reconsidere por completo la paleta de colores de su marca, pero debe reconsiderar cómo está integrada funcionalmente en su sitio.

Por ejemplo, los visitantes daltónicos pueden no notar toques de color. CMI usa naranja para indicar hipervínculos en el texto. Melissa señaló que este color no cumple con los estándares de accesibilidad.

El objetivo es que los enlaces se destaquen claramente del cuerpo del texto. El azul funciona bien con copias oscuras y los enlaces subrayados hacen que sean aún más fáciles de ver. (Estamos trabajando para implementar estas mejoras en nuestro sitio).

Para elegir una paleta de colores más funcional, lea el artículo de David Nichols, Colorear para daltonismo, o esto Artículo de naturaleza.

Algunos lectores tienen dificultades para leer el texto cuando no hay suficiente contraste entre el primer plano y el fondo. Puede probar el contraste del esquema de color con Comprobador de contraste WebAIM. Otra herramienta útil para comprobar la accesibilidad del contraste de color es a11y. Este validador de accesibilidad de contraste de color muestra los problemas de contraste de color de una página web o un par de colores elegido.

También debe prestar atención a la relación de contraste para texto e imágenes de texto. Éste Debería ser 4.5 a 1, excepto para texto a gran escala (al menos 3 a 1), texto incidente que es una decoración o parte de una imagen (sin requisito de contraste) y texto que es parte de un logotipo o nombre de marca (sin requisito de contraste) ). ¿No le gustaría que su logotipo o marca fuera leído instantáneamente por tantas personas como fuera posible?

Asegúrese de que las fuentes funcionen bien juntas con una herramienta como FontPair, que identifica las fuentes populares de Google que combinan bien.

Necesitamos hacerlo mejor

Incorporar la accesibilidad en su estrategia de marketing de contenidos no es solo una forma inteligente decisión legal, brinda a todos la oportunidad de interactuar con su marca. Nosotros, el CMI y la industria del marketing de contenido, debemos hacer más para asegurarnos de que nuestro contenido sea accesible para todos.

Comenzamos centrándonos en lectores de pantalla y diseño para personas con discapacidad visual. Pero no nos detenemos ahí. Continuaré educándome y trabajaré hacia un blog de CMI más inclusivo.

¿Qué he perdido? No dude en compartir lo que hace para asegurarse de que su contenido sea todo incluido.

CONTENIDO DEL MANUAL RELACIONADO:

Me gustaría agradecer a Melissa Eggleston por tomarse el tiempo para revisar mi artículo y brindar comentarios valiosos.

Nota: Todos los instrumentos mencionados provienen del autor. Sugiera herramientas adicionales en los comentarios (de su empresa o de las que haya utilizado).

Asegúrese de acceder a algunos de los mejores consejos, trucos y tendencias de marketing de contenido para ayudar a que su audiencia continúe. Inscribirse al boletín gratuito de CMI durante la semana.

Imagen de portada de Joseph Kalinowski / AdSense Ib 30

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *