Contenidos digitales accesibles

Objetivos y contenido

La accesibilidad en contenidos digitales asegura que todas las personas, incluidas aquellas con discapacidades, puedan utilizar y entender estos contenidos.

En texto, esto implica usar tipografías sans serif, tamaños adecuados y evitar cursivas.

Las imágenes deben tener descripciones alternativas.

Los videos necesitan subtítulos y descripciones auditivas, con controles accesibles mediante teclado y sin reproducción automática. Estos requisitos se aplican también al audio, añadiendo la transcripción textual equivalente para el audio pregrabado.

Los sitios web deben seguir los principios WCAG 2.1: perceptible, operable, comprensible y robusto, permitiendo la navegación por teclado con un orden lógico de tabulación.

Herramientas como NoCoffee Vision Simulator y Colour Contrast Analyser ayudan a evaluar y mejorar la accesibilidad web.

Los objetivos del análisis de accesibilidad de contenidos digitales son garantizar que todas las personas, independientemente de sus capacidades, puedan acceder y utilizar el contenido en línea de manera efectiva y sin barreras. Para lograrlo, se debe evaluar si los sitios web y aplicaciones cumplen con las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) y las normativas locales, como el Real Decreto 1112/2018. El análisis abarca aspectos como la estructura de la página, el uso de color, la navegación, y la compatibilidad con tecnologías de asistencia. El objetivo final es asegurar que la información digital sea perceptible, operable, comprensible y robusta para todos los usuarios, cumpliendo al menos con el nivel AA de conformidad en la legislación española.

Otro objetivo clave es fomentar la inclusión mediante el diseño accesible de la información textual, visual y multimedia. Esto implica el uso de tipografía legible, esquemas de color con suficiente contraste y la creación de alternativas accesibles para personas con discapacidades sensoriales, cognitivas y motoras. Asimismo, se busca asegurar que las imágenes, videos y elementos interactivos incluyan descripciones textuales y control accesible. Este enfoque continuo de revisión y mejora de la accesibilidad pretende eliminar barreras, mejorando la experiencia de todos los usuarios y creando entornos digitales más inclusivos.

1. Análisis de accesibilidad de contenidos digitales
2. Accesibilidad en información textual
- 2.1. Tipografía y fuentes
- 2.2. Documentos tipo Word
- 2.3. Documentos pdf
- 2.4. Documentos tipo Excel y PowerPoint
3. Accesibilidad en el diseño de imágenes
- 3.1. Introducción
- 3.2. Herramientas y prácticas para la accesibilidad en el diseño de imágenes
- 3.3. Esquemas de color
- 3.4. Cómo insertar imágenes
- 3.5. Textos alternativos y descripciones
4. Accesibilidad en audio
- 4.1. Introducción
- 4.2. Criterios de accesibilidad generales para contenidos multimedia.
- 4.3. Elementos multimedia
- 4.4. Destellos y parpadeos
- 4.5. Audio estéreo o mono
- 4.6. Ajuste del balance de audio
- 4.7. Elementos de audio
5. Accesibilidad en vídeos
- 5.1. Introducción
- 5.2. Transcripción textual
- 5.3. Subtítulos
- 5.4. Descripciones auditivas
- 5.5. Alternativas para el vídeo en directo
6. Diseño y desarrollo de sitios web accesibles
- 6.1. Introducción
- 6.2. Desarrollo de un sitio web accesible
- 6.3. Evaluación global de la accesibilidad de la página
- 6.4. Limitaciones visuales
- 6.5. Limitaciones auditivas
- 6.6. Limitaciones cognitivas
- 6.7. Limitaciones motrices
7. Extensiones de navegador que ayudan a evaluar accesibilidad web y crear webs accesibles
- 7.1. Nocoffee vision simulator. solo disponible para Firefox.
- 7.2. Web accessibility evaluation tool
- 7.3. Headingsmap
- 7.4. Web developer toolbar
- 7.5. WCAG - color contrast checker
- 7.6. Bookmarklet “text spacing” de Steve Faulkner
- 7.7. Herramienta de inspección de código del navegador

1 Análisis de accesibilidad de contenidos digitales

El análisis de accesibilidad de contenidos digitales es un proceso que evalúa si los contenidos digitales son accesibles para todos los usuarios, incluyendo aquellos con discapacidades. Este análisis puede implicar la revisión de varios aspectos de un sitio web o una aplicación, incluyendo la estructura del contenido, el uso del color, la navegación, las formas, los medios de comunicación, y más. El objetivo es asegurar que todos los usuarios, independientemente de sus habilidades, puedan acceder y utilizar el contenido digital de manera efectiva.

Las Pautas de Accesibilidad para el Contenido Web, Web Content Accessibility Guidelines, (WCAG) 2.1 son un conjunto de recomendaciones para hacer el contenido web más accesible, principalmente para personas con discapacidades. Las WCAG son publicadas por la WAI –Web Accessibility Initiative (Iniciativa de Accesibilidad Web) parte del World Wide Web Consortium (W3C), la principal organización de estándares de internet, el 5 de junio de 2018.

Las pautas WCAG 2.1 se organizan en torno a cuatro principios fundamentales, que son que el contenido web debe ser:

Imagen decorativa sobre Análisis de accesibilidad

Destacado

Perceptible: Esto significa que los usuarios deben ser capaces de percibir la información que se presenta. No puede ser invisible para todos sus sentidos.

Operable: Esto significa que los usuarios deben ser capaces de operar la interfaz. La interfaz no puede requerir interacción que un usuario no pueda realizar.

Comprensible: Esto significa que los usuarios deben ser capaces de entender la información y la operación de la interfaz. La información y la operación no pueden estar más allá de su comprensión.

Robusto: Esto significa que el contenido debe ser lo suficientemente robusto como para ser interpretado de manera fiable por una amplia variedad de agentes de usuario, incluyendo las tecnologías de asistencia.

Cada uno de estos principios tiene criterios de conformidad asociados que ayudan a los desarrolladores a entender cómo aplicar las pautas. Estas pautas están desarrolladas en el tema 6.

Análisis de accesibilidad

Para que un sitio web sea accesible y cumpla con las WCAG 2.1 es importante la aplicación de los criterios de conformidad correspondientes al nivel de accesibilidad deseado durante todo el ciclo de vida de la aplicación. En el Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público se indica, que las entidades obligadas por el mismo deben realizar revisiones del cumplimiento de los requisitos de accesibilidad establecidos. Se deberá verificar si el sitio web satisface todos los requisitos recogidos en la norma UNE-EN 301 549:20192 (versión oficial en español de la norma EN 301 549 v2.1.2 20183). Si deseas saber más sobre las normas relacionadas con la accesibilidad puedes visitar la sección llamada "Normas Accesibilidad" en el portal de administración electrónica - PAe. Las revisiones de accesibilidad deben abarcar todos los requisitos exigidos y tendrán en consideración tanto aspectos de revisión automática como aspectos de revisión manual experta. El resultado de las revisiones de accesibilidad ha de quedar recogido en un informe de revisión de la accesibilidad (IRA

El proceso de revisión de accesibilidad es un proceso continuo que debe realizarse durante todo el ciclo de vida de los sitios web:

· Durante la fase de diseño y desarrollo de los sitios web:

o Selección de colores con suficiente contraste.

o Definición y uso correcto de los elementos estructurales de los contenidos (encabezados, listas, etc.).

o Selección de tecnologías compatibles con la accesibilidad, es decir, tecnologías que permitan generar contenido accesible.

· Siempre antes de su puesta en producción.

· Una vez en producción se realizarán revisiones periódicas con el fin de garantizar el mantenimiento de su cumplimiento a lo largo del tiempo.

La revisión de accesibilidad se puede realizar mediante:

· Autoevaluación con recursos internos

· Evaluación realizada por una entidad externa cuya competencia técnica haya sido reconocida formalmente por la Entidad Nacional de Acreditación (ENAC)

· Autoevaluación con recursos externos (entidades no acreditadas por ENAC)

La evaluación de la accesibilidad es una tarea continúa a realizar por:

· Desarrolladores

· Editores de contenidos

· Responsables de accesibilidad de un sitio web

· Auditores o consultores que realicen evaluaciones de accesibilidad

Para realizar una revisión de accesibilidad se deben seguir los siguientes pasos:

· Especificación del ámbito de evaluación

· Análisis del diseño del sitio web

· Selección de una muestra representativa

· Análisis de la muestra seleccionada

· Informe del análisis

Especificación del ámbito de evaluación

Es necesario definir el nivel de conformidad que debe cumplir el sitio web a revisar de acuerdo a las WCAG 2.1. Cada nivel de conformidad tiene asociados unos criterios de conformidad que deben cumplirse. En cada criterio de conformidad se especifica lo que se debe hacer o no para cumplir con la accesibilidad. Cada criterio de conformidad tiene asociadas unas comprobaciones que se deben satisfacer para cumplir con dicho criterio. Existen tres niveles de conformidad:

· Los criterios de nivel A son los de mayor importancia en cuanto a la accesibilidad final, siendo requisitos básicos para que algunos usuarios puedan usar la Web. Para un Nivel A de conformidad (nivel mínimo), la página web debe satisfacer todos los criterios de conformidad de Nivel A, o bien proporcionar una versión alternativa accesible para un Nivel A.

· Los criterios de nivel AA deben ser observados si queremos eliminar importantes barreras de acceso. Para un Nivel AA de conformidad, la página web debe satisfacer todos los criterios de conformidad de Nivel A y AA, o bien proporcionar una versión alternativa accesible para un Nivel AA.

· Los criterios de nivel AAA son los de menor importancia, pero si se cumplen confieren a la Web un buen nivel de accesibilidad. Para un Nivel AAA de conformidad, la página web debe satisfacer todos los criterios de conformidad de Nivel A, AA y AAA, o bien proporcionar una versión alternativa accesible para un Nivel AAA.

El nivel AA es el nivel de accesibilidad aceptado habitualmente como objetivo a cumplir y el nivel exigido en la legislación española (para más información puede consultarse el RD 1112/201812 y la UNE-EN 301 549:201913).

En las Administraciones Públicas debemos cumplir con el nivel AA, es decir, que debemos cumplir los criterios de conformidad de nivel A y los criterios de conformidad de nivel AA (suman un total de 50 criterios de conformidad). La revisión de la accesibilidad debe realizarse sobre páginas completas, no se puede analizar únicamente un apartado o sección de una página. También es necesario definir el alcance del sitio web. Hay que identificar de forma precisa qué páginas del sitio web entran dentro del alcance de la evaluación de accesibilidad e identificar partes o subdominios que se consideran sitios web independientes.

En el siguiente avanzado puedes ver las herramientas para el análisis y comprobación de la accesibilidad más utilizadas:

Las integradas en los programas de Office
Servicio diagnóstico en línea - Observatorio de Accesibilidad Web
Headingsmap
Colour Contrast Analyser
Validador automático de código del W3C
Adobe Acrobat Pro

Herramientas para el análisis de accesibilidad

2 Accesibilidad en información textual

La accesibilidad de la información textual es fundamental para garantizar que todas las personas, independientemente de sus capacidades, puedan acceder y comprender el contenido. Esto implica diseñar y presentar el texto de manera que sea legible y comprensible para todos los usuarios, incluidos aquellos con discapacidades visuales, cognitivas o de aprendizaje.

Imagen decorativa sobre Accesibilidad en información textual

Destacado

Uno de los principios clave es asegurar que el texto sea perceptible. Esto incluye el uso de tamaños de fuente ajustables, colores con buen contraste y la posibilidad de convertir el texto a voz. Además, es importante que el contenido sea operable, lo que significa que los usuarios deben poder navegar y interactuar con el texto utilizando diferentes dispositivos y tecnologías de asistencia, como lectores de pantalla.

Otro aspecto crucial es la comprensibilidad del contenido. El texto debe estar escrito de manera clara y sencilla, evitando jerga técnica innecesaria y utilizando un lenguaje inclusivo. También es útil proporcionar alternativas textuales para contenido no textual, como imágenes y videos, para que todos los usuarios puedan acceder a la misma información.

Pulsa en cada pestaña

Pulsa en la imagen

Muchos utilizan los términos por igual –y quizá no tiene mucho sentido revertir el tren, pues entre expertos hay opiniones encontradas– pero la realidad es que tipografía y fuente no son lo mismo, y te vas a ver muy profesional si los sabes usar correctamente.

¿Qué es tipografía?

La palabra tipografía proviene del griego “typos”, que significa forma e impresión y “graphia”, que significa escritura.

Se define como el arte y la técnica de organizar tipos para que el lenguaje escrito sea efectivo a la hora de ser impreso. Esta gestión implica seleccionar una fuente, organizar los caracteres y repartir el espacio.

Llamamos tipografía al proceso de definir características y aspecto de un texto, la forma y el diseño de un producto impreso.

La tarea del tipógrafo es buscar que el texto desplegado cumpla con tres características esenciales:

Que el texto sea legible

Suena muy obvio, pero esto no siempre está en la cabeza de los diseñadores y marketeros: que se pueda leer. Un buen consejo cuando se trabaja en digital es imprimir tu pieza antes de lanzarla, incluso cuando la versión final vaya solamente para web o móvil.

Que el texto sea estético

No hay fuente correcta o incorrecta. En algunas culturas, situaciones o lugares puede funcionar algo que en otras ocasiones no. La realidad es que ciertas formas o diseños de letra impresos nos recuerdan algo más, nos comunican algo más. Por ejemplo, fuentes gruesas comunican solidez; fuentes delgadas, ligereza.

Que el texto sea comprensible

Tiene que ver con el mensaje que comunica. ¿Cómo te apoyas en tus decisiones de fuente para que tu pieza final cuente la historia que deseas?

Pulsa en la imagen

¿Qué es fuente?

Originalmente, una fuente era una figura con un tamaño, peso y estilo o tipo de letra. En el uso moderno, fuente, del inglés “font”, es el conjunto de modelos (letras, signos y otras marcas) que representan a cada uno de los caracteres de una letra, con base en un diseño particular.

En la actualidad, las fuentes son archivos con información vectorizada que contienen tamaño, forma, interletraje y otros aspectos de cada tipo de letra. Los más populares son: TrueType (.ttf) y OpenType (.otf). Cada vez es más fácil instalar una fuente nueva y apreciarla en la pantalla de nuestra computadora.

Cada fuente tiene una personalidad: seria o divertida, rígida o versátil, delgada o gruesa. Esta forma de ser de las fuentes también comunica.

Cada archivo de fuente tiene algunas variables. Las tres más comunes son:

Normal o regular, es decir, que no tiene alteración
Itálica o cursiva, es decir, con una ligera inclinación hacia el lado derecho
Negrita o bold, es decir, con el trazo más grueso

El lanzamiento de Google Fonts

Hasta antes de 2010, hacer un sitio web con fuentes propias era un dolor de espalda. Los programadores tenían que subir un archivo con la familia tipográfica y muchas veces esto significaba tiempos extra de precarga y errores en el resultado final.

Fue hasta 2010 que Google decide lanzar el proyecto Google Fonts, una biblioteca interactiva con más de 800 fuentes con licencia libre para su uso en web, aplicaciones móviles e impresos.

El directorio de Google Fonts busca la exploración y el descubrimiento de fuentes y, en la actualidad, cuenta con más de 17 billones de fuentes. Las más populares son: Open Sans, Roboto, Lato, Slabo 27px, Oswald y Lobster.

Pulsa en la imagen

Los contenidos para que sean accesibles deben ser lo más claros y simples, pero la tipografía que se utilice en los textos favorecerá o impedirá la completa comprensión de la información.

La tipografía comúnmente usada es de tipo serif (con serifa), la cual posee pequeños adornos ubicados generalmente en los extremos de las líneas de los caracteres. Las tipografías Times, Georgia y Garamond son ejemplos de esta clase. Las fuentes sans serif (sin serifa) carecen de ese detalle.

La diferencia entre estos dos tipos de fuentes radica en su facilidad de lectura. El tipo serif en una página impresa muestra resolución de impresión muy alta por lo que esos pequeños elementos decorativos en los pies de las letras quedan bien definidos. Sucede en caso contrario en una pantalla de ordenador, la resolución no es muy alta lo que produce efectos en las letras que hacen dificultosa su lectura.

Es por ello que se recomienda la utilización de fuentes tipo sans serif como Arial y Verdana, en tamaño no menor de 12 puntos, evitando en lo posible el uso de letra cursiva y haciendo uso moderado de negrita para resaltar textos. Se prefiere el uso de Verdana y no de Arial, ya que esta última no distingue entre la i latina mayúscula y la ele minúscula

En los casos de usuarios con visión reducida que presentan problemas con el enfoque o la claridad, la hipermetropía, la miopía y la visión de túnel, es muy probable que, en la lectura de documentos, dichos usuarios se auxilien de esquemas de color de alto contraste, fuentes grandes e iconos grandes con la ayuda de ampliadores de pantalla.

Aunque estos dispositivos pueden ajustar las opciones de presentación del equipo, debe evitarse utilizar una fuente demasiado pequeña. Como norma general, el tamaño de fuente más pequeño que debe utilizarse es de 10 puntos.

Fuentes accesibles

DESTACADO

En la elaboración de material educativo, y de cualquier tipo de documento, se debe asegurar un buen nivel de legibilidad del contenido para todos los que accedan a éste, independientemente de las dificultades derivadas de la discapacidad o incapacidad temporal, la edad o el idioma. Es importante hacer conciencia que los contenidos mal diseñados o de difícil comprensión, no afectan solamente a personas con discapacidad o con comunicación, movilidad o comprensión reducida, sino también al usuario en general.

Para elaborar material educativo accesible, es importante hacer comprensible tres aspectos: su contenido, su estructura y su formato.

El contenido expuesto debe ser redactado en lenguaje breve y sencillo, sin necesidad de utilizar estructuras gramaticales complejas. El mensaje que se desea transmitir debe ser concreto y directo, evitando en lo posible términos abstractos los cuales podrían resultar confusos.

El valor de un documento no aumenta con su longitud. Se debe evitar las frases innecesariamente largas, no saturar el documento con el uso de expresiones redundantes del tipo “como es sabido”, “está generalmente aceptado que”, “en mi opinión personal”, “y así sucesivamente”, “tanto en opinión de A como de B”. Siempre que sea posible, utilizar palabras sencillas, procurar dividir las frases más cortas, pero recordando incluir palabras de enlace (“pero”, “así”, “aunque”) para mantener la coherencia

Además de diferentes requisitos que se detallarán más adelante en este curso, existen recomendaciones de carácter general que se deben tener en cuenta a la hora de generar contenidos textuales. Los referentes a colores y a tipografía y fuentes se relatan en los apartados correspondientes.

Pulsa en la imagen

Especificar un título del documento.
Para facilitar la comprensión del texto, escribir con un lenguaje claro y sencillo, e incluso incorporar un glosario en el documento.
Proporcionar la forma expandida o el significado de una abreviatura o acrónimo la primera vez que aparezca en el documento.
Se debe especificar el idioma principal del documento.
Proporcionar texto alternativo para todos los elementos no textuales (por ejemplo, en gráficos e imágenes).
Las listas enumeradas, o no enumeradas, deben de crearse a través de la herramienta diseñada para ello y nunca a través de tabulaciones o espacios.
Usar y aplicar estilos para los diferentes tipos de texto en lugar de seleccionar el texto y modificarlo directamente.
Es preferible aplicar los estilos predefinidos (integrados) frente a estilos creados por nosotros. Esto facilita la comprensión de contenidos similares.
Uso de los estilos de forma consistente, es decir, aplicar los mismos estilos para los mismos usos dentro del documento, por ejemplo, en el caso de títulos (encabezados).
Usar elementos de encabezado o título para transmitir la organización del contenido del documento y facilitar su lectura.
En las tablas de datos se deben identificar con los marcadores apropiados los encabezados de fila. En un nivel más avanzado, en caso de tener dos o más niveles de encabezados de filas, se deben utilizar marcadores para asociar las celdas de datos con las celdas de encabezado.
Se deben proporcionar resúmenes de las tablas de datos usando los marcadores apropiados.
Usar y aplicar estilos de celda para los diferentes tipos de texto en lugar de seleccionar el texto y modificarlo directamente.
No combinar ni dividir celdas. Esta práctica dificulta la interpretación de la estructura de celdas por parte de los productos de apoyo.
Intentar no utilizar elementos flotantes porque, en general, dificultan el acceso a su contenido generando problemas de accesibilidad. Es mejor posicionarlos En línea con el texto.
Especificar claramente el destino de los enlaces.
No hacer enlaces con un tamaño demasiado reducido que presenten dificultades para las personas con problemas motrices a la hora de pulsarlos.
Se recomienda utilizar un diseño predefinido con objeto de asegurar el orden correcto de lectura de todos los elementos de apoyo que utilicemos.

En esta sección se indican las pautas a seguir para que, a partir de un archivo de texto, obtengamos un documento Word que pueda exportarse en un formato PDF accesible (etiquetado correctamente).

Se trata de procesar el archivo de texto, de tal modo que a la hora de crear el documento PDF se generen las etiquetas adecuadas que proporcionarán un valor semántico al contenido representado. De este modo, dichas etiquetas proporcionan, por ejemplo, a los lectores de pantalla la información necesaria para la interpretación de la estructura del documento y la representación de su contenido al usuario.

La accesibilidad final del documento dependerá, por tanto, del etiquetado que la versión aplicada de Word es capaz de trasladar al PDF. Se recomienda la utilización de las versiones más recientes posibles.

Para profundizar estos temas recomiendo el curso gratuito en YouTube de WordExperto, donde están ampliamente cubiertos todos estos puntos.

LECTURA COMPLEMENTARIA

Pulsa en la imagen

TABLAS DE DATOS

Las tablas, son elementos que causan problemas de accesibilidad, ya que un usuario con ceguera total o parcial, que hace uso de dispositivos de apoyo como los lectores y/o dispositivos braille, leerá las tablas fila por fila a través de las columnas.

Es por ello, que en el caso que se incluyan tablas dentro del documento con fines de análisis es pertinente que la información contenida se lea de manera coherente línea por línea.

Para los usuarios con visión normal, la Tabla de la imagen del final puede ser analizada sin dificultades, debido a que el ojo localiza la cabecera de cada dato y asocia la información contenida en las casillas. A diferencia del usuario con discapacidad visual que pierde la información que la tabla proporciona, debiendo auxiliarse de un dispositivo para obtener la lectura de las filas, la cual puede ser relevante o no dependiendo del diseño y disposición de la información.

Un aspecto primordial a tener en cuenta en el caso de las tablas de datos es su resumen, cuya función es describir el objeto de la tabla. Para incluir un texto resumen de la tabla accederemos a la pestaña Texto alternativo del cuadro de diálogo de la tabla.

Lectura de tabla por un dispositivo de apoyo:

Destino, Mes, Importe, Concepto, Colombia, Enero, 500, Producto B, El Salvador, Marzo, 200, Producto A, España, Febrero, 600, Producto B.

Es conveniente, por tanto, describir como una tabla encaja en el contexto del documento actual. Aunque no se proporcione ningún título es más importante aún proporcionar un resumen.

Resumen de contenido de tabla:

"Detalle de importación de los productos A y B. La tabla se divide en cuatro columnas. En el sentido de izquierda a derecha, la primera columna 'Destinos’ contiene los tres principales destinos de importación: Colombia, El Salvador y España. En la segunda columna se refleja el mes en que se realizó la importación, en este caso enero, marzo y febrero. La tercera columna detalla el importe cuyos valores son 500, 200 y 600. Para la cuarta columna se especifica el tipo de producto que se importó. Como conclusión de los datos mostrados en la tabla, en el caso de Colombia, se realizaron 500 importaciones del producto B en el mes de enero. Para El Salvador, 200 importaciones del producto A durante el mes de marzo, y desde España en el mes de febrero fueron 600 importaciones del producto B”.

No crear tablas excesivamente grandes, si es posible mantenerlas en una sola página.

En caso de que las tablas sean inevitablemente grandes y pasen de una página, se deberá repetir las cabeceras de la tabla en cada nueva página y no dividir filas al pasar de página

Diseñar tablas simples, evitando combinar celdas y tablas complejas.

Creación de listas tabuladas

Presentar información en tablas

Formato de tablas

Usar tablas para el diseño de páginas

Crear y modificar un estilo de tabla

Insertar títulos de tablas e imágenes

Conversión de documentos accesibles a PDF

Pulsa en la imagen

Conversión de documentos a PDF

Pulsa en la imagen

Especialidades PDF

Se aplican los mismos requisitos de accesibilidad que hemos visto en los apartados anteriores:

Redactar textos fáciles de comprender, y marcar el idioma del documento y de los fragmentos de texto.
Dotar al documento de estructura mediante el uso de listas, párrafos, títulos, etc.
Proporcionar descripciones a los elementos no textuales como imágenes, tablas o gráficos.
Crear enlaces con significado propio.
No transmitir información únicamente mediante el color.

En la mayoría de las ocasiones, los documentos PDF son el resultado de la conversión desde otros formatos como Word o PowerPoint. En la actualidad casi todas las aplicaciones disponen de opciones guardar como PDF, pero no todas tienen en cuenta las características de accesibilidad.

Este es el caso de aplicaciones que instalan una impresora PDF en nuestro sistema para guardar cualquier contenido en este formato. Pero el documento PDF resultante es texto sin estructura y en el peor de los casos el contenido se crea en imágenes, lo que hará el documento inaccesible a personas que utilicen productos de apoyo.

Creación de documentos PDF etiquetados

Pulsa en la imagen

Un documento PDF etiquetado es una versión de PDF que incluye tanto el contenido del documento como información sobre su estructura lógica y del orden de lectura, de forma que el documento pueda ser leído correctamente por los lectores de pantalla.

Para hacer un documento adecuadamente etiquetado hay que usar elementos estructurales como cabeceras, pies, títulos, listas, y demás etiquetas.

La estructura de un documento etiquetado, como se verá posteriormente, se representa en la Ficha de Etiquetas (Tags Palette) de Acrobat en forma de un árbol compuesto por una serie de nodos dispuestos jerárquicamente. Cada nodo o línea en la estructura lógica del árbol representa un elemento de página, como puede ser un párrafo o una imagen, o un elemento en un nivel superior, como una sección o un capítulo, que contiene a esos elementos de página. El tipo de elemento que cada nodo representa se indica con una etiqueta.

Si se dispone de un PDF etiquetado se podrá exportar desde Adobe Acrobat el texto a formato XHTML, XML, RTF, DOC y TXT.

Los documentos PDF etiquetados se pueden crear de diferentes maneras:

A partir de documentos creados con las aplicaciones de edición de textos como, por ejemplo, Microsoft Office, mediante herramientas que exportan a PDF.
Mediante aplicaciones de edición y maquetación que exportan directamente a este formato.
A partir de documentos PDF anteriores que estén sin etiquetar, haciendo uso de la herramienta Accesibilidad mediante la utilidad Etiquetar automáticamente el documento en Adobe Acrobat DC. Esta herramienta analiza la estructura del documento y crea otro documento PDF etiquetado en el que intenta mantener la estructura y el orden de lectura del documento original. Básicamente, lo que hace es identificar los textos, imágenes (sin texto alternativo) y tablas. Sin embargo, otros contenidos como los títulos o encabezados y las listas identificadas mediante viñetas, no puede asegurarse que queden bien etiquetadas con lo que siempre será necesario revisar el marcado mediante la utilidad Orden de lectura.
A partir de documentos escaneados mediante la herramienta Digitalizar y OCR de Adobe Acrobat DC, que mantiene el mismo aspecto del documento original a la vez que incorpora una capa de texto accesible usando reconocimiento de caracteres (OCR). También es posible emplear otra herramienta de reconocimiento de caracteres y, posteriormente, exportar los documentos a formato PDF. Los archivos obtenidos tienen texto generado por ordenador, que es requisito imprescindible para poder usar los productos de apoyo, como los lectores de pantalla.

Con estas herramientas se consiguen documentos PDF etiquetados, pero eso no garantiza la accesibilidad, ya que los documentos obtenidos serán tan accesibles como los documentos originales de los que parten. Si el documento fuente contiene imágenes para las que no se han proporcionado textos alternativos, el documento en PDF resultante carecerá de dichos textos alternativos y será por tanto inaccesible.

Adobe proporciona una serie de herramientas y funcionalidades para ayudar a crear documentos PDF accesibles. Las funcionalidades que aportan son:

Comprobar problemas de accesibilidad en los documentos PDF con la utilidad de Comprobación de accesibilidad.
Corregir problemas en el etiquetado de los documentos PDF etiquetados con el Panel Etiquetas.
Comprobar el documento mediante un sencillo lector de pantalla incorporado en Adobe Acrobat y Adobe Reader. Desde Ver > Leer en voz alta.
Crear formularios PDF accesibles con Acrobat DC. Los formularios PDF etiquetados permiten a los lectores de pantalla reconocer los diferentes campos, leer las descripciones textuales asociadas a cada campo e identificar el orden de lectura de los mismos.

Corregir documentos PDF anteriores

Pulsa en la imagen

Especialidades de las hojas de cálculo con MS Excel

Pulsa en la imagen

Especialidades de las presentaciones con PowerPoint

Pulsa en la imagen

Título de la diapositiva

Pulsa en la imagen

Orden de lectura

La opción Comprobar orden de lectura nos permite revisar el orden lógico del contenido de cada diapositiva (todos los elementos flotantes en el mismo orden en que aparecen en la presentación). De esta manera los lectores de pantalla pueden seguir un orden lógico y permiten entender la presentación a las personas usuarias.

En la parte derecha se abrirá la pestaña Accesibilidad, accederemos a Advertencias > Comprobar el orden de lectura.

Revisar la accesibilidad en Office

En todos los programas desde Archivo > Información > Comprobar si hay problemas > Comprobar accesibilidad abre el Panel Accesibilidad y, en el caso de Excel y PowerPoint, además, la pestaña Accesibilidad.

Pulsa en la imagen

Revisar la accesibilidad en Office

3 Accesibilidad en el diseño de imágenes

3.1 Introducción

La accesibilidad en el diseño es un aspecto crucial que garantiza que todas las personas, independientemente de sus capacidades físicas o cognitivas, puedan interactuar con productos y servicios digitales de manera efectiva e independiente. En el contexto de las imágenes, la accesibilidad se vuelve aún más relevante, ya que las imágenes visuales son una parte fundamental de la comunicación en línea y fuera de línea. A continuación, exploraremos cómo aplicar principios de accesibilidad al diseño de imágenes y por qué es esencial para crear contenido inclusivo. En el tema 2 también tratamos este tema.

La accesibilidad en el diseño de imágenes se refiere a la creación de imágenes que sean comprensibles y utilizables por todas las personas, incluidas aquellas con discapacidades visuales, cognitivas o motoras.

Aquí hay algunas consideraciones clave:

Imagen decorativa sobre la Accesibilidad en el diseño de imágenes

Destacado

Tamaño y Resolución:

Las imágenes deben ser lo suficientemente grandes y de alta resolución para que se vean claramente en diferentes dispositivos.
Evita imágenes pixeladas o demasiado pequeñas que dificulten la identificación del contenido.

Composición y Foco Visual:

Diseña imágenes con una composición clara y un punto focal evidente.
Evita elementos visuales confusos o distracciones innecesarias.

Evita el Uso Exclusivo de Texto en Imágenes:

Siempre que sea posible, evita colocar información crítica solo en imágenes. Algunas personas no pueden ver imágenes o no tienen acceso a ellas.

Gráficos Inclusivos:

Utiliza imágenes que representen la diversidad racial, de género y de habilidades.
Evita estereotipos y clichés.

3.2 Herramientas y Prácticas para la Accesibilidad en el Diseño de Imágenes

Editores de Imágenes:

Utiliza herramientas como Photoshop, Illustrator, Canva o GIMP para crear y editar imágenes.
Estos programas te permiten agregar texto alternativo y ajustar el contraste y el tamaño.

Validadores de Accesibilidad:

Utiliza herramientas en línea como axe DevTools o WAVE para verificar la accesibilidad de tus imágenes.
Estas herramientas escanean tus imágenes y proporcionan recomendaciones para mejorar la accesibilidad.

Pruebas con Lectores de Pantalla:

Realiza pruebas con lectores de pantalla para asegurarte de que el texto alternativo se lea correctamente.
Verifica si la imagen comunica su propósito sin depender únicamente de la vista.

3.3 Esquemas de color

En la redacción de documentos debemos tener en cuenta que entre los usuarios que accedan a la información, existe un porcentaje que poseen cierto grado, ceguera de color. En muchos casos puede significar que no distingue los colores o un color en específico, o visualizar solamente los colores blanco y negro.

Pulsa en cada pestaña

En vista que no se puede asegurar que las limitantes de los usuarios que acceden a la información y, buscando siempre proporcionar un diseño accesible para todos, se debe ser cuidadoso en los siguientes aspectos: el uso semántico del color y el contraste de colores.

Asegurarse de que toda la información disponible con color también lo esté si el color no está disponible (mediante el contexto o el marcado).

No utilizar el color como único medio para transmitir información. Por ejemplo, en los títulos se recomienda utilizar negrita o un tamaño de fuente mayor; en los enlaces se puede añadir un subrayado; en los gráficos utilizar texturas en lugar de colores.

Aplicar suficiente contraste (al menos, 4.5:1) entre las combinaciones de color del fondo y de primer plano en textos, en imágenes de texto y también en todo gráfico que conlleve información o sea funcional, como por ejemplo un botón gráfico.

Evitar utilizar los colores rojo, naranja y verde.

El contraste adecuado entre el fondo y los elementos visuales es esencial. Asegúrate de que el texto sea legible y que los elementos importantes se destaquen.

Evita utilizar colores que puedan dificultar la lectura o que no sean distinguibles para personas con daltonismo.

Los esquemas de color accesibles son una parte crucial del diseño web y gráfico, especialmente cuando se trata de cumplir con las pautas de accesibilidad web.

Los esquemas de color accesibles son combinaciones de colores que aseguran que el contenido digital sea fácilmente visible y comprensible para todos los usuarios, incluyendo aquellos con discapacidades visuales. Estos esquemas toman en cuenta el contraste de color, la luminosidad y la saturación para garantizar que los elementos de la interfaz sean distinguibles y legibles.

La accesibilidad del color es vital porque un gran número de personas tiene algún tipo de discapacidad visual, como daltonismo o baja visión. Un esquema de color accesible puede hacer que un sitio web o una aplicación sea usable para estas personas.

Además, un buen esquema de color puede mejorar la experiencia del usuario para todos. Un contraste adecuado puede hacer que el texto sea más fácil de leer, y los colores bien elegidos pueden ayudar a guiar la atención del usuario y a destacar la información importante.

Crear un esquema de color accesible implica varios pasos:

Elección de colores base: Los colores base son los colores principales que se utilizarán en el diseño. Estos colores deben ser lo suficientemente distintos entre sí para ser fácilmente distinguibles.
Consideración del contraste: El contraste entre los colores es crucial para la accesibilidad. Un contraste alto entre el texto y el fondo puede hacer que el texto sea más fácil de leer. Las pautas de accesibilidad web recomiendan un ratio de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande.
Pruebas de accesibilidad del color: Existen herramientas en línea que pueden ayudar a probar la accesibilidad del color de un esquema de color. Estas herramientas pueden mostrar si los colores elegidos cumplen con las pautas de accesibilidad web.
Consideración del daltonismo: Alrededor del 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de daltonismo. Los diseñadores deben tener en cuenta esto al elegir los colores, y evitar combinar colores que sean difíciles de distinguir para las personas daltónicas.

Existen varias herramientas que pueden ayudar a los diseñadores a crear esquemas de color accesibles. Algunas de estas herramientas incluyen:

Simuladores de daltonismo: Estas herramientas permiten a los diseñadores ver cómo se verían sus diseños para las personas con diferentes tipos de daltonismo.
Comprobadores de contraste de color: Estas herramientas permiten a los diseñadores comprobar el contraste entre dos colores para ver si cumplen con las pautas de accesibilidad web.
Generadores de esquemas de color: Estas herramientas permiten a los diseñadores crear esquemas de color completos que sean accesibles.

En resumen, los esquemas de color accesibles son una parte esencial del diseño accesible. Al elegir colores que sean fáciles de distinguir y que tengan un contraste adecuado, los diseñadores pueden crear sitios web y aplicaciones que sean más inclusivos y fáciles de usar para todos.

Lectura complementaria

https://es.wikipedia.org/wiki/Esquema_del_color

https://s3.accesoperu.com/wp6/includes/htmlarea/mezclador/ayuda/ec.htm

https://acumbamail.com/blog/esquemas-de-color/

3.4 Cómo insertar imágenes

Todas las imágenes y el resto de las ilustraciones deben ir En línea con el texto. Está totalmente desaconsejado el uso de elementos flotantes. Las ilustraciones En línea con el texto se comportan como otro carácter más. Las flotantes se pueden desplazar por el texto, ancladas o no a un determinado párrafo, en la misma capa que el texto, encima o debajo. En este caso hay que controlar su posición y el ajuste con el texto que la rodea, desde el cuadro de diálogo Disposición, en sus pestañas Posición y Ajuste del texto, al que se accede desde Formato de imagen > Organizar > Posición o Ajustar texto > Más opciones de diseño…

Gráficas accesibles

Como en el caso de las imágenes, las gráficas deben ser accesibles para todos los usuarios en general independientemente de sus limitaciones. Para ello es necesario considerar el uso de color, textos alternativos y títulos, que faciliten el acceso a la información que se desea transmitir.

Insertar imágenesVideo-cb69260cb655

3.5 Textos alternativos y descripciones

Todas las imágenes y figuras del documento deben poseer un texto alternativo que describa la imagen de forma adecuada aportando información para comprender el documento. Por ello, todas las imágenes y figuras del documento deben poseer texto alternativo (aunque esta esté vacía en el caso de las imágenes decorativas). Este texto describe el contenido y la función de la imagen.

El texto alternativo es fundamental para las personas con discapacidad visual, ya que los lectores de pantalla utilizan esta descripción para comunicar el contenido de la imagen.

Pulsa en la imagen

4 Accesibilidad en audio

4.1 Introducción

Se puede definir Multimedia como la combinación de múltiples medios (texto, imágenes, gráficos, animaciones, vídeo, sonido, etc.) para presentar o comunicar información.

Cada vez es más frecuente la inclusión de elementos multimedia en los sitios Web, tales como vídeo o audio, propiciando de esta manera una notable mejora de la atención y la comprensión por parte de los usuarios, ya que la combinación adecuada de los diferentes medios se acerca al modo habitual de comunicación entre los seres humanos, al emplearse varios sentidos para comprender un mismo concepto u objeto.

No obstante, el empleo de estos elementos sin tener en cuenta los requisitos de accesibilidad, puede ocasionar una importante barrera de acceso a determinados usuarios, por lo que se hace indispensable tener presentes los aspectos relacionados con la accesibilidad en elementos multimedia si se desea desarrollar un sitio Web accesible.

Imagen decorativa sobre Accesibilidad en el audio

Recuerda

Los requisitos de accesibilidad relativos a elementos multimedia recogidos en la presente guía están basados en las nuevas Pautas de Accesibilidad para el Contenido Web 2.0 (WCAG 2.0), las cuales se muestran más restrictivas en el tratamiento de esta tipología de contenidos web frente a las WCAG 1.0, aunque también más específicas y explicativas, lo que ayuda a los desarrolladores a comprenderlas y aplicarlas. Ya las vimos en la primera sección.

4.2 Criterios de accesibilidad generales para contenidos multimedia

En esta sección se estudiarán aquellos criterios de accesibilidad que son aplicables con carácter general tanto a vídeo como a audio.

Pulsa en cada pestaña

CONTROL DE REPRODUCCIÓN

Es importante evitar la reproducción automática de los elementos de vídeo o audio al cargar la página, ya que ello podría confundir o distraer a los usuarios, pudiendo asimismo ralentizar la carga de la propia página.

POSIBILIDAD DE USO A TRAVÉS DE TECLADO

Los elementos de interacción (botones de reproducción, pausa, etc.) presentes en los elementos de vídeo y audio deben ser funcionales independientemente del dispositivo empleado, ya sea un dispositivo apuntador como el ratón o un dispositivo de teclas. Eso implica que deben poder responder a la tabulación y a la activación por teclado.

AUSENCIA DE TRAMPAS DE TECLADO

El foco del teclado no deberá estar bloqueado o fijado en un elemento de vídeo o audio, es decir, que sólo pueda salirse de él mediante un ratón o dispositivo apuntador. El usuario deberá poder moverse por todos los elementos de interacción tanto del reproductor como de la página utilizando únicamente el teclado.

DEFINICIÓN DE UN ORDEN DE TABULACIÓN ADECUADO

Se debe asegurar que el orden en el que se acceda a los controles de reproducción sea el orden lógico y que éste no se vea alterado dependiendo del dispositivo empleado.

Con el objeto de que los contenidos multimedia ofrecidos permitan una mayor difusión entre los usuarios, siempre es recomendable ofrecer más de un formato o más de una codificación disponible para descarga. La conversión de una fuente de vídeo o audio en diversos formatos supone una tarea relativamente rápida de llevar a cabo y potencia en gran medida la accesibilidad y la difusión del contenido ofrecido.

Además, para que los usuarios puedan acceder correctamente a la Web independientemente de posibles limitaciones tecnológicas (conexiones lentas, poca capacidad de almacenamiento, velocidad de procesamiento, etc.), es necesario ofrecer elementos multimedia optimizados y con la menor carga posible. Siempre resultará operativo ofrecer vídeos y audios con diferentes calidades de tal forma que el usuario escoja en función de la carga soportada por su conexión.

4.3 Elementos multimedia

Se debe describir el material multimedia para que el lector sepa qué esperar. Si al usuario con discapacidad visual se le informa que el contenido de un vídeo no contiene audiodescripción, entonces sabrá que puede ignorarlo. En segundo lugar, para que la información sea accesible para todos usuarios, habrá que facilitar alternativas tales como:

Audiodescripción: Dirigido especialmente a usuarios con discapacidad visual o limitada, donde los vídeos o contenidos de imagen, sean narrados en pantalla, al momento de transmitir un vídeo.
Subtitulados: Se trata de pasar títulos de lo que están hablando los personajes en un producto audiovisual. Está indicado para personas con discapacidad auditiva.
Lenguaje braille: Es un sistema por puntos, que utilizan las personas con discapacidad visual, para leer y escribir.
Lengua de señas o de signos: Es el lenguaje utilizado por las personas sordas para comunicarse.
Lectura fácil: Los textos en lectura fácil están realizando en un lenguaje resumido y sencillo para que puedan ser comprendidos por personas con problemas cognitivos o discapacidad intelectual.

4.4 Destellos y parpadeos

Una pantalla parpadeante o con destello, puede provocar ataques de epilepsia fotosensitiva en ciertos usuarios. Por ello, los desarrolladores deben evitar causar destellos y parpadeos de la pantalla.

Esta premisa es extensible a los elementos de vídeo, debiéndose cumplir los siguientes condicionantes:

No se pueden provocar más de tres destellos generales (seis transiciones de claro a oscuro, o de oscuro a claro) por segundo.
Se permiten contenidos que produzcan un máximo de 3 destellos por segundo, siempre que el área de destello sea inferior al 25% de los 10 grados del campo visual (que representa el área central de la visión en el ojo).
No se pueden provocar más de tres destellos rojos (seis transiciones opuestas que involucran un rojo saturado) por segundo.
El parpadeo puede durar un máximo de cinco segundos. En caso contrario, se deben proporcionar mecanismos que permitan pausarlo, detenerlo u ocultarlo.

4.5 Audio estéreo o mono

Cuando se trata de la reproducción de sonido, existen dos opciones principales: audio estéreo y audio mono. Ambos tienen sus ventajas y consideraciones, y la elección entre ellos depende del contexto y las preferencias del usuario.

Vamos a explorar más a fondo cada uno de ellos:

Pulsa en cada pestaña

Experiencia Inmersiva:

El audio estéreo utiliza dos canales de sonido: izquierdo y derecho. Esto permite una experiencia de sonido más rica y espacial.

Al escuchar música con auriculares estéreo, puedes percibir diferentes instrumentos o voces en cada oído. Esto mejora la calidad del sonido y crea una sensación envolvente.

Separación de Sonido:

El audio estéreo es ideal para música, películas y juegos, ya que permite una separación clara entre los elementos de sonido.

Puedes distinguir fácilmente la voz del cantante, los acordes de la guitarra y los efectos de sonido en una película.

Requisitos:

Para aprovechar al máximo el audio estéreo, necesitas dos altavoces o auriculares. Si solo tienes uno, no experimentarás la verdadera calidad estéreo.

Consideraciones:

Algunas personas con discapacidad auditiva pueden encontrar confuso el audio estéreo debido a la separación de canales.

En entornos ruidosos, la calidad estéreo puede perderse si no se utilizan auriculares de buena calidad.

Compatibilidad Universal:

El audio mono se reproduce en un solo canal, lo que significa que funciona en cualquier dispositivo con un solo altavoz o auricular.

Es común en llamadas telefónicas, radios y sistemas de megafonía.

Simplicidad:

El audio mono es simple y directo. No hay necesidad de preocuparse por la separación de canales.

Es ideal para situaciones en las que la simplicidad y la funcionalidad son más importantes que la calidad de sonido.

Menos Inmersivo:

El audio mono no ofrece la misma experiencia espacial que el estéreo. No puedes percibir la dirección del sonido.

Menos Detalle:

Algunos matices de sonido pueden perderse en el audio mono debido a la falta de separación de canales.

Para Personas con Discapacidad Auditiva:

El audio mono es preferible para personas con discapacidad auditiva, ya que evita la confusión causada por la separación de canales.

Para Experiencias Multimedia:

El audio estéreo proporciona una mejor calidad de sonido en la mayoría de las situaciones multimedia.

Sin embargo, en dispositivos de asistencia auditiva o sistemas de emergencia, el audio mono es más adecuado.

En resumen, ambos tipos de audio tienen su lugar y propósito. La elección depende de tus necesidades específicas y del contexto en el que se utilice.

4.6 Ajuste del Balance de Audio

Ajuste del Balance de Audio en Windows

Pulsa en la imagen

Ajuste del Balance de Audio en iOS (iPhone)

Pulsa en la imagen

Consideraciones Finales

Recuerda que el ajuste del balance de audio puede ser útil para personas con discapacidad auditiva o para aquellos que deseen personalizar su experiencia de sonido.

4.7 Elementos de audio

Son aquellos elementos que contienen únicamente información sonora para transmitírsela a los usuarios.

¿Cómo se incluye un audio en una página web?

Inclusión directa de audio en (X)HTML
Inclusión de audio mediante tecnología Flash
Inclusión de audio en HTML 5

Pulsa en cada pestaña

Para facilitar el estudio de tales requisitos, se distinguirá entre contenido pregrabado y contenido en directo. De esta forma, se entiende por contenido en directo aquella información extraída de un evento en tiempo real y transmitido con el único retraso del propio retardo intencional de la emisión. Mientras que toda la información que no se transmite en directo se considerará contenido pregrabado.

Transcripción textual equivalente (audio pregrabado)
Control de reproducción (todo audio).
Capacidad de ser manejado a través de teclado (todo audio).
Orden de tabulación adecuado (todo audio).

Así, en primer lugar, se ha de ofrecer la transcripción textual, ya que al tratarse de una alternativa basada en texto puede ser representada a través de cualquier modalidad sensorial (por ejemplo, visión, oído o tacto) e interpretada de diversas formas por los productos de apoyo (leída en voz alta, presentada visualmente o convertida a braille), lo que ayuda a satisfacer las necesidades de distintos grupos de usuarios.

Una vez que se ha proporcionado la transcripción textual, y con el fin de mejorar la accesibilidad del elemento de audio, es igualmente recomendable abordar progresivamente los aspectos relativos a la interacción (control de reproducción, uso independiente de dispositivo de entrada y tabulación adecuada).

Los contenidos que sólo contienen audio pregrabado deben poseer una alternativa equivalente accesible. En este sentido, se ha de crear una transcripción textual en la que se recoja la misma historia y se presente la misma información que en el contenido de sólo audio pregrabado. Dicha transcripción servirá como descripción larga del contenido e incluirá todos los diálogos importantes, descripciones de los sonidos de fondo, etc. que forman parte de la historia.

Además, la información que se transmite en la transcripción se debe encontrar en el mismo orden que en el flujo de reproducción del audio.

La transcripción textual puede encontrarse en la misma página que el audio o en una página distinta. Si la transcripción se incluye en la misma página que el audio, se deberá indicar su final y ofrecer un enlace ancla de vuelta a la ubicación del audio.

En cualquier caso, se proporcionará un enlace a la transcripción inmediatamente antes o después del audio.

No contener sonidos de fondo.
Poder desactivar los sonidos de fondo.
Sonido de fondo al menos 20 decibelios más bajo (o lo que es lo mismo, aproximadamente cuatro veces más silencioso) que el discurso en primer plano.
Los contenidos de sólo audio en directo deben disponer de una versión en texto. Para ello, se puede utilizar un servicio de subtítulos en tiempo real, que consiste en que un operador humano entrenado especialmente escucha lo que se va diciendo y a través de un teclado especial introduce el texto con un mínimo retraso y de forma bastante fidedigna. El área que contiene el texto de los subtítulos debe estar disponible en la misma página en la que se encuentra el contenido de audio en directo.
También se puede proporcionar una transcripción o guion si el contenido de audio en directo es un discurso preparado o está siguiendo un guion establecido. Debido a que el guion está preparado de antemano, puede ser más exacto y completo que la transcripción directa, sin embargo, no se podrá sincronizar con el audio mientras se reproduce. La transcripción o guion puede incluirse en la misma página o en otra diferente, si bien, en ambos casos se deberá ofrecer un enlace a éste.

Muestra un ejemplo de Transcripción de audio

5 Accesibilidad en vídeo

5.1 Introducción

El vídeo es la tecnología en la que se integra una secuencia de imágenes y sonidos para representar escenas en movimiento.

¿Cómo se incluye un vídeo en una página web?

Inclusión directa de vídeo en (X)HTML
Inclusión de vídeo mediante tecnología Flash
Inclusión de vídeo en HTML 5

¿Qué requisitos de accesibilidad debe tener un vídeo?

Además de los comunes a todos los elementos multimedia que vimos en la sección anterior.

Imagen decorativa sobre la accesibilidad en vídeo

Saber más

Prioridad 1 (Conformidad A)

Transcripción textual (vídeo pregrabado).
Subtítulos (vídeo pregrabado)
Destellos y parpadeos apropiados (vídeo en directo y pregrabado).
Control de reproducción (vídeo en directo y pregrabado).
Capacidad de ser manejado a través de teclado (vídeo en directo y pregrabado).
Orden de tabulación adecuado (vídeo en directo y pregrabado).

Prioridad 2 (Conformidad AA)

Subtítulos (vídeo en directo).
Audio descripción (vídeo pregrabado).

Destacado

Se ha de ofrecer la transcripción textual, ya que al tratarse de una alternativa basada en texto puede ser representada a través de cualquier modalidad sensorial (por ejemplo, visión, oído o tacto) e interpretada de diversas formas por los productos de apoyo (leída en voz alta, presentada visualmente o convertida a braille), lo que ayuda a satisfacer las necesidades de distintos grupos de usuarios.

Una vez desarrollada la transcripción textual, el siguiente requisito que se debería abordar es el de subtitulado, pudiéndose incrustar los subtítulos en el mismo vídeo o bien asociarlos en un fichero externo.

Por último, y con el fin de refinar la accesibilidad del elemento de vídeo, es igualmente recomendable abordar progresivamente los aspectos relativos a la interacción (control de reproducción, uso independiente de dispositivo de entrada y tabulación adecuada).

5.2 Transcripción textual

Se debe ofrecer para todo vídeo pregrabado una transcripción textual tanto de su banda visual, como de su banda sonora. Ofrecer dicha transcripción evita perder información a aquellas personas que no tengan posibilidad de visualizar los vídeos con normalidad.

En estas trascripciones textuales han de incluirse los diálogos hablados, así como todos los sonidos significativos, aparezcan o no en pantalla. Asimismo, también se deben incluir las descripciones del contenido visual necesarias para comprender el vídeo.

· La información auditiva que se tendría que incluir en la transcripción textual incluye los diálogos con identificación de hablantes, identificación de la música, avisos de sonidos como risas, aplausos, ruidos importantes y, en general, todos los sonidos significativos en general:

· La información visual que habría que incluirse en la transcripción incluyen las descripciones de los escenarios, personas, acciones realizadas, expresiones y lenguaje corporal, gráficos y textos mostrados en pantalla y, en general, todo contenido visual relevante.

Pulsa en la imagen

5.3 Subtítulos

Independientemente de que un vídeo pregrabado posea equivalente textual, es necesario proporcionar un equivalente sincronizado (subtítulos) a la banda sonora.

Este requisito es vital para las personas sordas o con limitaciones auditivas, que se beneficiarán claramente de la correcta subtitulación. Los subtítulos permiten a las personas con discapacidades auditivas acceder a toda la información de forma sincronizada con la presentación multimedia. Es decir, pueden ver el contenido multimedia al mismo tiempo que leen los subtítulos y no están limitados a acceder únicamente a una transcripción textual que, aunque proporciona toda la información, limita significativamente su experiencia de usuario.

A diferencia de los subtítulos habituales, el subtitulado para sordos (captioning) incluye todos los contenidos sonoros, tanto los diálogos como los sonidos ambientales y todo sonido significativo necesario para comprender el contenido multimedia.

Si el contenido multimedia tiene varias pistas de audio en diferentes idiomas entonces se deberían proporcionar subtítulos para todos los idiomas usados.

Además de existir, los subtítulos deben transcribir adecuadamente los contenidos que se están visualizando en el propio vídeo, cumpliéndose los siguientes requisitos:

Los contenidos incluidos en los subtítulos se deberán corresponder con los contenidos en el propio vídeo.
La fuente utilizada en los mismos no debe causar problemas de legibilidad a ningún usuario. Así, se recomienda emplear texto amarillo, verde o cian sobre fondo negro, con un tipo de fuente convencional y un tamaño que permita su lectura sin dificultad en un monitor de tamaño medio.
Los tiempos de entrada de los subtítulos se deberán corresponder correctamente con la pista de audio.
Los vídeos dispondrán de un mecanismo de activación/desactivación de subtítulos, opción recomendable en este tipo de elementos.

5.4 Descripciones auditivas

Cuando se trasmite información importante en la banda visual de un vídeo pregrabado, es necesario incluir una descripción auditiva (también llamada audio descripción) adecuada de la escena.

De forma similar a los subtítulos, las descripciones auditivas están sincronizadas con la banda visual y, en este caso, son útiles para que las personas con discapacidades visuales puedan seguir la acción y la información no auditiva de los vídeos. Es decir, de lo que se ve en las imágenes.

La descripción auditiva es una narración con información sobre los elementos visuales claves presentes en el vídeo como los escenarios, acciones, lenguaje corporal, gráficos y texto mostrado en pantalla y, en general, todo el contenido visual relevante.

Se debe prestar especial atención a que la descripción auditiva no interfiera con el audio original (diálogos, sonidos más importantes, etc.). Es similar a la voz de un narrador que va explicando de palabra lo que ocurre en la imagen, aprovechando los silencios y sin interferir con el audio original.

Es importante recordar que no siempre es necesario incluir una descripción auditiva. Si la información visual importante ya está incluida en el audio existente, o no hay información visual relevante, entonces no es necesaria una descripción en audio.

5.5 Alternativas para vídeo en directo

Al igual que sucede con los contenidos pregrabados, también es necesario proporcionar un mecanismo que permita a las personas sordas o con limitaciones auditivas el acceso a los diálogos y sonidos importantes de emisiones multimedia en directo.

Así, para los vídeos que son emitidos en directo se deberán proporcionar subtítulos sincronizados con el audio.

La creación de subtítulos precisos cuando se trabaja con contenidos multimedia en tiempo real resulta complicada, dado el poco tiempo disponible para corregir errores, escuchar el contenido una segunda ocasión, o asegurarse de las palabras reproducidas con precisión. No obstante, ya existen técnicas de escritura de texto en tiempo real basadas en el uso de tecnologías de taquigrafía y escritura rápida.

6 Diseño y desarrollo de sitios web accesibles

6.1 Introducción

Los principios que se estipulan en este Real Decreto 1112/2018 se basan en los mismos criterios estipulados en la WCAG 2.1, pero sin la obligatoriedad del cumplimiento de las directrices de nivel AAA. La WCAG 2.1 es una reconsideración de los criterios de la anterior norma WCAG 2.0, donde se añaden nuevos criterios pensados en los requisitos requeridos por las personas que sufren problemas de accesibilidad.

Muestra un resumen de los principios y requisitos de accesibilidad web

A continuación, profundizamos en los conceptos introducidos en la primera sección, y se definirá qué es la WCAG, sus respectivas normas la WCAG 2.0 y la WCAG 2.1.

WCAG es el acrónimo de Web Content Accessibility Guidelines, e incluye directrices sobre accesibilidad web publicados por la Web Accessibility Initiative, siendo parte del World Wide Web Consortium (W3C), la principal organización de estándares de Internet.

Estas directrices detallan cómo se debe trabajar el contenido web con el objetivo de ser más accesible, especialmente para personas con discapacidad. Entre estas discapacidades se encuentran ceguera o baja visión, sordera o pérdida auditiva, discapacidades de aprendizaje, limitaciones cognitivas, limitaciones psicomotrices, discapacidades del habla, o fotosensibilidad.

Destacado Pautas WCAG

Pulsa en cada pestaña

En WCAG se organizan cuatro principios fundamentales para la accesibilidad del contenido: perceptible, operable, comprensible y robusto. Dentro de cada principio encontramos una serie de pautas, y dentro de las pautas unos criterios de aceptación. Los principios fundamentales son:

Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos correctamente.

Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables por cualquier usuario.

Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles para todos los usuarios.

Robusto: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario.

Los criterios que desarrollan cada uno de los principios anteriores se clasifican en función de un nivel de prioridad que se etiqueta con los siguientes valores:

Simple A (A): cuando cumple todos los puntos de verificación de prioridad 1.

Doble A (AA): cuando cumple todos los puntos de verificación de prioridad 1 y 2.

Triple A (AAA): cuando cumple todos los puntos de verificación de prioridad 1, 2 y 3.

Nivel de conformidad: Para lograr conformidad con el nivel A, AA o AAA, la página web satisface todos los criterios de conformidad del nivel, o proporciona una versión alternativa conforme al nivel.
Páginas completas: El nivel de conformidad se aplica a páginas web completas, y no se puede alcanzar si se excluye una parte de la página.
Procesos completos: Cuando una página web es parte de una serie de páginas web que presentan un proceso, todas las páginas en ese proceso deben ser conformes con el nivel especificado o uno superior.
Uso de tecnologías exclusivamente según métodos que sean compatibles con la accesibilidad: Para satisfacer los criterios de conformidad solo se depende de aquellos usos de las tecnologías que sean compatibles con la accesibilidad.
Sin interferencia: Si las tecnologías se usan de una forma que no es compatible con la accesibilidad, o está usada de una forma que no cumple los requisitos de conformidad, no debe impedir a los usuarios acceder al contenido del resto de la página.

6.2 Desarrollo de un sitio web accesible

Pulsa en cada pestaña

El idioma en el que está escrito debe estar definido correctamente en la misma para que tanto el navegador como los lectores de pantalla u otros dispositivos que funcionan con varios idiomas puedan identificarlo y mostrar correctamente la información de la página. Esto facilitara la comprensión del contenido a todos los usuarios, con discapacidad o no.

En el caso de que en los contenidos de la página se utilicen idiomas diferentes es necesario, por lo tanto, que se identifique el idioma correspondiente en cada uno de ellos para que cualquier aplicación pueda realizar las adaptaciones necesarias. Por ejemplo, una página escrita en español puede incluir un párrafo o cita en inglés o un enlace a la versión en inglés de la página cuyo texto este a su vez en inglés.

Idioma de la página. El idioma predeterminado de cada página web puede ser determinado por software.
Idioma de las partes. El idioma de cada pasaje o frase en el contenido puede ser determinado por software, excepto los nombres propios, términos técnicos, palabras en un idioma indeterminado y palabras o frases que se hayan convertido en parte natural del texto que las rodea.

El título de la página permite a los usuarios identificar rápida y fácilmente la información contenida en la página web, en el caso de personas con dificultades cognitivas y personas con visión limitada u otras dificultades que hacen uso de dispositivos de audio para navegar por la web es importante que el título describa claramente la información contenida en la página. Por otro lado, esta es la descripción de la página que aparecerá en los mapas de sitio o en los resultados de una búsqueda permitiendo al usuario decidir si la página se ajusta a sus necesidades o preferencias.

Las páginas web tienen títulos que describen su temática o propósito.
El título descriptivo de una página HTML está marcado con el elemento <title>, que se mostrará en la barra de título de las aplicaciones de usuario.

El objetivo de la página web es transmitir su contenido por lo que la presentación del mismo no debe interferir en el acceso al mismo.

Información y relaciones. La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.
Secuencia significativa. Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software la secuencia correcta de lectura.

Se recomienda realizar las comprobaciones indicadas en los epígrafes siguientes.

Separación del contenido de la presentación visual del mismo

Para ello deben utilizarse conjuntamente las etiquetas HTML para estructurar el contenido y reglas de estilo CSS para la presentación de este.

Una vez desactivadas las reglas de estilo se comprobará que el contenido de la página sigue siendo comprensible y su significado no se ha visto alterado.

Contenido estructurado

Atendiendo a criterios semánticos que doten de significado y jerarquicen la información, deben identificarse los diferentes elementos y secciones dentro del contenido distinguiendo listas, encabezados, párrafos, enlaces, tablas de datos. Se utilizan etiquetas semánticas que permiten dotar de un significado adicional al contenido (texto importante resaltado, texto especial como una dirección de correo, etc.) y definir más concretamente los elementos incluidos en la página. Evitará que la posterior presentación del contenido genere problemas de accesibilidad.

Los encabezados y etiquetas describen el tema o propósito.

Presentación coherente, consistente y homogénea en los elementos de navegación

Los mecanismos de navegación ayudan al usuario a conocer donde se encuentra dentro del sitio web, a desplazarse entre los contenidos del mismo y a identificar la información principal de la página, facilitando la accesibilidad.

Tener en cuenta todas las recomendaciones sobre color, tipografía, sonido y destellos.

Límites en los tiempos de interacción con la página

El establecimiento de un límite en el tiempo de interacción con la página puede dificultar la lectura del contenido o llevar a cabo funciones como rellenar un formulario para algunos usuarios con baja visión o limitaciones cognitivas que pueden necesitar más tiempo. Se recomienda evitar su uso siempre que sea posible, permitiendo su personalización o extensión en caso de que el establecimiento de este límite sea necesario. Excepción de tiempo real: El límite de tiempo es un requisito que forma parte de un evento en tiempo real (por ejemplo, una subasta) y no resulta posible ofrecer una alternativa al límite de tiempo.

Este tema ha quedado ampliamente cubierto en otros apartados del curso referentes a la accesibilidad en textos y audio.

El objetivo de este análisis es el de los objetos programados o incrustados. Estos objetos incrustados como pueden ser un script o un applet Java deben ser completamente accesibles sin la necesidad de una alternativa siempre y cuando la tecnología usada tenga soporte para la accesibilidad y el objeto o script en cuestión se haya desarrollado de manera accesible. Este método proporciona a los documentos dinamismo y minimiza la carga de trabajo en los servidores web ya que deriva parte de este trabajo a los clientes. Se requiere de alternativas accesibles, aportar información y funcionalidad incluidas en los elementos de programación a través de medios que permitan la correcta interpretación y disponibilidad de estos a todos los usuarios

Avanzado: Accesibilidad de los elementos de la página

6.3 Evaluación global de la accesibilidad de la página

Pulsa en cada pestaña

Independientemente del dispositivo que el usuario utilice para acceder al contenido de la web, la información siempre debe estar disponible y accesible para el usuario. Con esta idea se pretende que cualquier usuario, desde cualquier lugar, en cualquier momento y utilizando cualquier dispositivo tenga acceso a toda la información evitando la fragmentación de la web en espacios accesibles solo para dispositivos concretos, es decir, la web universal. En los últimos años, debido al crecimiento en la variedad de dispositivos de acceso a la web, es importante desarrollar contenido accesible desde cualquier dispositivo.

Como primera comprobación se realizará una evaluación de la funcionalidad y el aspecto de la página en los diferentes navegadores de Internet más utilizados en la actualidad: Internet Explorer, Mozilla Firefox, Google Chrome, Safari y Opera.

NonVisual Desktop Access (NVDA) lee el contenido que se va mostrando en la pantalla para personas invidentes o con deficiencias visuales, bien pasando el cursor por el contenido de la página con la aplicación activada o utilizando el teclado mediante la combinación de una serie de teclas que permiten al usuario desplazarse por el contenido de web. Mediante el uso de diferentes sonidos indica al usuario que acción está realizando, por ejemplo, si se trata de una zona de edición (introducir texto) o se trata de un botón para realizar una acción.

Con el uso de esta aplicación se pone de manifiesto la accesibilidad de los elementos de la página, como pueden ser las imágenes o la correcta definición de los elementos que estructuran la misma o la total funcionalidad de la página mediante el uso de teclado. Se puede comprobar si puede leer todos los elementos, comprobar los problemas para leer una página web con muchos enlaces y si existe un orden de lectura correcto.

Se recomienda utilizar al menos cuatro herramientas diferentes, ya que unas herramientas pueden subsanar las limitaciones que otras tienen.

Las cuatro herramientas en línea de evaluación WCAG 2.0 recomendadas, a las que se debe proporcionar la dirección URL de la página a evaluar, son las siguientes:

TAW.
AChecker.
eXaminator.
Tingtun Ckeckers.

Utilizando una herramienta automática que obtenga una calificación global de la página, como por ejemplo eXaminator o eGOVMON.

6.4 Limitaciones visuales

El diseño y desarrollo de sitios web accesibles es una práctica fundamental para garantizar que todas las personas, independientemente de sus habilidades o discapacidades, puedan acceder y utilizar la información en línea. Uno de los aspectos críticos en la accesibilidad web es considerar las limitaciones visuales que afectan a una parte significativa de la población. En este contexto, exploraremos las limitaciones visuales y cómo abordarlas en el diseño y desarrollo de sitios web.

El diseño y desarrollo de sitios web accesibles deben considerar las limitaciones visuales para garantizar que todos los usuarios puedan acceder y disfrutar del contenido en línea. Al adoptar prácticas inclusivas, estamos construyendo un entorno digital más igualitario y accesible para todos.

Las limitaciones visuales abarcan una amplia gama de condiciones que afectan la vista de las personas. Algunas de estas condiciones incluyen:

Ceguera total o parcial: Las personas ciegas no pueden ver en absoluto, mientras que las personas con visión parcial pueden tener una visión limitada. Ambas categorías enfrentan desafíos al interactuar con sitios web.
Baja visión: Las personas con baja visión tienen dificultades para ver detalles finos o para leer texto pequeño. Pueden requerir fuentes más grandes o alto contraste.
Daltonismo: El daltonismo afecta la percepción del color. Algunas personas no pueden distinguir ciertos colores, como el rojo y el verde.
Fotofobia: La fotofobia es la sensibilidad extrema a la luz. Las personas con esta condición pueden encontrar incómodas las páginas web con fondos brillantes o colores intensos.

Pulsa en cada pestaña

Para abordar estas limitaciones visuales, los diseñadores y desarrolladores web deben seguir prácticas específicas:

Contraste adecuado: Utilizar colores de alto contraste para el texto y los elementos visuales. Esto facilita la lectura para personas con baja visión.
Texto alternativo: Proporcionar descripciones significativas en las etiquetas alt de las imágenes. Esto ayuda a las personas ciegas o con visión parcial a comprender el contenido visual.
Fuentes legibles: Elegir fuentes legibles y de tamaño adecuado. Las fuentes demasiado pequeñas dificultan la lectura, especialmente para personas con baja visión.
Diseño adaptable: Utilizar diseños flexibles y responsivos para que los usuarios puedan ajustar el tamaño del texto según sus necesidades.
Marcado semántico: Utilizar HTML semántico para estructurar correctamente el contenido. Esto ayuda a los lectores de pantalla a interpretar la información correctamente.
Evitar información solo visual: No depender exclusivamente de gráficos o imágenes para transmitir información importante. Proporcionar alternativas de texto o contenido textual.

Existen herramientas y tecnologías específicas para mejorar la accesibilidad web:

Lectores de pantalla: Estas aplicaciones leen el contenido de la pantalla para personas ciegas o con baja visión.
Ajustes de navegador: Los navegadores modernos permiten ajustar el tamaño del texto, el contraste y otras configuraciones para adaptarse a las necesidades del usuario.
Validadores de accesibilidad: Herramientas como WAVE o Axe ayudan a identificar problemas de accesibilidad en un sitio web.

El diseño y desarrollo de sitios web accesibles no solo beneficia a las personas con limitaciones visuales, sino también a otros grupos:

Personas mayores: Un diseño claro y legible es útil para personas mayores que pueden enfrentar dificultades visuales relacionadas con la edad.
Niños: Los niños también se benefician de un diseño accesible y fácil de entender.
Personas que hablan diferentes idiomas: Un diseño comprensible trasciende las barreras. lingüísticas.

6.5 Limitaciones auditivas

El diseño y desarrollo de sitios web accesibles es una responsabilidad crucial para garantizar que todas las personas, independientemente de sus capacidades o limitaciones, puedan acceder y utilizar la información en línea. En este contexto, es fundamental considerar las limitaciones auditivas y cómo abordarlas en el diseño y desarrollo de sitios web.

El diseño y desarrollo de sitios web accesibles deben considerar las limitaciones auditivas para garantizar que todos los usuarios puedan acceder y comprender la información en línea. Al adoptar prácticas inclusivas, estamos construyendo un entorno digital más igualitario y amigable para todos. Siempre debemos recordar que la accesibilidad no es solo una obligación legal, sino también una oportunidad para crear experiencias enriquecedoras para todos los usuarios

Las limitaciones auditivas afectan a una parte significativa de la población y pueden variar en gravedad. Algunas de estas condiciones incluyen:

Sordera total: Las personas sordas no pueden oír en absoluto. Para ellos, el contenido visual y textual es esencial para comprender la información en línea.
Pérdida auditiva parcial: Las personas con pérdida auditiva parcial pueden tener dificultades para escuchar sonidos suaves o distinguir palabras en entornos ruidosos. Esto afecta su experiencia al navegar por sitios web.
Tinnitus: El tinnitus es una afección en la que las personas experimentan zumbidos o pitidos constantes en los oídos. Puede dificultar la concentración al leer o interactuar con contenido en línea.

Pulsa en cada pestaña

Para abordar estas limitaciones auditivas, los diseñadores y desarrolladores web deben seguir prácticas específicas:

Transcripciones y subtítulos: Proporcionar transcripciones completas para videos y contenido de audio. Además, agregar subtítulos a los videos es esencial para que las personas con pérdida auditiva puedan seguir el contenido.
Indicadores visuales: Utilizar indicadores visuales (como iconos o animaciones) para alertar sobre eventos importantes, como notificaciones o errores. Esto beneficia a las personas sordas o con pérdida auditiva.
Control de volumen: Proporcionar controles de volumen claros y fáciles de usar para los elementos de audio. Esto permite a los usuarios ajustar el nivel de sonido según sus necesidades.
Diseño de interfaz claro: Evitar diseños confusos o sobrecargados que dificulten la navegación. Una interfaz limpia y bien organizada beneficia a todos los usuarios, incluidos aquellos con limitaciones auditivas.
Compatibilidad con dispositivos de asistencia: Asegurarse de que el sitio web sea compatible con dispositivos de asistencia, como audífonos o implantes cocleares. Esto implica seguir estándares de codificación y etiquetado adecuados.

Existen herramientas específicas para mejorar la accesibilidad auditiva en sitios web:

Lectores de pantalla con soporte para subtítulos: Estos lectores permiten a las personas sordas o con pérdida auditiva acceder al contenido de audio junto con los subtítulos.
Amplificadores de sonido: Algunos usuarios pueden beneficiarse de amplificadores de sonido integrados en el sitio web para aumentar el volumen.
Compatibilidad con bucles de inducción magnética: Los bucles de inducción magnética son sistemas que transmiten el sonido directamente a los audífonos o implantes cocleares. Asegurarse de que los sitios web sean compatibles con esta tecnología es importante.

El diseño y desarrollo de sitios web accesibles para personas con limitaciones auditivas no solo beneficia a este grupo específico, sino también a otros:

Personas mayores: Un diseño claro y sencillo es útil para personas mayores que pueden enfrentar dificultades auditivas relacionadas con la edad.
Personas con lesiones temporales: Cualquier persona que se recupere de una lesión o cirugía puede necesitar adaptaciones temporales para acceder a la tecnología.
Mejora de la experiencia general: Un diseño inclusivo mejora la experiencia para todos los usuarios, independientemente de sus habilidades auditivas.

6.6 Limitaciones cognitivas

El diseño y desarrollo de sitios web accesibles es una responsabilidad crucial para garantizar que todas las personas, independientemente de sus capacidades o limitaciones, puedan acceder y utilizar la información en línea. En este contexto, es fundamental considerar las limitaciones cognitivas y cómo abordarlas en el diseño y desarrollo de sitios web.

El diseño y desarrollo de sitios web accesibles deben considerar las limitaciones cognitivas para garantizar que todos los usuarios puedan acceder y comprender la información en línea. Al adoptar prácticas inclusivas, estamos construyendo un entorno digital más igualitario y fácil de entender para todos.

Las limitaciones cognitivas afectan a una parte significativa de la población y pueden variar en gravedad. Estas condiciones abarcan dificultades en las funciones cognitivas, tanto a corto como a largo plazo, y pueden ser permanentes. Algunos ejemplos de limitaciones cognitivas incluyen:

Discapacidad intelectual: Las personas con discapacidad intelectual pueden tener dificultades para comprender, aprender y procesar información. Esto afecta su capacidad para interactuar con sitios web de manera efectiva.
Trastornos del espectro autista (TEA): Las personas con TEA pueden experimentar dificultades en la comunicación, la interacción social y la adaptación a cambios. El diseño web debe considerar estas necesidades específicas.
Dificultades de aprendizaje: Algunas personas tienen dificultades para leer, escribir o procesar información matemática. El diseño web debe ser inclusivo y comprensible para todos.

Pulsa en la imagen

6.7 Limitaciones motrices

El diseño y desarrollo de sitios web accesibles es una responsabilidad crucial para garantizar que todas las personas, independientemente de sus capacidades o limitaciones, puedan acceder y utilizar la información en línea. En este contexto, es fundamental considerar las limitaciones motrices y cómo abordarlas en el diseño y desarrollo de sitios web.

El diseño y desarrollo de sitios web accesibles deben considerar las limitaciones motrices para garantizar que todos los usuarios puedan acceder y utilizar la información en línea. Al adoptar prácticas inclusivas, estamos construyendo un entorno digital más igualitario y amigable para todos.

Las limitaciones motrices afectan a una parte significativa de la población y se refieren a los trastornos que afectan las habilidades motoras. Estas condiciones pueden ser temporales o permanentes y pueden variar en gravedad. Algunos ejemplos de limitaciones motrices incluyen:

· Discapacidad motora: Se refiere a los trastornos que afectan a la totalidad o parte de las habilidades motoras. Esto puede incluir dificultades para moverse, coordinar movimientos o realizar tareas cotidianas. En España, alrededor de 1.296.900 personas sufren de alguna forma de discapacidad motora.

· Dificultades para usar extremidades superiores o inferiores: Algunas personas pueden tener limitaciones en las manos, brazos, piernas o pies, lo que afecta su capacidad para interactuar con dispositivos y navegación en línea.

· Parálisis: Las personas con parálisis pueden tener movilidad limitada o nula en ciertas partes del cuerpo. Esto puede requerir adaptaciones específicas para acceder a la tecnología digital.

Pulsa en la imagen

7 Extensiones de navegador que ayudan a evaluar accesibilidad web y crear webs accesibles

Pulsa en cada pestaña

NoCoffee Vision Simulator: una herramienta valiosa para comprender las dificultades visuales en la experiencia digital.

El diseño y desarrollo de sitios web accesibles es fundamental para garantizar que todas las personas, independientemente de sus capacidades o limitaciones, puedan acceder y utilizar la información en línea. Una parte importante de esta accesibilidad se relaciona con las limitaciones visuales que enfrentan algunos usuarios. Para comprender mejor estas dificultades y diseñar interfaces más inclusivas, existe una herramienta llamada NoCoffee Vision Simulator.

NoCoffee Vision Simulator es una extensión gratuita para el navegador Google Chrome. Su objetivo es simular diferentes problemas visuales para que los diseñadores y desarrolladores puedan experimentar cómo los usuarios con discapacidades visuales perciben las interfaces digitales. Aunque no es un instrumento científico, proporciona una idea aproximada de los desafíos que enfrentan las personas con discapacidades visuales al usar sitios web.

Pulsa en la imagen

WAVE - Web Accessibility Evaluation, es una extensión gratuita para navegador web. Es específica para la evaluación de la accesibilidad de un sitio web.

Entre las cosas que permite podemos destacar las siguientes:

Realiza un análisis automático completo de la página, indicando los errores encontrados, localizándolos visualmente en la web y mostrando el criterio por el que fallan.
Señala características, estructura…
Dispone de una pestaña para visualizar los contrastes de color entre los diferentes elementos de la web.

Instalar la extensión para el navegador web: Chrome / Firefox.

Una vez que instalada, se accede a ella a través de un botón de la zona de extensiones del navegador.

Pulsa en la imagen

HeadingsMap es una extensión gratuita para el navegador web. Es específica para mostrar la estructura de la página (encabezados).

Permite:

Visualizar un listado de los encabezados de la página y su nivel.
Muestra los anidamientos entre encabezados.
Alerta de los casos en que no hay encabezados o se produce un salto incorrecto entre ellos.
Resalta el encabezado seleccionado para poder localizarlo fácilmente en la página.

Instalar la extensión para el navegador web: Chrome / Firefox.

Una vez que instalada, se accede a ella a través de un botón de la zona de extensiones del navegador.

Pulsa en la imagen

Web Developer Toolbar es una extensión gratuita para el navegador web. Tiene múltiples opciones, no solo está orientada a la accesibilidad web. Es muy sencilla de utilizar.

Entre todas las cosas que permite, podemos destacar las siguientes:

Resaltar visualmente ciertos elementos en pantalla.
Mostrar ciertos elementos o atributos.
Ocultar determinados elementos.
Obtener información de la estructura de la página.

Instala la extensión para el navegador web: Chrome / Firefox / Opera.

Una vez que instalada, puedes acceder a ella a través de un botón de la zona de extensiones del navegador.

Pulsa en la imagen

WCAG - Color contrast checker es una extensión gratuita del navegador web. Es específica para comprobar contrastes de colores de primer plano y fondo únicamente de los contenidos textuales. Utiliza el algoritmo definido en las WCAG 2.1.

Permite:

Obtener los colores de los contenidos textuales de manera automática de la página y muestra todas las combinaciones de color existentes, junto con el tamaño del texto asociado y una indicación de si pasa o no la ratio de contraste mínimo (resultado de analizar las hojas de estilos CSS de la página).
Seleccionar una combinación de color (en la pestaña de “Visible elements”), resaltando en la página los elementos que estén utilizando esa combinación de color, facilitando en las comprobaciones.

Instala la extensión para el navegador web: Chrome / Firefox.

Una vez instalada, puedes acceder a ella a través de un botón de la zona de extensiones del navegador.

Pulsa en la imagen

Bookmarklet "Text spacing" de Steve Faulkner es una extensión gratuita del navegador web. Es específica para comprobar el espaciado del texto.

Permite:

Cambiar la apariencia de cualquier página para adaptarla a las especificaciones mínimas del criterio 1.4.12.

Entra en la página de Bookmarklet "Text spacing" de Steve Faulkner.

Para instalar esta extensión es necesario que compruebes si tienes configurado el navegador para mostrar la barra de marcadores, y sino hacerla visible:

En Chrome se hace desde el menú -> marcadores -> mostrar barra de marcadores, o con la combinación de teclas Ctrl+Mayúsculas+B.

En Firefox se hace haciendo clic con el botón derecho del ratón en la barra superior del navegador y seleccionando la opción "Barra de herramienta de marcadores"

Vuelve a la página de Bookmarklet "Text spacing", pulsa sobre el enlace “Text Spacing” (en la línea que comienza con “Bookmarklet…”) y sin soltarlo arrástralo hasta la barra de marcadores. De este modo se quedará instalado como marcador.

Pulsa en la imagen

La herramienta de inspección de código del navegador se encuentra integrada en cualquier navegador. Deberás utilizarla cuando con el resto de las herramientas no puedas obtener la información deseada.

Permite:

Ver el código HTML de algún elemento de la web.

Pulsa en la imagen

Referencias

Apoyo a la edición web Universidad Complutense de Madrid. (s.f.). Universidad Complutense de Madrid. Retrieved 28 de abril de 2022, from Universidad Complutense de Madrid: https://biblioteca.ucm.es/edicionweb/contraste-y-color

Ayuda de Adobe. (s.f.). Retrieved 28 de abril de 2022, from Crear y verificar la accesibilidad de archivos PDF (Acrobat Pro): https://helpx.adobe.com/es/acrobat/using/create-verify-pdf-accessibility.html

Canva. (2020). Canva.com. Tipografías y fuentes no son lo mismo - conoce las diferencias: https://www.canva.com/es_mx/aprende/tipografia-fuente-no-son-lo-mismo/

Contrast Checker. (s.f.). Contrast Checker. Retrieved 28 de abril de 2022, from Contrast Checker: https://contrastchecker.com/

Delgado, J. M. (28 de Julio de 2024). Computer hoy. Qué es Copilot, la IA de Microsoft, y todo lo que puedes hacer con ella: https://computerhoy.com/windows/copilot-ia-microsoft-todo-puedes-hacer-ella-1388086

esvial. (s.f.). Retrieved 28 de abril de 2022, from Red de Cooperación y Observatorio de Accesibilidad en la Educación y Sociedad Virtual: http://www.esvial.org/?

Gobierno de España. (s.f.). Portal de la Administración Electrónica. Retrieved 28 de abril de 2022, from https://administracionelectronica.gob.es/pae_Home/en/pae_Estrategias/pae_Accesibilidad.html

Instituto de Administración Pública (INAP). (1 de Agosto de 2024). Espacio compartir. Elaboración de informes de revisión de la accesibilidad de sitios web: https://espaciocompartir.inap.es/v3/course/view.php?id=52

Martinez, W. P. (2021). Curso avanzado de Excel paso a paso. Amazon Digital Services LLC .

Martínez, W. P. (2021). Curso Avanzado de Word Paso a Paso. Amazon Digital Services LLC.

Martínez, W. P. (2022). Creación de documentos accesibles. Independently published (Amazon).

Martínez, W. P. (1 de Agosto de 2024). WordExperto. WordExperto.com: https://wordexperto.com/blog/

Martínez, W. P. (1 de Agosto de 2024). YouTube. WordExperto: https://www.youtube.com/channel/UCxgRcbeR2q4PpE1Pgft74Iw

Microsoft. (s.f.). Centro de accesibilidad de Office. Retrieved 28 de abril de 2022, from Centro de accesibilidad de Office: https://support.microsoft.com/es-es/office/centro-de-accesibilidad-de-office-ecab0fcf-d143-4fe8-a2ff-6cd596bddc6d

Microsoft corporation. (1 de Agosto de 2024). Herramientas de escritura basadas en IA y asistentes de escritura | Microsoft 365. Herramientas de escritura basadas en IA y asistentes de escritura | Microsoft 365: https://www.microsoft.com/es-es/microsoft-365/word/ai-writing

olgacarreras.blogspot.com. (s.f.). Retrieved 28 de abril de 2022, from CheatSheet Etiquetas Estándar en PDF accesibles: https://www.usableyaccesible.com/archivos/AA_Cheatsheet_Etiquetas_Estandar_PDF_accesible.pdf

Sandoval, A. (3 de Abril de 2018). Achinet. http://achinet.mvp-access.es/: http://achinet.mvp-access.es/

Section508. (s.f.). Retrieved 28 de abril de 2022, from Create Accessible Digital Products: https://www.section508.gov/create/

Unidad de Accesibilidad Digital de la Universidad de Alicante. (s.f.). Universidad de Alicante. Retrieved 28 de abril de 2022, from Universidad de Alicante: https://web.ua.es/es/accesibilidad/documentos-electronicos-accesibles.html

Universidad de Lérida. (s.f.). Repositorio digital Universidad Lérida. Retrieved 28 de abril de 2022, from Guía de reparación de documentos PDF: https://repositori.udl.cat/bitstream/handle/10459.1/10944/9._Guia_de_reparacio_de_documents_PDF_es.pdf?sequence=11&isAllowed=y

Universidad Politécnica de Valencia. (2020). Dicatic. guia básica de accesibilidad web: https://dicatic.com/dicatic-publica-tres-guias-basicas-de-accesibilidad-web-documentos-accesibles-y-contenido-accesible-en-redes-sociales/

web, T. (s.f.). Tothom web. Retrieved 28 de abril de 2022, from Tothom web: https://tothomweb.com/es/blog/como-hacer-accesibles-los-contenidos-las-redes-sociales

Objetivos y contenido

Pulsa en cada pestaña

1 Análisis de accesibilidad de contenidos digitales

Destacado

Análisis de accesibilidad

Introducción

¿Cuándo realizar una revisión de accesibilidad?

¿Quién debe realizar una revisión de accesibilidad?

¿Cómo realizar una revisión de accesibilidad?

2 Accesibilidad en información textual

Destacado

Pulsa en cada pestaña

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Fuentes accesibles

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

Pulsa en la imagen

3 Accesibilidad en el diseño de imágenes

3.1 Introducción

Destacado

3.2 Herramientas y Prácticas para la Accesibilidad en el Diseño de Imágenes

3.3 Esquemas de color

Pulsa en cada pestaña

Introducción

Esquemas de color accesibles

Importancia de los esquemas de color accesibles

Creación de esquemas de color accesibles

Herramientas para crear esquemas de color accesibles

3.4 Cómo insertar imágenes

Insertar imágenesVideo-cb69260cb655

3.5 Textos alternativos y descripciones

Pulsa en la imagen

4 Accesibilidad en audio

4.1 Introducción

Recuerda

4.2 Criterios de accesibilidad generales para contenidos multimedia

Pulsa en cada pestaña

Criterios

Formatos

4.3 Elementos multimedia

4.4 Destellos y parpadeos

4.5 Audio estéreo o mono

Pulsa en cada pestaña

Audio Estéreo

Audio Mono

Elección y Contexto

4.6 Ajuste del Balance de Audio

Pulsa en la imagen

Pulsa en la imagen

4.7 Elementos de audio

Pulsa en cada pestaña

¿Qué requisitos de accesibilidad debe tener un audio?

Alternativas para audio pregrabado

recomendaciones adicionales para elementos de audio

5 Accesibilidad en vídeo

5.1 Introducción

Saber más

Destacado

5.2 Transcripción textual

Pulsa en la imagen

Pulsa en la imagen

5.3 Subtítulos

5.4 Descripciones auditivas

5.5 Alternativas para vídeo en directo

6 Diseño y desarrollo de sitios web accesibles

6.1 Introducción

Pulsa en cada pestaña

Principios

Criterios