Tipps zur Barrierefreiheit für adaptive Karten

Copilot Studio Agenten arbeiten gut mit Bildschirmlesern unter Windows, wie NonVisual Desktop Access (NVDA) und Job Access with Speech (JAWS). Zur Optimierung der Barrierefreiheit beachten Sie die folgenden Tipps.

Sprachausgabe

Für die Barrierefreiheit von Bildschirmlesern und Tastaturnavigation bei Adaptiven Karten ist das am wichtigsten.

• Stets die Eigenschaft „Beschriftung“ hinzufügen: Die Eigenschaft „Beschriftung“ ist das, was Bildschirmleser ankündigen, wenn ein Benutzer den Fokus auf ein Eingabefeld setzt. Ohne würden Anzeigenleser lediglich „Bearbeitungsfeld“ ohne weiteren Kontext vorlesen. Anzeigenleser lesen „Platzhalter“ häufig nicht aus, und diese verschwinden, sobald der Nutzer zu tippen beginnt. Verlassen Sie sich daher nicht darauf, dass Platzhalter die Barrierefreiheit unterstützen.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "placeholder": "Enter your middle name"
  }
  

• Verwenden Sie „inputStyle“ und „style“ mit bedacht: Vermeiden Sie benutzerdefiniertes Styling, das Fokusindikatoren entfernt. Tastaturbenutzer benutzen den Standardfokusring, um zu wissen, wo sie sich auf dem Bildschirm befinden.

• Verwenden Sie „isRequired“ und „errorMessage“ gezielt für Screenreader: Selbst bei optionalen Feldern ermöglicht eine klare „errorMessage“ Screenreadern, Validierungsfeedback weiterzugeben.

  {
    "type": "Input.Text",
    "id": "middleName",
    "label": "Middle name (optional)",
    "isRequired": false,
    "errorMessage": "Please enter a valid middle name"
  }
  

• Logische Registerkarte-Reihenfolge: „Adaptive Karten“ folgen der Reihenfolge des Document Object Model (DOM) für die Registerkarten-Navigation. Strukturieren Sie daher die JSON-Darstellung Ihrer Karte so, dass Nutzer in der gewünschten Reihenfolge mit der Tabulatortaste durch die Felder navigieren können. Vermeiden Sie „ColumnSet“-Layouts, die eine visuell logische Reihenfolge bieten, aber eine verwirrende Registerkarten-Reihenfolge für Tastaturbenutzer erzeugen.

• Aktionsschaltflächen sind standardmäßig mit der Tastatur bedienbar: Eigenschaften wie „Action.Submit“ und „Action.OpenUrl“ sind nativ markierbar. Achten Sie darauf, dass Ihr Titel beschreibend ist und nicht etwas vages wie „Hier klicken“, denn Screenreader lesen den Titel laut vor.

• Nutzen Sie „type“: „TextBlock“ für Hinweise: Wenn ein Abschnitt mit optionalen Feldern Kontext benötigt, setzen Sie „type“ als „TextBlock“ vor diesen Feldern. Sprachausgaben lesen Felder der Reihe nach, sodass Benutzer den Kontext erhalten, den sie brachen, bevor sie die Eingaben erreichen.

  {
    "type": "TextBlock",
    "text": "The following fields are optional. You can skip them if not applicable.",
    "wrap": true
  }
  

• Vermeiden Sie „isVisible“: „false“ für Szenarien der Barrierefreiheit: Screenreader überspringen versteckte Elemente vollständig. Wenn Barrierefreiheit Priorität hat, lassen Sie optionale Felder sichtbar. Wenn Sie sie ausblenden müssen, stellen Sie sicher, dass der Umschalter eine klare, beschreibende „Beschriftung“ hat.

• Profi-Tipp für das Testen in Microsoft Teams: Aufgrund leichter Unterschiede in der Microsoft Teams-Unterstützung für Adaptive Karten empfehlen wir, die integrierte Windows-Sprachausgabe oder NVDA zu verwenden, um die Registerkarten-Reihenfolge zu validieren und sicherzustellen, dass die Ankündigungen wie erwartet funktionieren.

Spezifische Schema-Eigenschaften

Hier sind einige spezifische Eigenschaften im Adaptive Karten-Schema, die die Zugänglichkeit verbessern können.

Die Eigenschaft „Beschriftung“

Die „Beschriftung“-Eigenschaft ist für Anzeigenleser entscheidend. Durch eine Verbindung zwischen Beschriftung und Eingaben können Renderer-Bibliotheken die notwendigen Eigenschaften einstellen, damit Nutzer von Hilfstechnologien wie Bildschirmlesern korrekt mit Eingaben innerhalb von Adaptiven Karten interagieren können.

Weitere Informationen finden Sie in Input.Text.

Warum hat „Beschriftung“ Vorrang vor dem „Platzhalter“ bei der Barrierefreiheit?

Wir empfehlen, die Eigenschaft „Beschriftung“ zum Taggen der Eingabeparameter von Adaptiven Karten zu verwenden, anstatt der Eigenschaft „Platzhalter“. Es ist eine einfache und prägnante Möglichkeit, Eingabefelder für Kartenautoren zu beschriften.

Die Verwendung von „TextBlock“-Eigenschaften als Beschriftungen verhindert, dass Sie die Nähe zwischen Eingabefeldern und Beschriftungen erzwingen können. Mithilfe der Eigenschaft „Beschriftung“ können Sie sicherstellen, dass beide visuellen Elemente nebeneinander gerendert werden, wodurch Benutzer, die Bildschirmlupen benötigen, unterstützt werden.

Erfahren Sie mehr unter Eingabevalidierung.

Verwenden Sie „errorMessage“ für Validierungsfeedback

Die Eigenschaft „errorMessage“ steht für alle Eingabetypen zur Verfügung und legt fest, welche Nachricht angezeigt wird, wenn ein Benutzer einen ungültigen Wert eingibt.

Erfahren Sie mehr unter Eingabevalidierung.

TextBlock mit dem „Stil“: „Überschrift“ für die Struktur der Barrierefreiheit

Die Verwendung von „style“: „heading“ wendet den Standard-Stil für Überschriften an und kennzeichnet das TextBlock-Element als Überschrift für die Barrierefreiheit.

Weitere Informationen: TextBlock.

Aktions-Schaltflächen – „Quickinfo“ für die Erzählung

Die Aktion „Action.ToggleVisibility“ verfügt über die Eigenschaft „Quickinfo“, die Text bereitstellt, der erscheint, wenn der Benutzer mit der Maus über die Schaltfläche fährt. Die Erzählsoftware liest diesen Text.

Weitere Informationen finden Sie in Action.ToggleVisibility.

Vorsicht bei „isVisible“: „false“ für Eingabeelemente

Stellen Sie sicher, dass Eingabeelemente mit Validierung sichtbar bleiben. Eingabeelemente mit Validierung unter „Action.ToggleVisibility“ können zu Verwirrung führen, wenn ausgeblendete Eingabeparameter nicht gültig sind.

Weitere Informationen finden Sie in Action.ToggleVisibility.

Die Eigenschaft „labelPosition“ bei Input.ChoiceSet

Bei „Input.ChoiceSet“ legt die Eigenschaft „labelPosition“ die Position des Labels fest, entweder inline oder darüber (Standard).

Erfahren Sie mehr in Input.ChoiceSet.