La importancia del tamaño de los elementos táctiles en la accesibilidad

Al diseñar interfaces de usuario digitales, la accesibilidad no es  opcional si queremos que todas las personas puedan acceder al contenido y la funcionalidad que ofrecemos. Uno de los aspectos más ignorados por diseñadores pero críticos del diseño accesible es el tamaño de los elementos interactivos, como botones y enlaces. Para las personas con destrezas limitadas o discapacidades motoras, los objetivos táctiles pequeños pueden suponer barreras significativas para la interacción.

Las personas con dificultades motoras pueden experimentar temblores, control muscular reducido o necesitar dispositivos de asistencia para interactuar con pantallas táctiles. Cuando los botones son demasiado pequeños o están demasiado juntos, tocar el objetivo deseado se vuelve frustrante o incluso imposible. Esto no solo afecta a personas con perfiles de discapacidad, muchos usuarios experimentan limitaciones temporales, como un dedo vendado o estar sujetando otro objeto.

Para garantizar una experiencia confortable para todas las personas las pautas de accesibilidad a los contenidos Web (WCAG) recomiendan que todos los elementos interactivos tengan al menos 44 píxeles en su lado más corto. Este tamaño asegura que los usuarios puedan tocar los botones cómodamente sin necesidad de una precisión extrema. No se trata solo del elemento en sí, el espacio entre los elementos también es igualmente importante. Proporcionar suficiente margen o relleno entre botones ayuda a evitar toques accidentales, lo que puede llevar a errores y frustración del usuario.

Este principio se alinea directamente con el criterio de éxito 2.5.8: Tamaño mínimo del objetivo, el cual establece que los objetivos interactivos deben tener al menos 24 × 24 píxeles CSS, aunque 44 × 44 sigue siendo lo más recomendado por muchas plataformas como Apple y Android para mejorar la usabilidad en dispositivos móviles.

Cómo indicar el tamaño mínimo de un elemento

En HTML y frameworks como Angular o ReactJS, se pueden usar estilos en línea o módulos CSS para aplicar tamaños mínimos y espaciado.
En SwiftUI, se puede aplicar el tamaño mínimo de marco y añadir padding para garantizar el cumplimiento de accesibilidad usando el modificador:
.frame(minWidth: , minHeight:)

En Android, se pueden usar estos modificadores en el archivo XML de la Activity o el componente a renderizar: android:minWidth=»44dp» android:minHeight=»44dp»

Control por voz para iPhone

Control por Voz (Voice Control) es una función de accesibilidad integrada en iOS que permite manejar el iPhone completamente mediante comandos de voz, sin necesidad de tocar la pantalla. Este servicio de accesibilidad es indispensable para personas con movilidad reducida o para quienes prefieren interactuar con el dispositivo utilizando la voz.
Con este servicio de accesibilidad se pueden abrir aplicaciones, navegar por menús, escribir mensajes, hacer llamadas, interactuar con elementos de la pantalla y mucho más simplemente usando comandos de voz.
A diferencia de Siri, que se centra en ejecutar tareas o responder preguntas, Control por Voz sustituye la interacción táctil. Es como si el iPhone entendiera cada toque, deslizamiento o pulsación… pero dicho en voz alta.

Activar control por voz

El control por voz se activa en el menú de Accesibilidad dentro de los Ajustes del iPhone. Dentro de la sección HABILIDADES FÍSICAS Y MOTORAS se encuentra un botón llamado Control por voz. Al pulsarlo accederemos a las opciones de activación y configuración de Control por voz.

Configurar Control por Voz en español

Cuando se activa Control por Voz por primera vez el dispositivo tiene que descargar un modelo de comprensión del habla para poder entender los comandos que se le indican. El dispositivo puede tardar unos minutos en descargar el modelo de reconocimiento de voz.
Para configurarlo en nuestro idioma debemos entrar en la opción de idioma, seleccionar el idioma que queramos utilizar y esperar a que se descargue el soporte para nuestro idioma.

Importante: Algunos comandos pueden variar ligeramente entre idiomas por lo que es recomendable consultar la lista de comandos disponibles para Control por voz.

Uso básico

Una vez activado, un pequeño icono azul aparecerá en la parte superior de la pantalla indicando que el iPhone está “escuchando”.
A partir de ese momento, se pueden decir cosas como: abrir Safari, ir a inicio, pulsar atrás, tocar aceptar, etc.

Activación y desactivación rápida

Aunque Control por voz incluye un modo para pausar su uso y despertarlo también podemos hacer uso de Siri para activarlo o desactivarlo. Con el comando «activa control por voz» Siri ejecutará el control por voz si ya lo hemos configurado en nuestro dispositivo. Y con el comando «desactiva control por voz» Siri lo desactivará.

Utilizando el sistema de oye Siri podremos también activar y desactivar el control por voz sin necesidad de tocar el iPhone.

Identificar elementos en pantalla con Control por voz

Cuando necesitamos tocar un botón o manipular un elemento de la pantalla debemos emplear el nombre que aparece en el botón o control. Pero en muchas ocasiones la aplicación no se ha desarrollado con el nivel de accesibilidad suficiente y el servicio de Control por voz no encuentra eso que le hemos pedido debido a que internamente el desarrollador no ha etiquetado de forma apropiada ese control.

Para solucionar esta situación de baja accesibilidad el Control por voz puede reetiquetar todos los elementos pulsables que aparecen en pantalla utilizando un número. De esta forma, aunque un botón con el icono de continuar no se haya etiquetado de forma accesible podremos activarlo diciendo «pulsar» y el número que aparezca sobre el botón.

Para hacer que aparezcan estos números simplemente debemos utilizar el comando Mostrar números. Y para dejar de usar números existe el comando Ocultar números.

Navegación por zonas

A veces la pantalla de una aplicación tiene demasiados controles y la navegación por números puede ser muy pesada. El servicio de Control por voz permite activar una navegación por zonas, para ello debemos utilizar el comando Mostrar cuadrícula. En la pantalla aparecerá una rejilla que delimitará la zona de acción del Control por voz. Podemos utilizar el comando Ocultar cuadrícula para dejar de utilizar este sistema.

Escribir con Control por voz

Con el servicio de Control por voz también podemos introducir texto dictando lo que queramos escribir. Para ello debemos activar el teclado del iPhone pulsando sobre el cuadro de texto donde queramos escribir y utilizar el comando Escribir. Por ejemplo: pulsar nombre, escribir Jonathan Chacón, pulsar aceptar.

También, cuando el teclado está activo, se pueden utilizar los comandos seleccionar todo, borrar todo, reemplazar Chacón por Chacón Barbero. Las posibilidades son inmensas.

Si utilizamos Control por voz con Zoom o VoiceOver activos el comportamiento del sistema de dictado cambia por lo que debemos ajustar la forma de dictar al teléfono a la presencia de otros servicios de accesibilidad.

Conociendo más comandos de Control por voz

En los ajustes de Control por voz hay un botón llamado Comandos. Dentro de ese botón aparece un menú de navegación en el que podemos consultar y activar todos los comandos de voz disponibles para este servicio de accesibilidad.

Cursores de VoiceOver para MacOS

En MacOS los usuarios de VoiceOver, el lector de pantallas de Apple, suelen utilizar el sistema utilizando el cursor de VoiceOver sin conocer que el sistema proporciona la posibilidad de utilizar otros dos cursores.

En MacOS existen estos cursores o focos de uso: el cursor del ratón, el cursor del teclado, el cursor de foco del tabulador y el cursor de VoiceOver.

Por defecto VoiceOver hace que su cursor modifique a los otros 3 haciendo que el ratón, el teclado y el foco de tabulación sigan, siempre que se pueda, la posición del cursor de VoiceOver para que cuando pulsemos VO+espacio tanto el click de ratón como la pulsación de la tecla enter se realice donde VoiceOver está prestando atención.

Separando cursores de forma puntual

Podemos hacer que el cursor de VoiceOver deje libres a los otros tres cursores. Para ello debemos pulsar la combinación de teclas VO+Mayúsculas+F3. Con esta combinación de teclas podemos activar o desactivar el control de cursor de VoiceOver. Cuando se desactiva este control, si movemos el cursor de VoiceOver pulsando Vo+Flecha izquierda o VO+Flecha derecha tanto el cursor del ratón como el cursor del teclado permanecerán en su posición.

¿Para qué separar los cursores?

Además de evitar problemas con elementos del menú qué reaccionan cuando el cursor del ratón se coloca sobre ellos, podemos realizar lecturas rápidas de otras zonas de la pantalla sin necesidad de movernos de un sitio a otro con el cursor de VoiceOver O evitar que aplicaciones web como Slack, Whatsapp o Trello realicen aperturas o selecciones de elementos al intentar explorar la interfaz usando el cursor de VoiceOver debido a que la aplicación reacciona ante el movimiento del cursor del ratón o el teclado.

Algunos ejemplos

Con los cursores separados podemos realizar tareas como las de dejar el cursor del teclado en un sitio mientras movemos el cursor de VoiceOver a otra posición del documento para consultar algún dato previo. También podemos colocar el puntero del ratón sobre un elemento para consultar el estado de un control.

Para hacer estas tareas primero nos movemos, por ejemplo, en nuestro documento utilizando las teclas de cursor mientras tenemos todos los cursores unidos al de VoiceOver. Nos aseguramos que el cursor de VoiceOver está dentro del contenedor de texto en el que se encuentra el cursor del teclado. Para ello interactuamos con el contenedor de texto pulsando VO+Mayúsculas+Flecha abajo hasta que no podamos profundizar más; una vez estemos dentro del contenedor desactivamos el control del cursor pulsando VO+Mayúsculas+F3 y ahora si movemos el cursor de VoiceOver con VO+Flecha arriba leeremos un texto y si usamos las flechas de cursor leeremos el texto que está en el cursor del teclado. Con esto podemos explorar el texto con dos cursores distintos.

Ahora, mientras seguimos con los cursores separados, movemos el cursor de VoiceOver hasta la barra de estado de nuestro editor de textos y movemos el cursor del ratón a la posición del cursor de VoiceOver pulsando VO+Comando+F5. Ahora volvemos el cursor de VoiceOver a la posición del cursor del teclado para seguir editando nuestro documento. Pero esto lo podemos hacer más rápido haciendo que el cursor de VoiceOver salte a la posición del cursor del teclado pulsando VO+Mayúsculas+F4 y así podemos seguir escribiendo y cuando queramos ver la barra de estado del documento con el número de palabras escritas pulsamos VO+F5 para que nos lea qué hay bajo el puntero del ratón.

Más control requiere un poco de precaución

Con este tipo de navegación puede parecer que al usuario se le exija más concentración y memorizar el estado de control de los cursores por parte de VoiceOver. Esto no es del todo cierto, podemos incluir el hábito de pulsar VO+Mayúsculas+F3 para comprobar el estado de activación o desactivación del control de cursores y así conocer qué puede estar pasando cuando intentamos llegar a una opción que, misteriosamente, no podemos llegar porque el menú de la aplicación se cierra o el teclado no funciona como esperábamos.

Cómo reinstalar macOS en un MacBook con procesador M

Si el MacBook con chip Apple M no funciona como debería, o simplemente se quiere empezar desde cero, reinstalar macOS puede ser la mejor opción.
Es importante saber en qué casos puede ser útil reinstalar macOS:

  • • Cuando el sistema operativo se vuelve inestable o muy lento.
  • • Hay errores persistentes que no se solucionan con actualizaciones.
  • • Para limpiar completamente el Mac antes de venderlo o regalarlo.
  • • Se experimentan problemas graves con VoiceOver y otras opciones de accesibilidad.

Si solo hay problemas menores, tal vez no sea necesario reinstalar. En su lugar, se puede probar con una reinstalación sin borrar los datos o con una simple restauración de configuraciones.

Copia de seguridad

Antes de realizar cualquier operación en la que puedan peligrar los datos y la información del usuario es necesario hacer una copia de seguridad o backUp.

Para hacer esta copia de seguridad se puede usar Time Machine con un disco externo o copiar manualmente los archivos más importantes a iCloud, Dropbox o un USB.

 Aviso

Aunque en este artículo se listan pasos y opciones concretas este proceso no es del todo semejante en todas las versiones de MacOS. Dependiendo de la versión de MacOS que esté utilizando el modo de recuperación.

Acceder al modo de recuperación

En los Mac con procesador Apple Silicon, acceder al modo de recuperación es sencillo:

  • 1. Debemos asegurarnos de que el Mac esté apagado.
  • 2. Se debe mantener presionado el botón de encendido hasta que se escuche “Opciones de arranque cargadas” o hasta que se vea el logotipo de Apple y luego aparezca “Opciones”.
  • 3. Cuando aparezcan las opciones de recuperación, se debe seleccionar Opciones y hacer clic en Continuar. Si se usa VoiceOver, se puede activar con Comando+F5.

Si el sistema de recuperación no carga, Se podría necesitar Restaurar macOS con otro Mac mediante Apple Configurator, pero este error es poco común.

Usar VoiceOver en el modo de recuperación

En el modo de recuperación la versión de VoiceOver que utilizamos está limitada ya que no se tiene acceso real al disco ni a nuestras personalizaciones.

Para empezar es posible que al arrancar el modo de recuperación todo el sistema y VoiceOver hablen en inglés. Podemos cambiar el idioma accediendo a la barra de menú pulsando Control+Opción+M y en el menú File buscar la opción Choose language.

A veces VoiceOver no puede hacer click en los botones. Para solucionar este problemas deberemos hacer uso del menú de acciones de VoiceOver. Nos colocamos sobre el botón que queremos activar, pulsamos Control+Opción+Comando+barra espaciadora y en el menú que aparece buscamos la opción Press o Pulsar.  

Por último recordar que el salto mediante la tecla de tabulación es compatible con VoiceOver. Por ejemplo en la pantalla inicial del modo recuperación podemos hacer click en el elemento Opciones pero si no profundizamos no encontraremos que dentro hay un botón de continuar. Para llegar a ese botón en muchas configuraciones se hace de forma más sencilla pulsando la tecla tabulador después de hacer click sobre Opciones.

Borrar el disco

Una vez en el modo de recuperación, debemos buscar la utilidad de discos y realizar las siguientes operaciones:

  • 1. Abrir Utilidad de Discos.
  • 2. Seleccionar el disco principal (normalmente llamado Macintosh HD).
  • 3. Pulsar en Borrar y usar APFS como formato.
  • 4. Confirmar la operación y cerrar Utilidad de Discos.

Reinstalar macOS

Tras salir de la utilidad de discos se debe elegir la opción de Reinstalar macOS y pulsar el botón continuar.

A continuación aparecerá un asistente para configurar la conexión Wifi. Tras tener conexión a Internet se procederá a la descarga de los datos de instalación. Este proceso puede tardar entre 30 minutos y 1 hora, dependiendo de la velocidad de la conexión a Internet.

Tras la instalación el equipo se reiniciará y comenzará el asistente de configuración con la selección de idioma del proceso y la conexión con la cuenta de iCloud y nuestro AppleID. El proceso es totalmente accesible con VoiceOver y el resto de opciones de accesibilidad.

Desde este asistente también se pueden recuperar los datos desde una copia de seguridad de Time machine.

Escribir emojis en MacOS con VoiceOver

Los emojis han revolucionado la comunicación digital, permitiendo expresar emociones, ideas y conceptos de manera visual y sencilla. En la actualidad es la forma más sencilla de enviar un texto y querer transmitir alguna emoción en ese mensaje textual. Por esta razón todos los sistemas operativos incluyen algún mecanismo para poder incluir emojis en los campos de texto.

El selector de emojis

En MacOS el sistema incluye el selector de emojis, una herramienta que proporciona un panel donde buscar y seleccionar un emoji que se introducirá en la posición actual en la que se encuentre el cursor de texto.

Para mostrar esta herramienta hay que pulsar la combinación Control+Comando+espacio.

En este panel podemos encontrar un campo de búsqueda, una tabla de selección de emojis y una barra de botones para seleccionar una categoría.

Usando el selector de emojis con VoiceOver

Al pulsar la combinación Control+Comando+espacio el foco de VoiceOver se sitúa en el campo de búsqueda del selector de emojis. Si nos movemos al siguiente elemento pulsando Control+Opción+Flecha derecha llegaremos a la zona de la tabla de emojis. Debemos interactuar para encontrar distintos grupos de elementos tantos como categorías disponibles. Una vez localizado el emoji que queremos utilizar pulsamos Control+Opción+espacio para seleccionarlo.

Usando el buscador con VoiceOver

Podemos optimizar el uso de esta herramienta utilizando el buscador.

Nada más abrir el selector de emojis el foco de VoiceOver se coloca en el buscador por lo que si en lugar de buscar nosotros con VoiceOver por las distintas tablas escribimos algo como gafas, corazón, triste, feliz, en la tabla sólo nos aparecerán los emojis que cumplan el criterio de búsqueda.

Sustituyendo palabras por emojis 

MacOS ofrece una forma más rápida de usar emojis que con el selector de emojis. Podemos sustituir una palabra por un emoji. Para ello debemos escribir la palabra que utilizaríamos en el buscador de selector de emojis y, sin pulsar espacio tras escribirla, pulsamos la combinación Control+Comando+espacio para que nos aparezca un listado de posibles emojis para sustituir esa palabra. Por ejemplo:

En un campo de texto escribimos la palabra bien y tras pulsar la tecla n pulsamos la combinación Control+Comando+espacio. Nos aparecerá una lista con 3 emojis (señal de aprobación con la mano, pulgar hacia arriba y manos aplaudiendo). Para seleccionar un elemento de la lista debemos interactuar con VoiceOver, buscar el elemento y pulsar Control+Opción+espacio. Lo importante es que justo cuando hayamos terminado de escribir la palabra debemos usar la combinación de teclas para abrir el selector de emojis.

Si la palabra que hemos introducido no tiene ningún emoji relacionado se abrirá el selector de emojis para que lo busquemos por nuestra cuenta.

De esta forma podemos incluir emojis de forma más rápida sin necesidad de buscar por tablas de emojis o usar el buscador en el selector de emojis.

Cómo Utilizar Contrast Checker para Validar la accesibilidad en las combinaciones de colores

Una de las barreras de accesibilidad más habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo.
Para solucionar estas barreras de accesibilidad existen herramientas como el Contrast Checker de WebAIM que permite comprobar si las combinaciones de colores cumplen con los estándares de accesibilidad establecidos por las Web Content Accessibility Guidelines (WCAG).

¿Qué es Contrast checker?

Contrast Checker es una herramienta en línea gratuita proporcionada por WebAIM (Web Accessibility in Mind) que permite verificar si una combinación de colores cumple con los niveles de contraste requeridos por las WCAG buscando que los textos sean legibles para personas con baja visión y daltonismo.

Este verificador evalúa la diferencia entre el color de primer plano (texto) y el color de fondo para determinar si cumple con los niveles de conformidad de AA y AAA definidos en las WCAG.

¿Cómo se utiliza Contrast checker?

La herramienta muestra un formulario con dos campos principales que representan el color del texto y el color de fondo. Estos colores son identificados como Foreground Color para el color en primer plano y background color para el color de fondo.

Se puede introducir el código hexadecimal de un color o utilizar la herramienta de selector de color para buscar el color en la paleta de colores del sistema.

Una vez ingresados los colores, la herramienta calculará automáticamente el ratio de contraste y mostrará los resultados en diferentes categorías.

  • Small Text (Texto pequeño): indica si la combinación de colores pasa los estándares para texto de tamaño normal.
  • Large Text (Texto grande): evalúa si la combinación cumple para textos de al menos 18px en regular o 14px en negrita.
  • Graphics and UI Components: verifica si los colores cumplen para elementos como botones o iconos.

El ratio de contraste se expresa como un número (ejemplo: 4.5:1). Para que la combinación de colores sea accesible, debe cumplir al menos con estos valores:

  • AA (Mínimo) ≥ 4.5:1 ≥ 3:1
  • AAA (Óptimo) ≥ 7:1 ≥ 4.5:1

Si la combinación de colores no pasa la prueba, se mostrará en rojo junto con un mensaje indicando que el contraste es insuficiente.