Accesibilidad

¿Qué es la accesibilidad y por qué es tan importante?

Accesibilidad significa acceder, alcanzar u obtener productos, servicios, instalaciones o información. La accesibilidad debe tenerse en cuenta cuando la información se comparte electrónicamente. Crear contenidos accesibles ayuda a todos, incluidas las personas que dependen de tecnologías de apoyo, como lectores de pantalla, programas de conversión de texto a voz, lupas y bastones bucales, a realizar sus tareas cotidianas. Imagine que sólo utiliza el teclado para rellenar un formulario PDF. Si el formulario no es accesible, no podrá rellenarlo.

Índice

En esta guía aprenderás a:

• Escribir textos que sigan las pautas de accesibilidad
• Crear una estructura accesible mediante títulos
• Utilice listas en los contenidos accesibles
• Crear hipervínculos accesibles
• Crear tablas que sigan las directrices WCAG
• Utilizar textos alternativos para facilitar la comprensión
• Aumente la legibilidad mediante el contraste de colores
• Indicar la lengua del documento
• Utilizar comprobadores de accesibilidad
• Introducción a las pruebas manuales de accesibilidad de contenidos

Redactar textos que sigan las pautas de accesibilidad

Legibilidad

El texto debe ser comprensible. Las WCAG recomiendan que el nivel de lectura se sitúe en 9º curso. No utilice palabras complejas innecesarias. Por ejemplo

En lugar de la frase: "Utilice este voluminoso documento sólo con fines didácticos".

Utilice esto: "Utilice este amplio documento sólo con fines académicos".

Recuerde que las personas con discapacidades cognitivas o cuya lengua materna no sea el inglés deben poder entender el contenido. Más información sobre la iniciativa de lenguaje claro.

Abreviaturas

Evite las abreviaturas porque algunos lectores de pantalla no entenderán el contexto de la palabra. Por ejemplo, "OMS" puede leerse como "Quién" en lugar de "Organización Mundial de la Salud". En los casos en que su acrónimo conozca mejor una organización, puede incluir abreviaturas y nombres completos. Por ejemplo, puede escribir

• PTA como "Asociación de Padres y Profesores (PTA)".
• OMS como "Organización Mundial de la Salud (OMS)"

No escribir: Lun, Ene 20, 2020

Algunos lectores de pantalla anunciarán el texto como "Lun Ene 20 2020".

En su lugar, escriba: Lunes, 20 de enero de 2020

Símbolos

Los lectores de pantalla se comportan de forma diferente con los símbolos. Por ejemplo, el lector de pantalla NVDA no anuncia "guión" para "-", pero el lector de pantalla JAWS sí. Evita escribir símbolos innecesarios siempre que sea posible.

El lector de pantalla anunciará algunos símbolos y omitirá otros. Evitar el uso excesivo de símbolos le ayudará a transmitir información importante.

Transmitir información de múltiples maneras

No utilice sólo el color o la forma para transmitir información. Las personas con baja visión o daltonismo tienen dificultades para comprender la información transmitida sólo por el color o la forma. Si utiliza sólo el color para diferenciar la información, es posible que el público no vea lo que está destacando cuando sólo se utiliza el color. Utilice texto para mostrar las diferencias, como se destaca en el texto siguiente.

Mal ejemplo:

"Haga clic en el botón verde si desea asistir a la formación sobre accesibilidad de MS Word. Haga clic en el botón rojo en caso contrario".

Los usuarios con daltonismo rojo-verde no podrán distinguir entre los dos botones.

Un buen ejemplo:

"Haga clic en el botón verde si desea asistir a la formación sobre accesibilidad de MS Word. Haga clic en el botón rojo en caso contrario".

Los usuarios con daltonismo rojo-verde pueden distinguir entre los dos botones basándose en el texto que contienen.

Mal ejemplo:

En el gráfico anterior, las personas daltónicas pueden tener dificultades para asociar los colores con sus etiquetas.

Un buen ejemplo:

El gráfico anterior transmite información de múltiples maneras. Las personas daltónicas pueden entender fácilmente la información presentada. Esta práctica también beneficia a las personas que desean imprimir el documento en escala de grises, ya que hace que el gráfico sea más legible.

Fuentes

Muchas propiedades de las fuentes pueden modificarse para que el texto sea más legible. Las personas con problemas de lectura pueden tener dificultades para leer textos con poco espacio entre líneas o caracteres. Las personas con baja visión pueden tener dificultades para leer texto con tamaños de fuente pequeños. Estos son algunos consejos relacionados con la elección de fuentes adecuadas:

• Utilice fuentes sans serif como Arial, Calibri, Verdana, Century Gothic, etc.
• Evite utilizar fuentes pequeñas. El tamaño del texto normal debe ser de 12-14 puntos para aumentar la legibilidad.
• Elija los tipos de letra con mayor peso.
• Evite utilizar fuentes cursivas.
• Utilice la negrita para enfatizar.
• Elija fuentes con suficiente espacio entre letras. Por ejemplo,
  Fuente Gloucester MT Extra Condensed con poco espacio entre letras:
  
  Es más difícil de leer que la fuente Arial:
  

Alineación del texto

Cuando alineas el texto en el centro, puedes añadir espacio extra entre las palabras, lo que puede resultar confuso para los lectores de pantalla y las personas con problemas de lectura. Es mejor evitar centrar el texto y mantenerlo alineado a la izquierda.

Crear una estructura accesible mediante encabezamientos

Los títulos facilitan a los lectores la asimilación de la información por partes. Además, los usuarios de lectores de pantalla pueden escanear los títulos de la página. Utilice niveles de encabezamiento correctos en un orden lógico. Si se omiten niveles de encabezamiento, se puede confundir a los usuarios de lectores de pantalla. Por ejemplo, el epígrafe 3 debería utilizarse después del epígrafe 2, y el epígrafe 2 debería utilizarse después del epígrafe 1. Cuando se siguen las mejores prácticas, el encabezado 3 no debe utilizarse justo después del encabezado 1. Esto confunde a los lectores de pantalla. Esto confunde a los lectores de pantalla.

Mal ejemplo:

• Rúbrica 1
  • Rúbrica 3
    • Rúbrica 2
• Rúbrica 1
  • Rúbrica 2
    • Rúbrica 4

Un buen ejemplo:

• Rúbrica 1
  • Rúbrica 2
    • Rúbrica 3
• Rúbrica 1
  • Rúbrica 2
    • Rúbrica 3
      • Rúbrica 4

Uso de listas en contenidos accesibles

Las listas son una buena forma de organizar la información, ya que facilitan la lectura. Utilice listas ordenadas para mostrar un proceso paso a paso. Utilice listas desordenadas cuando el orden de la información no importe.

Mal ejemplo:

A continuación se explica paso a paso cómo preparar un batido de fresa y plátano:

• Picar las fresas y los plátanos.
• Añadir los ingredientes húmedos a la batidora.
• Añadir 1 taza de leche.
• Añadir ½ taza de yogur.
• Añadir todos los ingredientes secos a la batidora.
• Añadir 1 cacito de proteína en polvo.
• Añadir las frutas picadas.
• Mezclar y servir.

Como puede ver, utilizar listas desordenadas para las instrucciones paso a paso puede confundir al público.

Un buen ejemplo:

Lista ordenada:

A continuación se explica paso a paso cómo preparar un batido de fresas y plátano:

1. Picar las fresas y los plátanos.
2. Añadir los ingredientes húmedos a la batidora.
   1. Añadir 1 taza de leche.
   2. Añadir ½ taza de yogur.
3. Añadir todos los ingredientes secos a la batidora.
   1. Añadir 1 cacito de proteína en polvo.
   2. Añadir las frutas picadas.
4. Mezclar y servir.

Lista desordenada:

A continuación se indican los ingredientes necesarios para preparar un batido de fresa y plátano.

• 1 plátano
• 1 taza de fresas
• 1 taza de leche
• ½ taza de yogur
• 1 cacito de proteína en polvo

Crear hipervínculos accesibles

Un hipervínculo es un fragmento de texto que enlaza con otro archivo, página web o contenido. No escriba la URL en su contenido porque el lector de pantalla leerá cada carácter y símbolo del enlace. Por ejemplo, el lector de pantalla leerá https://www.elgin.edu/ como
h-t-t-p-s-colon-forward-slash-forward-slash-w-w-w-dot-elgin-dot-edu-forward-slash-dot. No escriba "Enlace a" o "Enlace de" en el texto del hipervínculo, ya que anuncia el enlace automáticamente cuando el lector de pantalla se encuentra con un enlace. Escriba un texto de enlace que describa el contenido del destino del enlace. También puede especificar si el enlace se abre en una ventana nueva o abre un documento.

No utilizar:

Visite nuestro sitio web en https://www.elgin.edu/.

Haga clic aquí para saber más sobre nuestra universidad.

Envíenos un correo electrónico para obtener más información sobre el proceso de inscripción.(Los usuarios de lectores de pantalla no sabrán si el texto enlaza con una dirección de correo electrónico o con una página de información de contacto).

Haga clic aquí para consultar el calendario académico de 2023 a 2024.

Para conectarse al sistema de gestión de cursos en línea, haga clic aquí.

En su lugar, utilice lo siguiente:

Para más información, visite el sitio web del Elgin Community College.

Haz clic en el sitio web de Elgin Community College para obtener más información sobre nuestra universidad.

Envíenos un correo electrónico a registration@elgin.edu para obtener más información sobre el proceso de inscripción. (Puede teclear la dirección de correo electrónico porque cuando el lector de pantalla lea el enlace, el usuario sabrá que se trata de una dirección de correo electrónico y esperará que se abra en una ventana nueva al hacer clic).

Ver el calendario académico de 2023 a 2024: Calendario académico 2023-2024 - PDF. (El usuario sabrá que el enlace abrirá un documento PDF).

Visite la página de Aprendizaje a Distancia (se abre en una nueva ventana) para iniciar sesión en el sistema de gestión de cursos en línea. (Esto indicará al usuario que el enlace se abre en una ventana nueva).

Consejos para crear tablas que sigan las directrices WCAG

Las tablas se utilizan para representar datos tabulares. Cuando cree tablas, utilice tablas simples si es posible. Una tabla simple es una tabla con una fila y un encabezado de columna. Una tabla compleja es una tabla con celdas combinadas, varias columnas o encabezados de fila, etc. Utilizar tablas sencillas ayuda enormemente a los usuarios de lectores de pantalla. La razón es que el lector de pantalla anuncia el número de fila, el número de columna, el encabezado de fila, el encabezado de columna y el contenido en la propia celda. Puede resultar muy confuso cuando hay celdas fusionadas o varios encabezados. No crees tablas sin encabezados. Designe al menos un encabezado de columna o de fila. A continuación se muestra un ejemplo de una tabla sencilla.

La tabla contiene encabezados de columna y fila resaltados en negrita. Por ejemplo, para la celda "James Smith", el lector de pantalla NVDA anuncia "Nombre del alumno columna 2 James Smith".

A continuación se muestra un ejemplo de tabla compleja.

Como puede ver, la tabla tiene varios encabezados y celdas combinadas. Por ejemplo, para la celda 85%, el lector de pantalla NVDA anuncia: "Año de matriculación columna 3 85%". Sin embargo, no anuncia "2022" y "Grado".

Esto demuestra por qué las tablas complejas pueden resultar confusas. Si puede elegir, utilice tablas sencillas. Utilizar varias tablas sencillas es mejor que meter todo en una tabla compleja.

Cómo utilizar textos alternativos para facilitar la comprensión

El texto alternativo (alt text) es el texto que se lee en lugar del contenido. En la creación de contenidos, el texto alternativo se añade a imágenes, enlaces, tablas, cuadros, botones y otros gráficos.

Texto alternativo de las imágenes

Las imágenes son partes esenciales de la creación de contenidos. Añaden significado al contenido. Como están a disposición de los usuarios videntes, también puede hacerlas accesibles para los lectores de pantalla. Para ello, añada texto alternativo a las imágenes. Si no añade texto alternativo a la imagen, el lector de pantalla leerá en su lugar el nombre del archivo de imagen. Por ejemplo, sin el texto alt, la siguiente imagen se leería como "imagen gráfica siete-dos-cero-dos-sub-tres-seis-uno".

Añadir texto alternativo a las imágenes también ayuda a las personas con malas conexiones a Internet, ya que el sitio mostrará el texto alternativo si el archivo no se carga en un sitio. Cuando escriba el texto alternativo de las imágenes, no incluya "imagen de" o "foto de" en el texto. El lector de pantalla anunciará automáticamente que se trata de una imagen. El texto alternativo sólo debe incluir de qué trata el contenido. Hay distintos tipos de imágenes:

• Imágenes funcionales: imágenes que actúan como botones o enlaces.
• Imágenes informativas: imágenes que se utilizan para transmitir información.
• Imágenes de texto: imágenes que contienen texto.
• Imágenes decorativas: imágenes que se utilizan únicamente como atractivo visual. Estas imágenes no transmiten ninguna información.

¿Qué es una imagen funcional?

Cuando añada imágenes funcionales a su contenido, añada el texto alternativo adecuado para transmitir la función de la imagen. Por ejemplo, si utiliza una imagen para un enlace:

Un buen ejemplo de texto alternativo sería "Haga clic para ir al sitio web del Elgin Community College, que se abre en una ventana nueva". Es importante anunciar el destino del enlace si se abre en una ventana nueva. Si tiene una imagen que actúa como un botón que descarga un archivo, la mejor práctica es anunciar el formato del archivo.

A continuación se muestra una imagen de un icono de impresión utilizado como botón de impresión. Un texto alternativo adecuado debe describir la función o el destino, no la imagen en sí.

Ejemplos de malos textos alternativos:

• Icono de impresión
• Icono de impresión en blanco y negro

Ejemplos de un buen texto alternativo:

• Haga clic para imprimir
• Haga clic para imprimir el documento PDF

¿Qué es una imagen informativa?

Las imágenes informativas son imágenes que representan información o conceptos. Asegúrese de que el texto alternativo es conciso y transmite suficiente información al público. Recuerde que el texto alternativo también depende del contexto en el que se muestre la imagen.

Para esta imagen, el texto alternativo puede ser cualquiera de los siguientes:

• Estudiante
• Un estudiante con un portátil
• Una estudiante sentada al aire libre con un portátil en el regazo, sonriendo a la cámara.

Corresponde a los creadores de contenidos decidir qué texto alternativo se adapta mejor a la información que se transmite. A la hora de escribir un texto alternativo, puede ser útil cerrar los ojos y escribir lo que se ve.

Nota: Las palabras "foto de" o "imagen de" no son necesarias en el texto alternativo porque los lectores de pantalla anuncian automáticamente el tipo de archivo.

¿Por qué son inaccesibles las imágenes de texto?

Las imágenes con texto son problemáticas porque los lectores de pantalla no pueden leer el texto de la imagen. Si no puede evitar estas imágenes, añada el texto alt adecuado que contenga el texto dentro de la imagen. Los logotipos son una excepción en este caso.

Por ejemplo, para la imagen anterior, buenos ejemplos de texto alternativo serían:

• Texto alternativo vacío, decorativo
• Logotipo del Elgin Community College

Para la imagen anterior, un buen ejemplo de texto alternativo sería:

• Harry & Phyllis Blizzard Theatre hacen arte de otra manera en el Centro de Arte ECC
• Haz arte de otra manera en el Centro de Arte ECC

¿Qué es una imagen decorativa en accesibilidad?

Las imágenes decorativas se muestran con fines decorativos y no transmiten información significativa. Estas imágenes suelen incluir imágenes de fondo. Las imágenes decorativas pueden tener un texto alternativo vacío o marcarse como decorativas. Cuando un lector de pantalla encuentre una imagen con un texto alternativo vacío o una imagen marcada como decorativa, omitirá la lectura del nombre del archivo. La conclusión es que todas las imágenes deben tener texto alternativo o estar marcadas como decorativas. Esto podría utilizarse con moderación.

Cómo añadir texto alternativo a una tabla

Hay dos formas de añadir una tabla:

1. Como una imagen.
2. Manualmente en el documento.

Si añades una tabla como imagen, el lector de pantalla no leerá el contenido de la imagen. En ese caso, puedes escribir un texto alternativo que incluya todos los datos. Si insertas una tabla manualmente en el documento, el lector de pantalla puede acceder a las celdas de la tabla y anunciar sus datos. En ese caso, escriba un texto alternativo adecuado que transmita la visión general de la tabla.

Un buen texto alternativo para la tabla anterior sería:

Tabla insertada como imagen: "La tabla muestra la información del estudiante, los cursos realizados por los estudiantes, el grado y el año de inscripción. Para el curso Química, Nombre del alumno: James Smith, Grado: 85%, Año de matriculación: 2020. Para el curso Física, Nombre del estudiante: Elaina García, Grado: 95%, Año de inscripción: 2019."

Puede añadir tablas manualmente utilizando las herramientas que ofrecen los productos de Microsoft Office. Un ejemplo de texto alternativo es si la tabla se insertó manualmente: "La tabla muestra información sobre los alumnos, los cursos que han realizado, su calificación y el año de matriculación". No es necesario elaborar más texto alternativo porque los lectores de pantalla pueden recorrer las tablas insertadas manualmente.

A veces las tablas son extremadamente complejas y puede resultar difícil añadir un texto alternativo descriptivo. En ese caso, inserta una tabla manualmente para que los lectores de pantalla puedan leer las celdas de datos.

Cómo añadir texto alternativo a gráficos o diagramas

Hay dos formas de insertar gráficos o diagramas en tu documento o web:

1. Como una imagen.
2. Manualmente en el documento.

Cuando se inserta manualmente un gráfico o un diagrama en el documento, se puede añadir una tabla de datos en la parte inferior para que sea accesible. Esto es imposible cuando el gráfico se añade como imagen. Es fundamental añadir un texto alternativo adecuado para transmitir la información del gráfico o la tabla. A continuación se muestra un ejemplo de un gráfico añadido como imagen.

El texto alternativo adecuado para el gráfico anterior sería: "El gráfico muestra la distribución de notas de 3 cursos. La media de matemáticas es del 75%, la baja es del 60%, y la alta es del 100%. La media de Física es del 70%, la baja es del 40%, y la alta es del 100%. La media de química es del 75%, la baja es del 50%, y la alta es del 100%".

A continuación se muestra un ejemplo de gráfico añadido manualmente utilizando las herramientas integradas de Microsoft Office. Para algunos gráficos y diagramas, Microsoft Office ofrece una función para añadir una tabla de datos.

Un buen texto alternativo para el gráfico sería: "El gráfico muestra la distribución de las notas de 3 cursos: Matemáticas, Física y Química". No es necesario dar más detalles porque la tabla de datos incluye todos los detalles necesarios.

Un buen ejemplo de texto alternativo para el gráfico anterior sería: "El gráfico de gestión del tiempo muestra el siguiente desglose del tiempo: 38% en trabajo, 13% en familia, 4% en ejercicio, 33% en sueño, 8% en tareas y 4% en tiempo personal."

Leyendas vs. Alt Text

La principal diferencia entre los subtítulos y el texto alternativo es que los subtítulos son visibles para todos los usuarios, y la información del texto alternativo sólo es visible para los usuarios de lectores de pantalla. Los subtítulos aparecen debajo de la imagen y contienen información importante para todos. Los textos alternativos están ocultos para los usuarios videntes y contienen información sobre la propia imagen. Los lectores de pantalla leen tanto los textos alternativos como los pies de foto. Puede añadir más información descriptiva en el texto alternativo si decide añadir ambos. Por ejemplo, considere la siguiente imagen:

Un buen ejemplo de pie de foto: Veterano militar
Alt text: Un veterano militar vestido con uniforme de gala en un podio dando un discurso a la multitud.

Aumente la legibilidad mediante el contraste de colores

El contraste de color significa lo bien que destaca un color de otro, lo que determina la legibilidad. Las personas con baja visión o daltonismo tienen dificultades para leer contenidos que no tienen una alta relación de contraste de color. Estas relaciones definen la diferencia de luminancia entre dos colores, normalmente el de fondo y el de primer plano. A continuación, algunos ejemplos:

• COLOR ROJO: El contraste entre el texto rojo (#FF0000) y el fondo blanco (#FFFFFF) es de 3,99:1.
• COLOR ROJO: El contraste entre el texto rojo (#FF0000) y el fondo amarillo (#FFFF00) es de 3,72:1.
• COLOR GRIS: El contraste entre el texto gris (#666666) y el fondo blanco (#FFFFFF) es de 5,74:1.
• COLOR GRIS: El contraste entre el texto gris (#666666) y el fondo gris claro (#B7B7B7) es de 2,86:1.

(Los códigos de color hexadecimales son una combinación de 6 dígitos de letras y números que definen el color. Por ejemplo, el ROJO se define por #FF0000, y el GRIS por #666666. Cada código hexadecimal es único). Como puede ver en los ejemplos anteriores, una mayor relación de contraste aumenta la legibilidad del texto. WCAG 2.1 AA exige una relación de contraste mínima de 4,5:1.

Compruebe siempre la relación de contraste del contenido. Puede aplicar este principio a las imágenes que incluyen texto comprobando la relación de contraste entre el texto y la imagen. WebAIM proporciona una herramienta gratuita con su comprobador de contraste de color. La siguiente imagen muestra cómo utilizar el comprobador de contraste de WebAIM. Para comprobar el contraste de color entre el texto y el fondo de la diapositiva, introduzca el color del texto en la caja de texto color de primer plano y el color del fondo en la caja de texto color de fondo. La herramienta calculará la relación de contraste. Si la relación es inferior a 4,5:1, puede mover el control deslizante de luminosidad para obtener la relación deseada.

Herramientas adicionales para comprobar el contraste de color:

Validador de contraste A11Y

Identificar la lengua del documento

Indique la lengua principal utilizada en el documento y las lenguas adicionales que puedan utilizarse para contenidos específicos. De este modo se garantiza que el software de lectura en pantalla lea el documento con precisión.

Aprenda a definir las propiedades del documento en Word.

Comprobadores de accesibilidad

Utilizando el Comprobador de accesibilidad de Microsoft y el Comprobador de accesibilidad de Grackle para G Suite, un complemento de Google, podemos verificar fácil y rápidamente que nuestros materiales digitales son accesibles para la creciente población de personas con discapacidad. El comprobador de accesibilidad proporcionará sencillas instrucciones paso a paso sobre cómo modificar sus materiales para mejorar la accesibilidad.

Herramientas gratuitas para comprobar la accesibilidad de su página web.

• Comprobador de accesibilidad WAVE
• accessScan de accessiBe
• Herramientas de accesibilidad para desarrolladores de Google
• Información sobre accesibilidad para la Web de Microsoft
• Comprobador de accesibilidad de Siteimprove

Introducción a las pruebas manuales de accesibilidad de contenidos

Los comprobadores de accesibilidad son útiles, pero las pruebas manuales son igual de importantes. Los comprobadores de accesibilidad automatizados pueden detectar que la imagen tiene texto alternativo, pero no pueden comprobar si transmite el significado de la imagen. En ese caso, el creador del contenido tiene que verificar esa información. Puede realizar pruebas manuales en:

• Contraste de color
• Texto dentro de imágenes
• Texto alternativo adecuado
• Enlaces rotos
• Niveles de encabezamiento adecuados
• Hipervínculos significativos
• Títulos de los documentos

Recursos adicionales

• Directrices WCAG 2.1
• Herramientas de evaluación de la accesibilidad web del W3C