Contenido de conformidad

CONTENIDO

  • Utiliza el lenguaje más simple y apropiado para tu contenido.
  • Haz los enlaces descriptivos. No uses "clic aquí", "Aquí", "Más", "Más información", "Continuar".
    • Mal ejemplo: Haga clic aquí para obtener una lista de información de contacto del plan de beneficios.
    • Un buen ejemplo: Hemos proporcionado una lista de información de contacto del plan de beneficios.
  • Por lo general, no tienen enlaces abiertos en una nueva ventana o pestaña. Es difícil para los usuarios discapacitados volver a la página.
  • Revisa la ortografía, la gramática y la legibilidad.
  • Tengan cuidado con las abreviaturas, la jerga, el lenguaje complejo o cualquier cosa que pueda confundir allector .
  • EVITAR EL USO DE TODAS LAS TAPAS. PUEDE SER DIFÍCIL DE LEER.
  • No utilice descripciones que dependan sólo de la vista (por ejemplo, "haga clic en el cuadrado", "el recuadro de la izquierda de la página", "el gran texto azul").
  • No utilice las URL como texto de enlace, a menos que el documento esté destinado a ser impreso o si la URL es un contenido relevante.
  • Si utiliza SurveyMonkey para las encuestas, siga sus pautas.
  • Puede que desee descargar una copia de JAWS, un lector de pantalla que puede ser utilizado por nuestros consumidores. Es interesante y una experiencia de aprendizaje para escuchar lo que se lee y será educativo para todos. Es posible que tenga que comunicarse con el servicio de asistencia para esto.

TITULOS

Use los títulos correctamente. Para aplicar los encabezados, mira en la barra de herramientas de iconos de la parte superior y haz clic en "Formatos". Simplemente haz clic y elige el título que quieras en el menú desplegable.

The name of the page should be an <h1>. Typically this is a hidden area of the page, so the title of your page should begin with <h2>. This way, headings are sequential which makes it easier for assistive technology to understand the web page.

Observe que cuanto más grande es el número en el encabezamiento, más pequeño es el texto. Los encabezados están preestablecidos para usted usando hojas de estilo desarrolladas y mantenidas por IT. Por favor, no añada código para que los encabezados se vean diferentes (es decir, añada rojo, haga negritas, etc.).

IMÁGENES

Todas las imágenes deben tener una etiqueta alternativa (alt). (Véase el punto 1 en la imagen de abajo)

El texto alternativo cumple varias funciones:

  • Es leída por lectores de pantalla en lugar de imágenes, lo que permite que el contenido y la función de la imagen sea accesible a las personas con discapacidades visuales o ciertas discapacidades cognitivas.
  • Se muestra en lugar de la imagen en los navegadores si el archivo de imagen no se carga o cuando el usuario ha elegido no ver las imágenes.
  • Proporciona un significado semántico y una descripción a las imágenes que pueden ser leídas por los motores de búsqueda o ser utilizadas para determinar posteriormente el contenido de la imagen a partir del contexto de la página solamente.

Cuando cree su imagen en los medios de comunicación, simplemente añada un nombre descriptivo de lo que es la imagen (por ejemplo, "Encuesta de satisfacción del proveedor de Magellan") en la sección "alt tag" de los medios de comunicación cuando esté creando su imagen y también cuando esté enlazando con la imagen (si no está ya allí).

Las imágenes no deben utilizarse para transmitir texto.

Recuerde que el texto alternativo debe ser descriptivo y no debe decir sólo cosas como "imagen".

Una descripción larga es una forma de proporcionar un texto alternativo largo para elementos no textuales, como las imágenes. Por lo general, el texto alternativo que exceda de 250 caracteres, que no puede hacerse más conciso sin hacerlo menos descriptivo o significativo, debe tener una descripción larga. (Véase el punto 2 de la imagen que figura a continuación)

Ejemplo de imagen

COLOR

El color no puede utilizarse como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual. Esto incluye las imágenes. Puede usar el WebAim Color Contrast Check er para verificar sus colores.

Imágenes: incluye infografías, gráficos, fotos, ilustraciones. Quien obtenga o cree imágenes para el sitio debe considerar el contraste de colores. Ejemplo: los usuarios podrían no entender un gráfico circular donde sólo el color separa los segmentos. En este caso, debe agregar etiquetas y patrones claros a los segmentos.

Asegúrate de que el contraste de color sea fuerte, especialmente entre el texto y el fondo. Esto es cierto para las imágenes que incluyen texto también.

InsuficienteCaptura de pantalla de un contraste de página insuficiente

BorderlineCaptura de pantalla del contraste de la página límite

Suficiente Captura de pantalla con suficiente contraste de página

Texto: El uso del color puede mejorar la comprensión, pero no utilice el color solo para transmitir información (por ejemplo, "Los artículos en rojo deben ser entregados esta semana"). Usar el color está bien (por ejemplo, "Los artículos que deben entregarse esta semana tienen la palabra roja 'due' al lado"), simplemente no puede ser la única forma de proporcionar información. Además, no cambie el color del texto o consulte con el equipo informático si es necesario.

Enlaces: No cambie el color del texto o consulte con el equipo informático si es necesario. El color de los enlaces es administrado por la plantilla. Si cambias el color del texto para algún texto que incluya un enlace, podrías interferir con la relación de contraste.

Resumen de las directrices

  • No hagas que el vídeo se reproduzca automáticamente cuando se cargue la página.
  • Necesita un método para detener, pausar, silenciar o ajustar el volumen del audio que se reproduce automáticamente en una página durante más de 3 segundos. Youtube proporcionará esta capacidad.
  • No vivo
    • Sólo audio y sólo vídeo (1.2.1)
      • Audio: Se proporciona una transcripción de texto descriptivo (incluyendo todas las pistas e indicadores visuales y auditivos pertinentes) (podcasts de audio, archivos MP3, etc.)
      • Video, no audio: Se proporciona una descripción de texto o de audio (por ejemplo, video que no tiene pista de audio).
    • Video con Audio
      • Pies de foto - Proporcionar pies de foto para los videos con audio (1.2.2)
      • Transcripción de texto - Se proporciona una transcripción de text odescriptiva O una descripción de audio (ver más abajo) para el video basado en la web. Las transcripciones deben incluir toda la información presente en el audio o el vídeo como pistas visuales (por ejemplo, "El pescador sostiene un gran bajo"), así como la atribución y descripción del diálogo. (1.2.3)
      • Descripción del audio - NOTA: Sólo se requiere si el video transmite visualmente contenido que no está disponible en la pista de audio predeterminada. Se proporciona una descripción de audio (descripción de voz grabada) para el vídeo basado en la web (1.2.5)
  • En vivo
    • Vídeo - Se proporcionan subtítulos sincronizados para todos los multimedia en vivo que contengan audio (emisiones sólo de audio, webcasts, videoconferencias, etc.) (1.2.4)

Video: No en vivo con pista de audio

Qué hacer

  1. Sube tus videos a una cuenta de Youtube (no uses otro servicio de video). Verifica con el equipo de marketing si existe un canal de YouTube para almacenar tus vídeos. Necesitarás acceso para añadir subtítulos. Consulta también nuestra sección de carga de videos para obtener instrucciones generales.
  2. Añade los pies de foto
  3. Añadir una transcripción de texto descriptivo O una descripción de audio
  4. Webinars: usar el Zoom para eventos pregrabados (no en vivo), colocar en Youtube, añadir subtítulos.

Pies de foto

Tendrás que añadir subtítulos sincronizados a los vídeos con sonido. Detalle de los subtítulos en WebAim.

¿Cómo? Mira el primer video. Si quieres más detalles, mira el segundo video. Haz clic en el título del vídeo para ampliarlo.

Juega
5:08
Reproducir Como poner subtítulos en un video de youtube
5:08
Cómo poner subtítulos en un video de youtube
Reproducir subtítulos de los videos de YouTube
4:20
Subtitulado de videos de YouTube
5:08
Cómo poner subtítulos en un video de youtube
4:20
Subtitulado de videos de YouTube

Infografía

Directrices

  1. Proporcionar una alternativa de texto corto o largo (hay otra opción que requiere un desarrollador web).
    1. Corto: si son menos de 10-15 palabras, use la etiqueta alternativa (alt).
    2. Largo: si es más de 10-15 palabras, use un texto largo alternativo. Véase más abajo. Ejemplo de alternativa de texto largo infografía.
  2. Asegurar la mínima relación de contraste entre el texto y los gráficos. La relación de contraste debe ser de al menos 4,5:1 para el texto normal o 3:1 para el texto grande. Por favor, consulte con Coleen Sallot para la dirección.
  3. Si utiliza el color para transmitir información dentro de una infografía, asegúrese de que la misma información se comunique ya sea en texto o a través de otras pistas visuales como el formato del texto o el tamaño de la fuente.

Alternativa de texto largo

Coloque la alternativa de texto largo en la misma página de la infografía o proporcione un enlace a la alternativa de texto ubicada en una página separada.

Beneficio en la página: los usuarios permanecen en la misma página, lo que requiere menos clics para navegar a una nueva página y tal vez volver a la página original.

La creación de una alternativa de texto para una infografía

  1. Crear una alternativa de texto que presente la misma información que está en la infografía. Cosas a considerar:
    • Propósito: Determinar qué partes de la infografía necesitan ser explicadas en forma de texto.
    • Jerarquía: Agrupar el texto en partes lógicas que sigan el orden presentado visualmente por la infografía.
    • Imágenessignificativas: Asegurarse de que cualquier contexto proporcionado por las señales visuales en la infografía se incluya como texto alternativo si es pertinente a la información que se está comunicando.
  2. Decida si incluye la alternativa de texto en la misma página de la infografía o en una página separada. Proporcionar un enlace antes de la alternativa infográfica al texto con un texto de enlace significativo como "alternativa textual para la accesibilidad a la web infográfica". Si la alternativa textual está en la misma página, entonces el enlace será un enlace de salto, de lo contrario, enlazará con la página en la que se encuentra la alternativa textual.
  3. Antes de la alternativa de texto, incluya un encabezado para la alternativa de texto, como "Alternativa de texto".