Etiqueta: accesibilidad

Escribir matemáticas en la Web de forma accesible con MathML

Publicado el

En muchos contenidos de la Web nos encontramos formulas matemáticas que bien están dibujadas en una imagen o bien se escriben maquetando y estructurando los distintos elementos de una fórmula matemática atendiendo a su posición en el papel y no a su significado matemático. Todo esto provoca multitud de problemas de accesibilidad que dificultan la lectura de contenidos matemáticos en la Web. Para solucionar este problema el W3C definió MathML.
MathML, abreviatura de Mathematical Markup Language, es un lenguaje de marcado basado en XML diseñado específicamente para representar expresiones matemáticas y notaciones en documentos web. MathML fue desarrollado por el W3C (World Wide Web Consortium) y es una parte integral del conjunto de estándares web para facilitar la inclusión de contenido matemático en las páginas web de manera semántica y accesible.

Se pueden encontrar multitud de beneficios al usar MathML en la Web:

  • Consistencia: Proporciona una forma estandarizada de presentar matemáticas en la web, asegurando que las fórmulas se vean de la misma manera en diferentes navegadores y dispositivos.
  • Escalabilidad visual: Las expresiones matemáticas en MathML se escalan correctamente cuando se ajusta el tamaño de texto en el navegador, manteniendo su legibilidad.
  • Accesibilidad: proporciona compatibilidad con los productos de apoyo como lectores de pantalla provocando que las fórmulas matemáticas apliquen reglas de lectura específicas facilitando a las personas ciegas una lectura más comprensible de fórmulas y textos matemáticos.
  • Interacción Mejorada: Permite la creación de contenido interactivo donde las fórmulas pueden ser manipuladas o calculadas dinámicamente, lo que es particularmente útil en plataformas educativas.
  • Compatibilidad con Herramientas de Edición: Muchas herramientas de edición y procesamiento de documentos científicos soportan MathML, lo que facilita la importación y exportación de contenido matemático entre diferentes plataformas.

Implementación y Compatibilidad
La implementación de MathML puede variar entre diferentes navegadores web. Mientras que navegadores como Firefox y Safari ofrecen soporte nativo para MathML, otros como algunas versiones de Chrome, Brave u Opera pueden requerir complementos o bibliotecas adicionales como MathJax para un soporte completo. MathJax es una popular biblioteca JavaScript que ayuda a renderizar MathML (y otras notaciones matemáticas como LaTeX) de manera consistente en todos los navegadores.
Lo habitual es que si el navegador soporta HTML5 en todas sus versiones el contenido en formato MathML se pueda visualizar correctamente aunque haya algunos problemas de estilo CSS.

Ejemplo básico

A continuación veremos un ejemplo básico sobre cómo se ve el código de MathML y cómo lo lee el navegador web. Vamos a realizar una operación matemática básica: calcularemos la suma de 3 y 6 que debe dar un resultado de 9.

El resultado en MathML es:

3+6=9

Y su código en MathML es el siguiente:

<math display="block">
  <mrow>
    <mn>3</mn>
    <mo>+</mo>
    <mn>6</mn>
    <mo>=</mo>
    <mn>9</mn>
  </mrow>
</math>

La gramática de MathML es muy parecida a la que se utiliza en HTML5 por lo que no supone un aprendizaje pesado y los beneficios merecen mucho la pena. En futuros artículos aprenderemos a utilizar MathML con más profundidad.

¿Cómo incluir una firma en un documento PDF utilizando Inteligencia artificial?

Publicado el

La Inteligencia artificial poco a poco se está moldeando en nuevas herramientas de ayuda a personas con necesidades especiales. Una de estas necesidades es la de incluir una imagen con la firma de una persona en un lugar concreto de un documento PDF. Esta operación que puede resultar muy sencilla para la mayoría de personas es algo muy complicado para personas con discapacidad visual o con discapacidad motriz.

Las herramientas de Inteligencia artificial generativas como ChatGPT o Gemini pueden ayudarnos a realizar estas operaciones.

Un posible ejemplo

Imaginemos que tenemos un documento prueba.pdf con el siguiente texto:

Documento de prueba
Esto es un documento de prueba para probar la función de introducir una firma utilizando AI.

Para ello creamos este documento en formato PDF.

Además del texto básico debemos incluir alguna estructura de información que permita identificar dónde incluir la firma.

Por ejemplo, dejando un hueco suficiente.

Firmado:

 

 

 

 

En España el 1 de agosto de 2024

 

 

 

 

Además tenemos un fichero firma.jpg que contiene un dibujo de nuestra firma. Es importante que nuestra firma esté escrita en color negro y el fondo en color blanco.

Utilizando el siguiente prompt en ChatGPT o Gemini podemos conseguir firmar nuestro documento PDF:

En el documento prueba.pdf pega la imagen del fichero firma.jpg

La imagen debe colocarse entre las líneas con el texto «Firmado:» y «En España el 1 de agosto de 2024»
Modifica el tamaño de la imagen pegada para que encaje bien entre las dos líneas de texto. La imagen no debe ocultar las líneas con los textos «Firmado:» y «En España el 1 de agosto de 2024». Para ello reduce la altura de la imagen si es necesario y la imagen debe colocarse entre las dos líneas de texto indicadas

Cuidado con la precisión

Hay que recordar que estas herramientas generativas no son fiables al cien por ciento por lo que es recomendable revisar que el documento pdf no haya sido modificado en su texto y que la firma se haya incluido bien.

Además, hay que señalar que actualmente la mayoría de sistemas que convierten el lenguaje escrito en algo comprensible para los motores de Inteligencia artificial comprenden mejor el idioma inglés por lo que es recomendable que los prompts se escriban en inglés para facilitar la comprensión al motor de inteligencia y evitar ambigüedades.

Nuevas posibilidades para la accesibilidad 

El uso de herramientas de Inteligencia artificial está abriendo nuevos caminos para la accesibilidad para ayudar a personas con necesidades especiales a superar de forma autónoma barreras sociales y técnicas que persisten hoy en día. La Inteligencia artificial es una herramienta más y como tal debemos aprender a utilizarla para hacer un mundo más accesible.

Una cita con ASEPAU el 11 de octubre en Málaga

Publicado el

La Asociación de profesionales de la accesibilidad universal, más conocida como ASEPAU, organiza cada año un evento especial llamado Somos ASEPAU. Es una Jornada Técnica para profesionales de la Accesibilidad, aunque abierta y gratuita para todo el mundo.
Este año 2024 el lema del evento será La Tecnología como herramienta de mejora de la Accesibilidad del Entorno Construido.

En el evento participarán más de una docena de ponentes de primera línea sobre este tema, mesas redondas de debate, actividades prácticas… El evento es una oportunidad excepcional para implementar relaciones profesionales en el mundo de la Accesibilidad.
El evento tendrá lugar en Málaga el 11 de octubre.

Avance de programa

  • (9:30h) Registro y Bienvenida.
  • Mesa y Ponencia inaugural
  • Panel 1: Domótica y Accesibilidad
  • Panel 2: Inmótica y Accesibilidad
  • Panel 3: Urbótica y Accesibilidad
  • Comida
  • Actividad de Tarde
  • Fin de la Jornada (18:00h)

Uso de hints en las interfaces de usuario

Publicado el

Al diseñar una interfaz de usuario la mahyor parte del peso de comunicación entre la interfaz y el usuario es a través del canal visual. Mediante un vistazo a una pantalla se puede intuir cómo utilizar ciertos elementos de la interfaz. Pero como no todas las personas tienen la misma capacidad de intuición ni la misma posibilidad de echar un vistazo a la pantalla debemos hacer uso de los distintos elementos de accesibilidad para hacer que la misma interfaz de usuario sea comprensible y usable para todas las personas.
A veces el uso de un control sólo se puede entender de forma visual como puede ser un interruptor deslizante para seleccionar un elemento más a la izquierda o más a la derecha, un botón de 3 estados o un cuadro de edición auto completable que permite realizar ciertas operaciones mientras se edita ese campo. En todos esos casos las personas con discapacidad visual pueden encontrar problemas a la hora de entender cómo utilizar dicho control. Para ayudar a este perfil de usuario la capa de accesibilidad permite incluir al control un texto de ayuda para entender cómo utilizar el control. Es lo que se conoce como hint o pista.

¿Qué son los Hints de Accesibilidad?

Los hints de accesibilidad son textos adicionales que proporcionan información contextual sobre un control de interfaz. Para los usuarios de lectores de pantalla. Estos hints pueden ser la diferencia entre una experiencia fluida y una frustrante. Por ejemplo, en una aplicación de banca móvil, un botón que simplemente dice «Enviar» podría no ser suficiente. Un hint podría agregar: «Enviar transferencia bancaria», proporcionando un contexto claro y específico.
Otro ejemplo podría ser un botón de tres estados cuyo hint podría indicar «pulse este botón para cambiar entre aceptado, pendiente y rechazado para actualizar el estado del pedido».

Implementación de Hints en Diferentes Plataformas

iOS

En iOS, los hints de accesibilidad se implementan utilizando el atributo accessibilityHint. Este atributo permite a los desarrolladores definir una cadena de texto que será leída por VoiceOver, el lector de pantallas de Apple, al final de toda la información del control.

Por ejemplo, un botón que tiene un icono de lápiz para editar puede no ser claro para todos los usuarios, pero al añadir un AccessibilitHint con el valor «Pulsa dos veces para modificar el valor de este campo»”, se proporciona la información necesaria para el usuario.

Android

En Android, los hints de accesibilidad se consiguen con el atributo android:hint en el fichero XML de la actividad. Este hint proporciona una descripción de lo que un control hace o lo que se espera que el usuario haga con él. Por ejemplo, un campo de entrada de texto puede tener un hint como “Introduce tu nombre completo”, lo cual es leído por TalkBack (el lector de pantalla de Android) para guiar al usuario.

HTML

En HTML, los hints se implementan con los atributos aria-description y aria-describedby.

El atributo aria-description proporciona una descripción directa del elemento, mientras que aria-describedby hace referencia a otro elemento en la página que contiene una descripción más detallada. Por ejemplo, un botón de búsqueda podría tener un aria-description=»Use este botón para buscar en todo el sitio web», y aria-describedby podría apuntar a un párrafo cercano al campo de búsqueda que explique cómo funciona la búsqueda en el sitio web.

Importancia de los Hints en la Accesibilidad

Estos atributos impactan en la accesibilidad de la interfaz de la siguiente forma:

  1. Claridad y Contexto: Los hints proporcionan información adicional que ayuda a los usuarios a entender la función de un control. Esto es especialmente importante para controles que solo tienen iconos o textos ambiguos.
  2. Mejora de la Usabilidad: Al proporcionar instrucciones claras sobre cómo utilizar un control, se mejora la usabilidad de la aplicación o sitio web, haciendo que la experiencia sea más intuitiva y menos frustrante para los usuarios con discapacidades visuales.
  3. Inclusión: Al implementar hints de accesibilidad, los desarrolladores están tomando pasos activos hacia la inclusión digital, asegurándose de que sus productos sean utilizables por el mayor número posible de personas.

Problemas Comunes con los Hints

A pesar de su importancia, los hints de accesibilidad no están exentos de problemas. Algunos de los desafíos más comunes incluyen:

  1. Hints Redundantes: A veces, los desarrolladores añaden hints que repiten información que ya está clara en el contexto visual, lo que puede resultar en una sobrecarga de información para el usuario de un lector de pantalla. Por ejemplo, un botón con un texto visible “Buscar” no necesita un hint adicional que diga “Botón de búsqueda”.
  2. Falta de Actualización: Los hints pueden volverse obsoletos si no se actualizan junto con cambios en la interfaz. Esto puede llevar a confusión si un hint describe una funcionalidad que ya no existe o que ha cambiado.
  3. Hints Incompletos: No proporcionar suficiente información es otro problema. Un hint demasiado breve puede no dar el contexto necesario. Por ejemplo, un hint que solo dice “Enviar” sin más detalles podría no ser útil en una aplicación con múltiples funcionalidades de envío.
  4. Uso Incorrecto de los Atributos: En HTML, confundir aria-description con aria-describedby puede llevar a que los usuarios de lectores de pantalla no reciban la información adecuada. Es crucial usar cada atributo de forma correcta para asegurarse de que la información se transmite adecuadamente.
  5. Problemas de personalización del lector de pantallas: algunos usuarios ciegos deshabilitan la lectura de estos elementos para dar mayor agilidad a su experiencia de uso. Esto implica que en el hint sólo se debe incluir la información relacionada con el control para evitar que el usuario pierda información vital de otra parte de la interfaz.

Buenas Prácticas para el Uso de Hints

Para maximizar la efectividad de los hints de accesibilidad, es importante seguir algunas buenas prácticas:

  1. Ser Claro y Conciso: Proporcionar descripciones claras y directas que sean fáciles de entender. Evitar la jerga técnica y centrarse en el propósito del control.
  2. Actualizar Regularmente: Asegurarse de que los hints se actualizan junto con cualquier cambio en la interfaz de usuario para evitar descripciones obsoletas.
  3. Consistencia: Mantener una terminología y un estilo consistentes en todos los hints para evitar confusión.
  4. Seguir los estilos definidos en la guía de interfaces del fabricante: Apple y Google tienen recomendaciones sobre el estilo de lenguaje a emplear en los hints.