Semana de la Accesibilidad Digital 2022 en la Universidad de Alicante
Con motivo de la Semana de la Accesibilidad Digital en la UA 2022, durante la semana del 16 al 20 de mayo, la UA (Universidad de Alicante) impartió 5 sesiones formativas online (workshops), donde diferentes expertos en accesibilidad digital trataron diversos temas de interés, desde la accesibilidad de los sitios web y de los documentos digitales, hasta la accesibilidad en los contenidos audiovisuales o los videojuegos, con un enfoque practico.
Enlaces a los vídeos de los talleres en YouTube:
Más información en la web del evento: https://web.ua.es/es/accesibilidad/actividades/2022/semana-de-la-accesibilidad-digital-en-la-ua-2022.html
Comentarios de MNCS sobre las charlas
 Los comentarios de MNCS sobre cada charla son solo las notas tomadas durante la asistencia a las mismas y pueden estar incompletos o contener errores, en cuyo caso contacta con MNCS.
Recomendamos la visualización de los vídeos de estas charlas como un complemento formativo sobre Accesibilidad Digital, pero la documentación de MNCS sobre Accesibilidad está en "MNCS - Accesibilidad". |
Charla 1 - Inauguración y presentación de la Unidad de Accesibilidad Digital de la UA
Puedes ver el vídeo en el siguiente enlace: https://youtu.be/cE0a_yFdevg
Unidad de Accesibilidad Digital https://web.ua.es/es/accesibilidad/
Herramienta CAD:UA de comprobación de accesibilidad que genera informe en lenguaje comprensible por el usuario. Es la que usado para llegar al 100% de accesibilidad AA en la web de la UA.
Declaración de accesibilidad de la Web de la UA https://web.ua.es/es/accesibilidad/declaracion-de-accesibilidad.html. Interesante el apartado con Contenido Opcional https://web.ua.es/es/accesibilidad/declaracion-de-accesibilidad.html#contenido-opcional , como Atajos de Teclado, y también cómo aumentar el Tamaño del Texto en los diferentes navegadores web.
Aplicaciones accesibles para móvil https://web.ua.es/es/accesibilidad/tecnologias-accesibles/apps-accesibles.html
Charla 2 - Películas, series y videojuegos accesibles
Puedes ver el vídeo en el siguiente enlace: https://youtu.be/48f0spwEPgU
¿Te has planteado cómo disfrutan del cine o cómo juegan a un videojuego las personas con déficit auditivo o de visión? ¿Sabes que existen leyes que garantizan el derecho a la accesibilidad universal a la comunicación audiovisual?
Charla MUY INTERESANTE sobre las limitaciones funcionales en el acceso a contenidos audiovisuales (vídeos, pelis, juegos, etc)
- Limitaciones habituales como ser zurdo y NO poder manejar un joystick.
- Emisión de un corto final de apenas 10 minutos, muy emotivo, donde una persona ciega llega a su casa y le van hablando al oido actores de doblaje muy famosos que ponen voz a sus pelis favoritas, desde su infancia hasta la actualidad ... el vídeo, accesible, incluye subtítulos, como es obvio, pero también un audio adicional que va explicando lo que ocurre, de modo que pueda "verlo" una persona ciega. El vídeo incluye:
- Audio contextual que explica lo que se VE.
- Subtítulos de todo
Charla 3 (recomendada) - Revisión de accesibilidad de una página web
Puedes ver el vídeo en el siguiente enlace: https://youtu.be/HOlpH3fsJMA
- Olga Carreras revisa la web de https://omwater.me para hacer una demo online de lo que serían los puntos más importantes de una revisión, pues tiene menos de 1h.
- La "chicha" del vídeo empieza en el segundo 564 https://www.youtube.com/watch?v=HOlpH3fsJMA&t=564s
- Colores
- Contraste de color
- Color Contrast Analyzer (versión antigua en EXE tiene mejor precisión del cuentagotas)
- OJO con el cuentagotas y recoger el color correcto
- Mejor ver qué código de color se está usando y pegarlo
- Adecuación AA del contraste de color
- texto pequeño (>=18 puntos): contraste 4,5
- texto grande (<18 puntos): contraste 3
- OJO con el color de fondo, que puede cambiar cuando se coge el foco, etc, hay que medir todas las combinaciones que se usen en la página
- OJO con las imágenes que sean relevantes:
- http://colorsafe.co/
- Herramienta web para encontrar paletas de color accesibles, pues mide el contraste de color entre texto y fondo, teniendo en cuenta los colores elegidos, y tb el tamaño del texto, el grosor del trazo del mismo, y el nivel de adecuación (AA, AAA)
- NO transmitir información SOLO por el COLOR, añadir texturas (rayas, círculos, cuadrados, etc)
- Sobre todo
- Gráficas
- Barras o sectores que NO se diferencien solo por el color, añadiendo texturas (rayas, puntos, etc) que los diferencien si no puedes distinguir los colores
- Mapas
- Calendarios
- Ej: días libres/ocupados, NO solo por el color
- Enlaces
- Mejor que estén subrayados, sobre todo cuando están entre el texto, de modo que NO solo se diferencien por el color
- Elementos de interacción tamaño > 44 x 44 pixeles (iconos, y sobre todo su área de interacción)
- Un dedo índice son 52 pixeles de ancho
- NO usar fuentes con remate (serif) (AAA)
- Recomendables Tahoma o Verdana, que se ven mejora en tamaños pequeños (los remates de las serif emborronan la fuente en tamaños pequeños)
- Separación de los párrafos mayor que el del interlineado (AAA)
- Evitar usar negrita, itálica y/o MAYÚSCULA para resaltar párrafos enteros, pues NO se resalta nada.
- Usar tamaños de texto en % relativos (EM) y NO en PX (píxeles)
- Se deben respetar las preferencias del usuario en el navegador
- Es bueno poner "botones" con "A+" y "A-" para ampliar/reducir el tamaño del texto
- Al hacer Zoom NO se puede perder funcionalidad
- Imágenes
- Poner el texto alternativo en el ALT, que se lee siempre por un lector de pantalla, y NO en el TITLE (a veces no se lee).
- Descripción de la imagen <= 150 caracteres ... si se necesita una descripción más extensa, p.e, la descripción de un esquema ... es bueno añadir un enlace al pie de la imagen indicando que lleva a la descripción extensa de la imagen
- Vídeos
- NO poner destellos
- Tiene que haber alternativa textual para vídeo y audio
- NO es obligatorio poner alternativa textual en vídeos/audios en DIRECTO.
- Adecuación A: añadir enlace con la transcripción textual
- Adecuación AA: añadir audio descripción que explica qué ocurre en el vídeo
- Reproductores HTML5 de vídeo gratuitos que permiten añadir opciones de accesibilidad, como Able Player
- Foco al tabular entre opciones de la página
- Atributo "outline" que NO debe ser cero
- Elementos que NO cogen el foco (hay que poner "tabindex = 0" para que coja el foco)
- Imagen
- y otros elementos que por defecto no cogen el foco (si quieres que lo coja)
- Si se abre una ventana modal, debe coger el foco en dicha ventana, y NO mantenerlo por debajo.
- Formularios
- Campos deben tener una etiqueta visible, pero NO dentro del campo, debe estar antes del campo, de modo que se vea siempre e informe sobre qué dato debe contener dicho campo.
- La etiqueta podría estar dentro del campo, si al editarlo/salir se sigue viendo y no se pierde
- Errores al rellenar campos: debe marcar el campo que tiene error e informar claramente sobre qué error es, y cómo resolverlo
- Resumen de revisión real sobre web de OmWater https://omwater.me/ )
- Revisar paleta de colores
- Subrayar enlaces
- Revisar el tamaño de los elementos de interacción 44 x 44
- Revisar texto alternativo de las imágenes
- Revisar tecla TAB para asegurar que todos los elementos que deben coger el foco
- etc
Charla 4 (recomendada) - Cómo crear documentos digitales accesibles
Puedes ver el vídeo en el siguiente enlace: https://youtu.be/Pjtl_Zq1OwY
- Limitaciones funcionales
- Si no puedo ver, uso lector de pantalla
- Si mi visión es limitada, uso magnificador de pantalla
- Si no puedo oír bien, leo los subtítulos
- Si no puedo usar las manos, uso un asistente de voz para dictar mis órdenes
- Si tengo problemas de comprensión (dislexia, daltonismo, etc), puedo configurar el texto, colores, etc
- Personas afectadas
- Dislexia 10% de la población
- 9 millones de personas mayores
- Todos en algún momento: limitaciones en espacios públicos ruidosos, silenciosos, con mucha/poca luz, etc, de modo que en algún momento no podemos ver, oír, usar las manos, etc
- Formato accesible de documentos:
- Definir un índice para darle estructura
- Lenguaje sencillo
- Tamaño fuente >= 12
- Si no se va a imprimir >= 14
- Tipo fuente Sans Serif (sin remate), como Arial, Verdana, etc
- NO abusar de texto en MAYÚSCULAS, pues cuesta más su lectura, al nos ser la forma normal que usamos.
- Justificar el texto a la izquierda, y NO a ambos lados, pues genera espacios en blanco que al ampliar la pantalla separa aún más las palabras y dificulta la lectura (se llaman "rios en blanco", que se deben evitar)
- Resumen de formato en Word, por ejemplo:
- Tipo de fuente: Arial o Verdana
- Tamaño >= 12
- Justificado a la izquierda
- Interlineado >= 1,5 líneas
- Espaciado entre párrafos = 6 puntos arriba/abajo entre párrafos
- No dividir palabras
- Idioma del documento: por defecto es "Predeterminado" y se ve abajo, en la barra de estado, pero hay que marcar las palabras en otros idiomas e indicar su idioma:
- Seleccionar la palabra y en la barra de estado, marcar el idioma correcto de la palabra
- Estructura mediante títulos, subtítulos, etc; y NO con tamaños grandes de texto, que un lector de pantalla NO interpreta semánticamente. Hay que usar título1, título2, etc
- La estructura permite ver el panel de navegación, entender el índice del documento e ir directamente a un apartado concreto
- Listas: hay que crearlas con la herramienta del editor (listas no numeradas y numeradas) y NO simularlas
- Imágenes y elementos No textuales
- Incluir descripción textual
- ¿Qué es?
- ¿Propósito?
- ¿Qué transmite?
- Imágenes: Marcar la imagen como decorativa solo si realmente es un elemento de diseño
- Añadir Texto Alternativo que explique todo lo anterior
- Añadir Título que aparezca debajo de la imagen
- Tablas
- NO usar celdas combinadas
- Poner título
- Esquemas: explicarlos con detalle
Charla 5 - Pautas para diseñar presentaciones PowerPoint accesibles
Puedes ver el vídeo en el siguiente enlace: https://youtu.be/5K0mGrpVMac
(Sin comentarios)
).