Accesibilidad para Libromedia Diseño y maquetación Junio 2024 Intro Intro La Ley Europea de Accesibilidad (EAA) es un marco normativo que establece requisitos mínimos para la accesibilidad de productos y servicios digitales en la Unión Europea. El alcance de la Ley de Accesibilidad se centra principalmente en productos y servicios digitales, incluidos sitios web, plataformas, paquetes de contenido digital o libros electrónicos. Esto implica que también los editores educativos que operan en los mercados europeos deberán adaptar sus productos digitales y paquetes de contenido electrónico existentes para cumplir con los requisitos de accesibilidad descritos en la Ley. WCAG. Pautas de accesibilidad al contenido web WCAG Las Pautas de Accesibilidad de Contenido Web (WCAG) son un conjunto de recomendaciones internacionales para hacer que los contenidos digitales sean accesibles. WCAG 2.2 es el último conjunto de pautas publicadas en octubre de 2023. Esta recomendación proporcionará criterios de éxito adicionales, cuya implementación aún se concentra en mejorar la accesibilidad para usuarios con diversas discapacidades. Nos tenemos que asegurar de que nuestros productos digitales cumplan los siguientes principios de accesibilidad : • Perceptibilidad : Los contenidos deben ser presentados de manera clara y fácilmente perceptible. Utiliza colores contrastantes y fuentes legibles. • Operabilidad : La interfaz debe ser fácil de usar y navegar. Proporciona atajos de teclado, etiquetas descriptivas y opciones de personalización. • Comprensibilidad : Explica claramente las funciones y características del libro digital. Proporciona instrucciones claras y sencillas. • Robustez : Asegúrate de que la interfaz sea compatible con diferentes dispositivos y tecnologías de asistencia. Objetivos Objetivos El objetivo principal de esta iniciativa es crear libros de texto digitales que sean asequibles y accesibles en todos los contextos educativos. Crear libros digitales accesibles según la nueva normativa europea de accesibilidad es fundamental para garantizar que todas las personas puedan acceder al contenido de manera igualitaria. Para ello, debemos de identificar las necesidades de accesibilidad en nuestro producto digital Libromedia y ver que pautas debemos de seguir para que cumpla con los requisitos de accesibilidad. Pautas para lograr un material digital accesible Pautas para lograr un material digital accesible Los libros de texto digitales accesibles se crean siguiendo los principios del Diseño Universal para el Aprendizaje (DUA) . Esto significa que se incorporan funcionalidades específicas en los formatos digitales para garantizar que sean accesibles para diferentes tipos de estudiantes. Para cumplir con los criterios de accesibilidad, nuestro material educativo digital debe cumplir los siguientes requisitos: 1. Elementos clave: • Formato : Utilizar formatos accesibles, que admiten características como texto reflow, ajuste de fuente y navegación por capítulos. • Contraste : Utilizar colores de fondo y texto con alto contraste para facilitar la lectura. • Texto : Usar fuentes legibles y ajustables, tamaños adecuados y contraste suficiente entre el texto y el fondo. Tenemos que asegurarnos de que las fuentes sean legibles y ajustables. • Hipervínculos : Nos tenemos que asegurar de que los enlaces sean descriptivos y se puedan activar fácilmente. • Tablas y Gráficos : Etiquetar correctamente las tablas y gráficos para que sean comprensibles para todos los lectores. Hay que utilizar símbolos y gráficos de manera efectiva. 2. Navegación clara: • Estructurar el contenido de manera ordenada y fácil de comprender. Organizar el contenido en secciones lógicas con encabezados claros. • Proporcionar una navegación sencilla con menús desplegables o índices. • Asegurarnos de que los elementos interactivos (botones, enlaces, formularios) sean accesibles mediante atajos de teclado y etiquetas descriptivas claras. • Asegurarnos de que la interfaz funciona con lectores de pantalla y otros dispositivos de asistencia. • Permitir la interacción con la web mediante diferentes métodos, como voz, ratón, teclado u otros sistemas. 3. Alternativas multimedia: • Proporcionar descripción de imágenes para todas las imágenes y elementos gráficos. Esto ayuda a las personas con discapacidad visual a comprender el contenido. • Incluir subtítulos y transcripciones para vídeos y contenido multimedia. Esto ayuda a las personas con discapacidad auditiva. • Ajustes de audio . Debería de ser posible controlar la reproducción de audio mediante teclado. 4. Documentos y Objetos digitales: • Si incluimos documentos Word o PDF, nos tendremos que asegurar de que sean accesibles. Existen herramientas como UserWay para verificar la accesibilidad. • En los objetos digitales , utilizaremos un contraste adecuado entre el texto y el fondo, y tendremos que evitar el uso excesivo de animaciones. • Para personas con discapacidad intelectual o de aprendizaje, hay que diseñar actividades interactivas y adaptar los materiales para que sean comprensibles y útiles para todos. 5. Pruebas con usuarios: • Realizar pruebas de usabilidad con estudiantes de diferentes habilidades y discapacidades. • Ajustar el diseño según los comentarios y las necesidades identificadas. Herramientas y plugins Herramientas y plugins Existen muchas herramientas y plugins que nos ayudan a simular diferentes perfiles de accesibilidad. Vamos a ver una selección de ellos que pueden ser interesantes: 1. Herramientas de simuladores de daltonismo • Color Oracle . Color Oracle es un simulador daltónico gratuito que funciona para Windows, Mac y Linux. • Sim Daltonism . Sim Daltonism es una herramienta para simular diferentes tipos de daltonismo. Esta herramienta dispone de una ventana en la parte superior de la pantalla por la que puedes moverte. • Toptal. Esta es una herramienta que le permite probar su sitio web y le muestra cómo verán su página las personas con diferente daltonismo. 2. Comprobación de contraste de color • Colour Contrast Analyser . Esta herramienta te permite seleccionar un color con el selector de color y comprobar la relación de contraste. • Odd Contrast . Con esta herramienta podemos comprobar que el color de fondo y texto tengan un contraste óptimo. • Color contrast, Figma contrast, Stark’s color contrast tool. Son tres plugins de contraste de color de Figma. Con estos complementos podemos: • Comprobar el contraste de las 2 capas que estoy seleccionando (porque a veces el fondo no está en el mismo grupo) • Verificar el contraste normal, con texto grande y sin texto (la regla 3:1) • Ofrecer sugerencias y/o dejarme modificar directamente los colores desde la herramienta para encontrar el contraste perfecto • Color review . Esta herramienta te permite comprobar la relación de contraste entre dos colores. Le muestra una vista previa de cómo se vería la combinación de colores. El selector de la izquierda te ayuda a encontrar una alternativa si los colores que elegiste no funcionan. • Color y contrast Picker . Éste le permite elegir un color de fondo y de primer plano y le proporciona la relación de contraste. Luego puedes jugar con el selector de colores para encontrar las combinaciones de colores accesibles más cercanas. • Polypane. Esta es otra herramienta que analiza y sugiere colores que cumplen con la relación de contraste requerida. Puede elegir entre AA y AAA y la herramienta le sugerirá otros colores que funcionarán con una relación de contraste suficiente. • Accessible Colors . Esta es otra buena herramienta para verificar el contraste de colores: ingresa 2 colores pero también proporciona el tamaño/peso de fuente y obtendrás 2 alternativas si tu combinación de colores no cumple con AA/AAA. Nuestro producto digital Libromedia Nuestro Libromedia Visto esto, vamos a presentar algunas consideraciones y directrices para nuestro actual Libromedia. Vamos a analizar, en primer lugar, algunas pautas para los PDFs que subimos a nuestro producto digital y van a visualizarse en las pantallas, y por otro lado, el diseño de la interfaz , para que el conjunto de ambos sea accesible. 1. PDFs accesibles Hay que garantizar que el PDF que se sube al Libromedia sea accesible, con las etiquetas correspondientes creadas desde INDD o desde Acrobat. Para crear esto, hay que tener en cuenta los siguientes requisitos: • Es necesario trabajar con una versión InDesign CS6 o posterior. • En InDesign, utiliza estilos de párrafo de forma coherente en todo el documento. Aplica estilos básicos (como títulos principales, secundarios y subtítulos) a los párrafos según su función jerárquica en el documento. • Configuración de PDF . Al exportar el PDF desde Adobe Indesign, hay que pensar en la exportación digital. Al igual que en una página HTML, la estructura semántica de un PDF debe ser perfilada y etiquetada para los lectores de pantalla: esto permitirá aumentar el tamaño de la fuente, elegir otro tipo de letra o ajustar el contraste de colores. • Establece relaciones de etiquetas de exportación entre los estilos de InDesign y las etiquetas de PDF. • Asegúrate de seleccionar la opción “ Crear PDF etiquetado ” al exportar el PDF. • Compresión de PDF : el tamaño del archivo influye en la accesibilidad de un PDF. Un PDF con imágenes de baja resolución muy comprimidas es menos accesible para las personas con dificultades de visión: nuestro PDF debe mostrarse nítidamente con un zoom de hasta el 200%. • Comprobación de accesibilidad . Debemos realizar siempre la Comprobación completa automatizada de Acrobat Pro para accesibilidad. Hay que corregir cualquier problema que se detecte. Herramientas útiles • Adobe. Crear documentos PDF accesibles • Crear y verificar la accesibilidad de archivos PDF (Acrobat Pro) • Adobe Color: herramientas de Accesibilidad 2. Diseño de interfaz En la interfaz del Libromedia, tendríamos que incluir un icono de accesibilidad , donde al pulsarlo, se activen las siguientes herramientas para que el usuario pueda personalizar el producto según sus propias necesidades. Tendremos el botón de accesibilidad siempre visible en la interfaz. Al pulsar sobre el botón nos saldrá un menú con el siguiente contenido: A. CABECERA DEL MENÚ: • Idioma . Selector de idioma, para adaptar el contenido al idioma que el usuario necesite. • Botón Modo accesibilidad (activar / desactivar) • Botón Expandir menú . (más ancho / más estrecho) • Botón para ocultar el botón de accesibilidad . Elija el período de tiempo para ocultar el botón de accesibilidad. B. CONTENIDO DEL MENÚ: Aquí podremos personalizar los diferentes perfiles según las necesidades de cada usuario. Estos ajustes se dividen en tres bloques: 1. Ajustes de voz y navegación 2. Ajustes de color 3. Ajustes de contenido 1. Ajustes de voz y navegación • Adaptación al lector de pantalla . Hacer el sitio compatible para los usuarios de lectores de pantalla. • Navegación con el teclado . Permitir a las usuarios navegar con el teclado, sin usar el mouse. • Navegación inteligente . Permitir a las usuarios navegar por el sitio mediante teclas numéricas. • Bloquear parpadeos . Detener el parpadeo y el destello de elementos en movimiento. • Lector de texto . Leer el texto del sitio en voz alta, en navegadores compatibles. • Comandos de voz . Ejecución de comandos con un micrófono, en navegadores compatibles. 2. Ajustes de color • PANEL COLOR PERSONALIZADO Panel para cambiar el color del sitio según diferentes parámetros (cambio de color, de saturación, blanco y negro). Podemos elegir cambiar el color en fondos, encabezados y contenido, y tendremos un botón con opción de Restablecer colores • MÁS AJUSTES PERSONALIZADOS • Contraste oscuro . Cambia el fondo del sitio a negro, con fuentes brillantes. • Contraste claro . Cambia el fondo del sitio a blanco, con fuentes oscuras. • Baja saturación . Disminuya la intensidad de los colores para contenido menos enfatizado. • Alta saturación . Aumenta la intensidad de los colores para contenido enfatizado. • Modo de contraste . Cambia los colores del sitio a colores de contraste.