Saltar la navegación

Accesibilidad en Twitter

Introducción

Twitter es una plataforma para enviar y publicar mensajes breves (tweets) utilizada por muchas Administraciones Públicas.

Nuestro contenido debe cumplir con los criterios de conformidad de nivel A y AA de las WCAG 2.1, por lo que al enviar y publicar un mensaje desde nuestra cuenta tendremos que prestar atención en ciertos aspectos para que el contenido sea accesible. 

Mensajes o Tweets

Un mensaje o tweet es un texto que puede contener hasta 280 caracteres. Se debe utilizar un lenguaje claro y sencillo.

Un tweet pueden tener enlaces y hasta 4 imágenes o un vídeo. Si existen imágenes o vídeo, se previsualizarán estos, y en caso contrario si es posible se previsualizará el enlace (si hay varios enlaces, se previsualizará el último de los que sea posible).

Ejemplo de tweet con dos imágenes previsualizándose.

Tweet con dos imágenes

Tweets con enlaces

Es posible incluir enlaces en los tweets. Es recomendable incluir en el tweet un texto descriptivo que sirva al usuario para contextualizar el enlace.

Cualquier enlace ocupará 23 caracteres en nuestro tweet. Incluso si el enlace original tiene menos caracteres. Esto es así porque cualquier enlace es procesado y se convierte en un enlace tipo "http://t.co".

Ejemplo de tweet con un enlace:

Captura de tweet con enlace a una página

Si la página que enlazamos cuenta con los metadatos necesarios (son unos metadatos definidos por twitter con el título, descripción, imagen y texto alternativo de la imagen a mostrar), el enlace se mostrará como una Twitter Card quedando mucho más vistoso:

Ejemplo de enlace a una página con los metadatos de una Twitter card tipo "Summary Card"

Ejemplo de enlace a una página con los metadatos de una Twitter card tipo "Summary Card" con imagen grande

Tweet con enlace a una página con summary card

Tweets con imágenes

Twitter solo permite imágenes como mucho de 5MB y con extensión .gif, .jpeg, o .png.

Al seleccionar la imagen a subir a un tweet, hay que tener presente que en las imágenes no se debe emplear el color como único medio visual para transmitir información (por ejemplo si subimos una gráfica la forma de diferenciar los distintos elementos de la gráfica no debe ser únicamente el color porque en ese caso los usuarios que no puedan diferenciar los colores perderán información).

Además si las imágenes transmiten información textual se deben cumplir los requisitos de contraste entre texto y fondo (en el bloque II de este curso puedes ver cómo verificar el contraste de las imágenes):

  • en imágenes con el texto de tamaño normal (tamaño inferior a 18 puntos o a 14 puntos y negrita) debe haber un contraste entre texto y el color de fondo de al menos 4.5:1
  • en imágenes con el texto de tamaño grande (tamaño superior a 18 puntos o a 14 puntos y negrita) debe haber un contraste entre texto y el color de fondo de al menos 3:1

Para que sean accesibles es imprescindible agregarles una descripción que formará parte del texto alternativo de la imagen, a no ser que se trate de una imagen decorativa (en este caso se debe dejar la descripción vacía). La descripción de las imágenes puede llegar a los 1000 caracteres, y debe transmitir la misma información que la imagen. 

Para añadir una imagen a un tweet hay que pulsar el icono Icono de agregar imagen en twittery seleccionar el fichero con la imagen desde nuestro dispositivo. Un twitter puede contener hasta 4 imágenes.

Debemos añadir una descripción a cada imagen, que transmita la misma información que la imagen, salvo para imágenes decorativas. En grupos de imágenes que transmiten una única información de forma conjunta, incluiremos la descripción en una sola de las imágenes de forma que englobe a todo el grupo, quedando el resto de imágenes como decorativas.

Para agregar una descripción a una imagen, una vez tenemos la imagen incluida en el tweet, pinchamos en "Añadir descripción" / "Añadir descripciones"

Captura de opción agregar descripción en un tweet con imágenes

Aparecerá una pantalla con la imagen (o la primera imagen si hay más de una) para poder introducir la descripción que formará parte del texto alternativo de la imagen.

Captura editar descripción de una imagen de un tweet

Si hay varias imágenes aparecerán unas flechas para desplazarse por cada una de ellas rellenando la descripción. Una ver terminemos, pulsar "Guardar".

Ahora veremos el tweet con una etiqueta "Alt" en las imágenes con descripción. En la parte inferior nos indica el número de imágenes con descripción.

Captura de tweet con una imagen con descripción

Tweets con vídeos

Twitter permite subir vídeos de hasta 512MB, y 140 segundos (2 minutos y 20 segundos). Deben tener extensión .mp4 (codificado con h264 y AAC) o .mov. 

Para cumplir con las normas de accesibilidad nuestros vídeos deben tener subtítulos. Actualmente al incluir un fichero de vídeo en un tweet no es posible vincular un fichero independiente con los subtítulos. Twitter ha anunciado que añadirá subtítulos automáticos para audio y vídeo (al estilo de YouTube) durante 2021.

Para incluir un vídeo en un tweet podemos subir un fichero de vídeo con los subtítulos incrustados en el propio vídeo (para ello será necesario editar previamente el vídeo con una herramienta adecuada e incrustar en el los subtítulos).

Como alternativa si se quiere tweetear un vídeo, se puede compartir un vídeo de nuestro canal YouTube que tenga incluidos los subtítulos. En este caso tendremos que incluir en el tweet el título descriptivo del vídeo y la url al vídeo de YouTube, twitter incluirá automáticamente el reproductor previsualizando el vídeo incluyendo en la imagen el icono del "play" para que el usuario sepa que se trata de un vídeo.

Captura de tweet con un vídeo de YouTube

Una vez pulsamos en "Twittear" veremos el tweet publicado  :

Captura tweet publicadoAl pinchar en el vídeo se abrirá en el reproductor de YouTube, permitiendo al usuario hacer uso de los subtítulos

Captura tweet con reproductor YouTube

Primeros pasos con contenido accesible en Twitter

10 minutos
10:00

Es requisito imprescindible para poder realizar este ejercicio, disponer de una cuenta de Twitter.

Crea tres tweets, cada uno de ellos enlazando una de las siguientes páginas. Comprueba que alguna de ellas están preparadas con los metadatos requeridos por Twitter para las Twitter Card y se visualizan de forma más atractiva:

Crea un tweet con 4 imágenes incluyendo la descripción correspondiente en cada una de ellas.

Crea un tweet con un enlace a un vídeo de YouTube que tenga subtítulos. Recuerda incluir en el tweet el título descriptivo del vídeo para situar al usuario en el contexto correspondiente.

Para profundizar

En las WCAG 2.1 figuran los siguientes criterios de conformidad de nivel A y AA a tener en cuenta en los mensajes que podemos incluir en twitter:

  • 1.1.1Contenido no textual. Nivel A. Objetivo: hacer que la información transmitida mediante contenido no textual sea accesible a través de alternativas textuales.
    • Comprobación 1.1.1-A. Todo contenido no textual debe disponer de una alternativa textual breve que, siempre que sea posible, proporciona la misma información o cumple el mismo propósito que el contenido no textual.
    • Comprobación 1.1.1-D. Las alternativas textuales de los grupos de imágenes que transmiten una única información de forma conjunta se proporcionan en una sola de las imágenes y describen a todo el grupo, quedando el resto de imágenes como decorativas.
    • Comprobación 1.1.1-K. Las imágenes decorativas deben tener un texto alternativo vacío y carecer de un título, o bien se incluyen desde las hojas de estilo, de forma que puedan ser ignoradas por los productos de apoyo.
  • 1.4.1. Uso del color. Nivel A. Objetivo: asegurar que todos los usuarios pueden acceder a la información que se transmite por el color.
    • Comprobación 1.4.1-C. En las imágenes no se debe emplear el color como único medio visual para transmitir información.
  • 1.4.3. Contraste (mínimo). Nivel AA. Objetivo: proporcionar el suficiente contraste entre el primer plano y el fondo para que las personas con baja visión puedan leer el contenido.
    • Comprobación 1.4.3-A. El texto normal (tamaño inferior a 18 puntos o a 14 puntos y negrita) y el texto normal en imágenes deben tener un contraste respecto al color de fondo de al menos 4.5:1.
    • Comprobación 1.4.3-B. El texto grande (tamaño superior a 18 puntos o a 14 puntos y negrita) y el texto grande en imágenes deben tener un contraste respecto al color de fondo de al menos 3:1.
  • 2.4.4. Propósito de los enlaces (en contexto). Nivel A. Objetivo: ayudar a los usuarios a comprender el propósito de cada enlace de forma que puedan decidir seguir el enlace o no.
    • Comprobación 2.4.4-A. Los enlaces deben identificar cuál es su función o destino en el propio texto del enlace o mediante el texto del enlace junto a su contexto más inmediato. 
  • Para los tweets con vídeo aplican los vistos en la sección "Para profundizar" del apartado "Accesibilidad en YouTube" de este curso.