Saltar hasta el contenido principal

Más de 15 formas en las que estamos mejorando la accesibilidad en Figma

Collage geométrico abstracto con formas brillantes, letras y un símbolo de ojo en tonos rosa, verde, negro y crema.Collage geométrico abstracto con formas brillantes, letras y un símbolo de ojo en tonos rosa, verde, negro y crema.

Para que sea más sencillo navegar por Figma para todos, estamos lanzando más de una docena de controles exclusivamente con teclado y mejorando la experiencia del lector de pantalla.

Compartir Más de 15 formas en las que estamos mejorando la accesibilidad en Figma

Hoy estamos implementando mejoras que facilitan y hacen más confiable la navegación por archivos usando un teclado o un lector de pantalla. Desde nuevos atajos de teclado, como seleccionar widgets en FigJam o ajustar guías de regla en Figma Design, hasta anuncios más claros y un soporte más rico para textos en lectores de pantalla, estas actualizaciones crean una experiencia más fluida que apoya el enfoque y el flujo para todos.

Mejor control del teclado para el lienzo y los comentarios

Visita el centro de ayuda para ver la lista completa de nuevos controles de teclado.

Ya sea que estés ajustando una línea en Figma Design o añadiendo conectores a un diagrama de FigJam, hemos ampliado las formas de moverse por el lienzo con el teclado. Los objetos del lienzo ahora también son accesibles para los lectores de pantalla, mejorando la navegación para todos los usuarios. También estamos haciendo que la colaboración y la entrega sean más fluidas para los usuarios que solo utilizan el teclado, con la capacidad de añadir, mover y navegar comentarios y anotaciones de Dev Mode usando atajos. Esto es lo que más hay de nuevo.

Controles del teclado en el lienzo

Los controles expandidos en todos los productos te ayudan a mover, ajustar y alinear objetos con mayor precisión. Estos nuevos controles incluyen:

Figma Slides

  • Redimensiona las notas del presentador y ajusta el tono de escritura con IA.

FigJam

  • Añade, elimina y reordena filas y columnas.
  • Añade y ajusta sellos, votos y cinta washi.
  • Navega por los objetos del lienzo, como los resúmenes de IA y los enlaces y vídeos incrustados.
  • Selecciona y ajusta las líneas de marcador y los trazos del highlighter.
  • Añade, elimina y reordena filas y columnas en tablas

Figma Design

  • Añade, selecciona y ajusta líneas.
  • Añade, elimina y edita guías de regla.
  • Crea y edita arcos a partir de elipses.

Producto cruzado

  • Abre y muévete entre enlaces en modo editar o modo solo ver.

Controles del teclado para comentarios

Nuevos atajos te ayudan a responder comentarios y moverte entre discusiones sin perder el enfoque. Utiliza estos atajos para:

  • Añadir, mover y navegar por los comentarios en todos los productos (no disponible en productos beta).
  • Añadir, mover y navegar por anotaciones de Dev Mode.

Alternadores

Ahora, hay nuevas formas de personalizar tu experiencia en los productos de Figma como:

  • Desactivación de la anulación de los atajos exclusivos de Figma al escribir
  • Elegir si seguir automáticamente a otros con destacar

Mejor soporte para lectores de pantalla

Estamos mejorando cómo Figma funciona con la tecnología de asistencia, para que los usuarios de lectores de pantalla puedan navegar por los archivos sin problemas, escuchar los objetos en orden y mantenerse al día a medida que las cosas cambian. Desde anuncios más coherentes y fiables, hasta descripciones más ricas de los objetos, pasando por el soporte de texto formateado que permite a los lectores de pantalla reconocer palabras en negrita o en cursiva, estas mejoras hacen que el contenido sea más fácil de seguir y entender.

Las actualizaciones incluyen:

  • Navegación de acciones: ahora, moverse a través de elementos interactivos como botones, menús y paneles con la pestaña sigue un orden más lógico. Los usuarios pueden saltar directamente a acciones específicas, como abrir un menú, desencadenar un botón o seleccionar una opción de la barra de herramientas.
  • Descripciones de objetos: los lectores de pantalla ahora brindan anuncios más detallados para los objetos, como su tipo, nombre y estado, para que los usuarios puedan comprender mejor lo que está en el lienzo.
  • Actualizaciones de anuncios: los anuncios ahora son más coherentes, por lo que los usuarios no se pierden cambios importantes como nuevos comentarios o actualizaciones de archivos.
  • Soporte de texto con formato: los lectores de pantalla ahora conservan el formato de texto enriquecido como negritas, cursivas, listas y enlaces, para que los usuarios no pierdan estructura y significado importantes.
  • Recepción de información sobre objetos de lienzo en Buzz y Slides: los lectores de pantalla ahora pueden reconocer y anunciar objetos de lienzo en Buzz y Slides.

Contraste mejorado de la pantalla

Con un simple cambio, los usuarios ahora pueden aumentar la distinción entre texto, elementos y sus fondos en modos claro y oscuro. El contraste de color mejorado hace que Figma sea más fácil de navegar para todos:

Tres formas de activar el contraste mejorado: desde la configuración de accesibilidad en el menú principal, desde el menú de acciones o desde la configuración general

  • Mejorando la legibilidad del texto y los iconos
  • Facilitar la visualización de cómo está organizada la interfaz y localizar rápidamente los elementos que necesitas
  • Ayudando a que los botones y los esquemas destaquen más claramente cuando pasas el ratón sobre ellos o interactúas con ellos
  • Mejorando la visibilidad bajo reflejos y luz solar
  • Hacer que sea más rápido escanear y reorientarse al realizar múltiples tareas

Las sutiles diferencias entre el contraste regular y el contraste mejorado de color pueden marcar una gran diferencia, especialmente durante la exposición prolongada a la pantalla.

Figma Design que muestra una cuadrícula de fotos de 3×3 de jardines y arquitectura con menor contraste y disposición visibles.Figma Design que muestra una cuadrícula de fotos de 3×3 de jardines y arquitectura con menor contraste y disposición visibles.
Los grises de bajo contraste sobre blanco hacen que el texto y los iconos sean más difíciles de ver, obligando a que los ojos trabajen más.
La interfaz actualizada de Figma muestra la misma cuadrícula de fotos de jardín 3×3 con mayor contraste y las mismas opciones de disposición.La interfaz actualizada de Figma muestra la misma cuadrícula de fotos de jardín 3×3 con mayor contraste y las mismas opciones de disposición.
Grises más oscuros, resaltados más fuertes y esquemas claros hacen que la IU sea más fácil de escanear y leer de un vistazo.

Mejoras de accesibilidad en Figma Sites

Consejos para hacer que tu sitio sea más accesible:

Añade texto alternativo a las imágenes que necesiten descripción, o márcalas como decorativas.

Establece la etiqueta HTML correcta.

Añade etiquetas cuando el texto visible falte o esté poco claro.

Marca los elementos puramente decorativos como ocultos.

Usa la herramienta de contraste de color en el selector de color para mejorar la legibilidad.

A través de acciones como aplicar las etiquetas HTML correctas y propiedad de accesibilidad a cada elemento en tu diseño, puedes crear un sitio web a través de Figma Sites que sea más fácil de usar para aquellos que dependen de lectores de pantalla o la navegación por teclado.

Nuestras mejoras de accesibilidad en Figma Sites incluyen:

  • Aplicar nuevas propiedades ARIA (Aplicaciones de Internet enriquecidas accesibles) que añaden contexto más allá de HTML y ver las etiquetas HTML correspondientes en el panel de capas.
  • Editar opciones de accesibilidad como texto alternativo, etiquetas y roles directamente desde el panel de propiedades, lo que facilita asegurar que tu sitio sea accesible.

Juntas, estas actualizaciones facilitan el diseño y publican sitios que son más accesibles e inclusivos de forma predeterminada.

Para conocer nuestras últimas actualizaciones de accesibilidad, visita nuestro nuevo centro de ayuda de accesibilidad.

Create and collaborate with Figma

Get started for free