Zu Hauptinhalten gehen

Mehr als 15 Möglichkeiten, wie wir die Barrierefreiheit in Figma verbessern

Abstraktes geometrische Collage mit leuchtenden Formen, Buchstaben und einem Augensymbol in Rosa-, Grün-, Schwarz- und Cremetönen.Abstraktes geometrische Collage mit leuchtenden Formen, Buchstaben und einem Augensymbol in Rosa-, Grün-, Schwarz- und Cremetönen.

Um die Navigation in Figma für alle zu vereinfachen, führen wir über ein Dutzend Tastaturbefehle ein und verbessern die Erfahrung mit dem Bildschirmlesegerät.

Mehr als 15 Möglichkeiten, wie wir die Barrierefreiheit in Figma verbessern teilen

Heute führen wir Verbesserungen ein, die die Navigation in Dateien mit der Tastatur oder einem Bildschirmlesegerät einfacher und zuverlässiger machen. Von neuen Tastenkürzeln – wie der Auswahl von Widgets in FigJam oder der Anpassung von Linealhilflinien in Figma Design – bis hin zu klareren Ankündigungen und einer umfangreicheren Textunterstützung für Bildschirmlesegeräte schaffen diese Updates ein flüssigeres Erlebnis, das den Fokus und den Flow für alle unterstützt.

Bessere Tastatursteuerung für die Arbeitsfläche und Kommentare

Besuche das Hilfe-Center, um die vollständige Liste der neuen Tastatursteuerungen einzusehen.

Gleich, ob du eine Linie in Figma Design anpasst oder Verbinder zu einem FigJam-Diagramm hinzufügst – wir haben die Möglichkeiten erweitert, sich mit der Tastatur auf der Arbeitsfläche zu bewegen. Arbeitsflächenobjekte sind jetzt auch für Bildschirmlesegeräte zugänglich und verbessern die Navigation für alle Benutzer*innen. Wir vereinfachen auch die Zusammenarbeit und Übergabe für Benutzer*innen, die ausschließlich mit der Tastatur arbeiten, indem Kommentare und Dev Mode-Annotationen mit Tastenkürzeln hinzugefügt, verschoben und navigiert werden können. Hier ist, was es sonst noch Neues gibt.

Arbeitsflächen-Tastatursteuerungen

Erweiterte Steuerungen für alle Produkte helfen dir dabei, Objekte mit größerer Genauigkeit zu bewegen, anzupassen und auszurichten. Zu diesen neuen Steuerungen gehören:

Figma Slides

  • Größe der Referentennotizen ändern und Schreibstil mit KI anpassen.

FigJam

  • Zeilen und Spalten hinzufügen, entfernen und neu anordnen.
  • Stempel, Stimmen und Washi Tape hinzufügen und anpassen.
  • Durch Arbeitsflächen-Objekte wie KI-Zusammenfassungen sowie eingebettete Links und Videos navigieren.
  • Markerlinien und Textmarker-Konturen auswählen und anpassen.
  • Zeilen und Spalten in Tabellen hinzufügen, entfernen und neu anordnen.

Figma Design

  • Linien hinzufügen, auswählen und anpassen.
  • Linealhilfslinien hinzufügen, entfernen und bearbeiten.
  • Bögen aus Ellipsen erstellen und bearbeiten.

Produktübergreifend

  • Links im Bearbeitungs- oder Nur-Lese-Modus öffnen und zwischen ihnen wechseln.

Tastatursteuerungen für Feedback

Neue Tastenkürzel helfen dir, auf Feedback zu reagieren und zwischen Diskussionen zu wechseln, ohne den Fokus zu verlieren. Verwende diese Tastenkürzel für Folgendes:

  • Für alle Produkte Kommentare hinzufügen, verschieben und zwischen ihnen navigieren (nicht verfügbar in Beta-Versionen).
  • Dev Mode-Annotationen hinzufügen, verschieben und navigieren.

Umschalter

Es gibt jetzt neue Möglichkeiten, Ihr Erlebnis über Figma-Produkte hinweg zu personalisieren, wie zum Beispiel:

  • Das Überschreiben von Figma-exklusiven Tastenkürzeln beim Tippen ausschalten
  • Wählen, ob anderen automatisch mit gesetztem Spotlight gefolgt werden soll

Verbesserte Unterstützung für Bildschirmlesegeräte

Wir verbessern, wie Figma mit unterstützender Technologie arbeitet, damit Benutzer*innen von Bildschirmlesegeräten reibungslos in Dateien navigieren, Objekte der Reihe nach hören und auf dem Laufenden bleiben können, wenn sich etwas ändert. Von konsistenteren und zuverlässigeren Ankündigungen über ausführlichere Objektbeschreibungen bis hin zur Unterstützung formatierter Texte, die es Bildschirmlesegeräten ermöglichen, fettgedruckte oder kursiv geschriebene Worte zu erkennen – diese Verbesserungen machen es leichter, dem Inhalt zu folgen und ihn zu verstehen.

Zu den Aktualisierungen zählen:

  • Aktionsnavigation: Ab sofort erfolgt die Navigation durch interaktive Elemente wie Schaltflächen, Menüs und Panels mit der Tab-Taste in einer logischeren Reihenfolge. Benutzer*innen können direkt zu bestimmten Aktionen springen – wie das Öffnen eines Menüs, zum Auslösen einer Schaltfläche oder zum Auswählen einer Symbolleistenoption.
  • Objektbeschreibungen: Bildschirmlesegeräte geben jetzt detailliertere Informationen zu Objekten aus, beispielsweise zu deren Typ, und Status, damit Benutzer*innen besser verstehen, was sich auf der Arbeitsfläche befindet.
  • Updates bei Ankündigungen: Ankündigungen sind jetzt konsistenter, sodass Benutzer*innen keine wichtigen Änderungen wie neue Kommentare oder Dateiaktualisierungen verpassen.
  • Unterstützung für formatierten Text: Bildschirmlesegeräte behalten jetzt die Formatierung von Rich-Text wie Fett, Kursiv, Listen und Links bei, damit Benutzer*innen keine wichtigen Strukturen und Bedeutungen verlieren.
  • Informationen über Arbeitsflächenobjekten in Buzz und Slides erhalten: Bildschirmlesegeräte können nun Arbeitsflächenobjekte in Buzz und Slides erkennen und ankündigen.

Verbesserter Bildschirmkontrast

Mit einem einfachen Umschalter können Benutzer*innen jetzt den Unterschied zwischen Text, Elementen und ihren Hintergründen im hellen und im dunklen Modus erhöhen. Der verbesserte Farbkontrast erleichtert allen Benutzer*innen die Navigation in Figma durch:

Drei Möglichkeiten, den erhöhten Kontrast zu aktivieren: Über die Barrierefreiheitseinstellungen im Hauptmenü, über das Aktionsmenü oder über die allgemeinen Einstellungen.

  • Verbesserung der Lesbarkeit von Text und Icons
  • Einfachere Übersicht über die Organisation der Benutzeroberfläche und schnelleres Auffinden der benötigten Elemente
  • Deutlichere Hervorhebung von Schaltflächen und Umrissen, wenn du mit der Maus darüber fährst oder mit ihnen interagierst.
  • Verbesserte Sichtbarkeit bei Blendung und Sonnenlicht
  • Schnelleres Scannen und Neuorientieren beim Multitasking

Die feinen Unterschiede zwischen normalem Kontrast und verbessertem Farbkontrast können einen großen Unterschied machen, insbesondere bei längerem Bildschirmkontakt.

Figma-Design-Datei mit einem 3×3-Fotoraster von Gärten und Architektur mit geringerem Kontrast und sichtbaren Layouteinstellungen.Figma-Design-Datei mit einem 3×3-Fotoraster von Gärten und Architektur mit geringerem Kontrast und sichtbaren Layouteinstellungen.
Kontrastarme Grautöne auf weißem Hintergrund erschweren das Erkennen von Text und Icons und belasten die Augen.
Aktualisierte Figma-Oberfläche, die dasselbe 3×3-Gartenfoto-Raster mit höherem Kontrast und denselben Layoutoptionen zeigt.Aktualisierte Figma-Oberfläche, die dasselbe 3×3-Gartenfoto-Raster mit höherem Kontrast und denselben Layoutoptionen zeigt.
Dunklere Grautöne, stärkere Hervorhebungen und klare Umrisse machen die UI leichter lesbar und übersichtlicher.

Verbesserungen der Barrierefreiheit bei Figma Sites

Tipps zur Verbesserung der Barrierefreiheit Ihrer Sites:

Füge Bildern, die eine Beschreibung benötigen, Alternativtext hinzu oder kennzeichne sie als dekorativ.

Setze das korrekte HTML-Tag.

Füge Beschriftungen hinzu, wenn sichtbarer Text fehlt oder undeutlich ist.

Kennzeichne rein dekorative Elemente als ausgeblendet.

Verwende das Farbkontrast-Tool in der Farbauswahl, um die Lesbarkeit zu verbessern.

Durch Aktionen wie das Anwenden der richtigen HTML-Tags und Barrierefreiheitseigenschaften auf jedes Element in deinem Design kannst du mit Figma Sites eine Website erstellen, die für diejenigen, die auf Bildschirmlesegeräte oder Tastaturnavigation angewiesen sind, einfacher zu verwenden ist.

Unsere Verbesserungen der Barrierefreiheit bei Figma Sites umfassen:

  • Wende neue ARIA (Accessible Rich Internet Applications)-Eigenschaften an, die über HTML hinausgehenden Kontext hinzufügen, und zeige die entsprechenden HTML-Tags im Ebenen-Tab an.
  • Bearbeite Barrierefreiheitsoptionen wie Alternativtext, Beschriftungen und Rollen direkt im Eigenschaftenpanel, um einfacher sicherzustellen, dass deine Site barrierefrei ist.

Zusammen machen erleichtern diese Updates das Entwerfen und Veröffentlichen von Websites, die standardmäßig barrierefreier und inklusiver sind.

Um mehr über unsere neuesten Updates zur Barrierefreiheit zu erfahren, besuche unser neues Hilfe-Center für Barrierefreiheit.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen