Naviguer jusqu'au contenu principal

Plus de 15 manières dont nous améliorons l'accessibilité dans Figma

Collage géométrique abstrait avec des formes vives, des lettres et un symbole d'œil dans des tons roses, verts, noirs et crème.Collage géométrique abstrait avec des formes vives, des lettres et un symbole d'œil dans des tons roses, verts, noirs et crème.

Pour rendre la navigation dans Figma plus facile pour tous, nous lançons plus d'une douzaine de commandes uniquement au clavier et améliorons l'expérience du lecteur d'écran.

Partager Plus de 15 manières dont nous améliorons l'accessibilité dans Figma

Aujourd'hui, nous déployons des améliorations qui facilitent et rendent plus fiable la navigation dans les fichiers avec un clavier ou un lecteur d'écran. Des nouveaux raccourcis clavier (par exemple, la sélection de widgets dans FigJam ou l'ajustement des guides de règle dans Figma Design) aux annonces plus claires et au support textuel enrichi pour les lecteurs d'écran, ces mises à jour créent une expérience plus fluide qui favorise pour tous la concentration et le flux.

Meilleures commandes clavier pour le plan de travail et les commentaires

Visitez le centre d'aide pour obtenir une liste complète des nouvelles commandes clavier.

Que vous ajustiez une ligne dans Figma Design ou que vous ajoutiez des connecteurs à un diagramme FigJam, nous avons ajouté de nouvelles méthodes de se déplacer sur le plan de travail avec le clavier. Les objets du plan de travail sont désormais également accessibles aux lecteurs d'écran, améliorant la navigation pour tous les utilisateurs. Nous rendons également la collaboration et le transfert plus fluides pour les utilisateurs uniquement au clavier, avec la possibilité d'ajouter, de déplacer et de parcourir des commentaires et des annotations en mode Dev Mode en utilisant des raccourcis. Voici ce qui est également nouveau.

Commandes clavier du plan de travail

Dans tous les produits, de nouvelles commandes vous aident à déplacer, ajuster et aligner les objets avec une plus grande précision. Ces nouvelles commandes incluent :

Figma Slides

  • Redimensionnez les notes des présentateurs et ajustez le ton du texte avec l'IA.

FigJam

  • Ajoutez, supprimez et réorganisez des lignes et des colonnes.
  • Ajoutez et ajustez des tampons, des votes et du ruban washi.
  • Naviguez à travers les objets du plan de travail tels que les résumés IA et les liens et vidéos intégrés.
  • Sélectionnez et ajustez les lignes de marqueur et les tracés de surligneur.
  • Ajoutez, supprimez et réorganisez les lignes et les colonnes dans les tableaux.

Figma Design

  • Ajoutez, sélectionnez et ajustez les lignes.
  • Ajoutez, supprimez et modifiez des repères de règle.
  • Créez et modifiez des arcs à partir d'ellipses.

Produit croisé

  • Ouvrez des liens et naviguez entre eux en mode modifier ou lecture seule.

Commandes clavier pour le feedback

De nouveaux raccourcis vous aident à répondre au feedback et à passer d'une discussion à une autre sans perdre votre concentration. Utilisez ces raccourcis pour :

  • Ajouter, déplacer et parcourir les commentaires dans tous les produits (non disponible dans les produits en version bêta).
  • Ajouter, déplacer et parcourir les annotations dans le Dev Mode.

Basculements

De nouvelles méthodes vous permettent désormais de personnaliser votre expérience dans tous les produits Figma. Par exemple :

  • Désactiver le remplacement des raccourcis exclusifs Figma lors de la saisie
  • Choisir de suivre automatiquement les autres en mode mise en avant

Amélioration de la prise en charge des lecteurs d'écran

Nous améliorons la façon dont Figma fonctionne avec la technologie d'assistance, afin que les utilisateurs de lecteurs d'écran puissent naviguer dans les fichiers de manière fluide, entendre les objets dans l'ordre et rester au fait de l'évolution des choses. Des annonces plus cohérentes et fiables aux descriptions d'objets plus riches, en passant par le support du texte formaté qui permet aux lecteurs d'écran de reconnaître les mots en gras ou en italique, ces améliorations rendent le contenu plus facile à suivre et à comprendre.

Les mises à jour incluent :

  • Navigation dans les actions : désormais, le déplacement à travers des éléments interactifs (par exemple, les boutons, les menus et les panneaux) avec la touche Tab suit un ordre plus logique. Les utilisateurs peuvent passer directement à des actions spécifiques (par exemple, ouvrir un menu, déclencher un bouton ou sélectionner une option de barre d'outils).
  • Descriptions d'objets : les lecteurs d'écran fournissent maintenant des annonces plus détaillées pour les objets (par exemple, leur type, nom et état) afin que les utilisateurs puissent mieux comprendre ce qui se trouve sur le plan de travail.
  • Mises à jour des annonces : les annonces sont désormais plus cohérentes, afin que les utilisateurs ne manquent pas de changements importants comme de nouveaux commentaires ou des mises à jour de fichiers.
  • Prise en charge du texte formaté : les lecteurs d'écran conservent désormais la mise en forme du texte enrichi (par exemple, gras, italique, listes et liens), afin que les utilisateurs ne perdent pas la structure et le sens importants.
  • Recevez des informations sur les objets du plan de travail dans Buzz et Slides : les lecteurs d'écran peuvent désormais reconnaître et annoncer les objets du plan de travail dans Buzz et Slides.

Contraste amélioré de l'écran

Avec un simple basculement, les utilisateurs peuvent désormais augmenter la distinction entre le texte, les éléments et leurs fonds dans les modes clair et sombre. Un contraste de couleur amélioré facilite la navigation dans Figma comme suit :

Trois façons d'activer le contraste amélioré : depuis les paramètres d'accessibilité dans le menu principal, depuis le menu Actions ou depuis les paramètres généraux.

  • Améliorer la lisibilité du texte et des icônes
  • Faciliter la visualisation de l'organisation de l'interface et repérer rapidement les éléments nécessaires
  • Aider les boutons et les contours à se démarquer plus clairement lorsque vous les survolez ou interagissez avec eux
  • Améliorer la visibilité en cas d'éblouissement et à la lumière du soleil
  • Accélérer l'analyse et la réorientation lors de tâches multiples

Les différences subtiles entre le contraste standard et le contraste de couleur amélioré peuvent faire une grande différence, surtout lors d'une exposition prolongée à l'écran.

Fichier de design Figma montrant une grille de photo 3×3 de jardins et d'une architecture avec un contraste inférieur et les paramètres de mise en page visibles.Fichier de design Figma montrant une grille de photo 3×3 de jardins et d'une architecture avec un contraste inférieur et les paramètres de mise en page visibles.
Les gris à faible contraste sur fond blanc rendent le texte et les icônes plus difficiles à voir, ce qui sollicite davantage les yeux.
Interface Figma mise à jour montrant la même grille de photo 3×3 de jardins avec un contraste supérieur et les mêmes options de mise en page.Interface Figma mise à jour montrant la même grille de photo 3×3 de jardins avec un contraste supérieur et les mêmes options de mise en page.
Des gris plus sombres, des surlignements plus marqués et des contours clairs rendent l'UI plus facile à scanner et à lire d'un coup d'œil.

Améliorations de l'accessibilité de Figma Sites

Conseils pour rendre votre site plus accessible :

Ajoutez un texte alternatif aux images qui nécessitent une description, ou marquez-les comme décoratives.

Définissez la bonne balise HTML.

Ajoutez des étiquettes lorsque le texte visible est manquant ou peu clair.

Marquez les éléments purement décoratifs comme masqués.

Utilisez l'outil de contraste des couleurs dans le sélecteur de couleurs pour améliorer la lisibilité.

Grâce à des actions telles que l'application des balises HTML correctes et l'application de propriétés d'accessibilité à chaque élément de votre design, vous pouvez créer via Figma Sites un site plus facile à utiliser pour les utilisateurs qui dépendent des lecteurs d'écran ou de la navigation au clavier.

Les améliorations d'accessibilité apportées à Figma Sites incluent les suivantes :

  • Appliquez de nouvelles propriétés ARIA (Accessible Rich Internet Applications) qui ajoutent du contexte au-delà de HTML et affichez les balises HTML correspondantes dans le panneau des calques.
  • Modifiez les options d'accessibilité telles que le texte alternatif, les étiquettes et les rôles directement dans le panneau des propriétés, facilitant ainsi l'accessibilité de votre site.

Ensemble, ces mises à jour facilitent le design et la publication de sites plus accessibles et inclusifs par défaut.

Pour en savoir plus sur nos dernières mises à jour en matière d'accessibilité, visitez notre nouveau centre d'aide sur l'accessibilité.

Créez et collaborez avec Figma

Lancez-vous gratuitement