Tilgjengelighetstips for dynamiske kort

Copilot Studio-agenter fungerer bra med skjermlesere i Windows, for eksempel NonVisual Desktop Access (NVDA) og Job Access with Speech (JAWS). Vurder disse tipsene for å optimalisere tilgjengeligheten.

Skjermlesere

Når det gjelder tilgjengelighet for skjermlesere og tastaturnavigasjon i Dynamiske kort, er dette det viktigste:

  • Ta alltid med egenskapen "label": Egenskapen "label" er den skjermlesere leser opp når en bruker fokuserer på et inndataelement. Uten denne sier kanskje skjermlesere bare "redigeringsfelt" uten noe kontekst. Skjermlesere leser ofte ikke plassholdere, og de forsvinner når brukeren begynner å skrive. Unngå derfor å bruke dem til å hjelpe med tilgjengelighet.

    {
      "type": "Input.Text",
      "id": "middleName",
      "label": "Middle name (optional)",
      "placeholder": "Enter your middle name"
    }
    
  • Bruk "inputStyle" og "style" med omhu: Unngå egendefinert stil som fjerner fokusindikatorer. Tastaturbrukere er avhengige av standard fokusring for å orientere seg på kortet.

  • Bruk "isRequired" og ""errorMessage" for skjermlesere: Selv for valgfrie felter hjelper en tydelig "errorMessage" skjermlesere med å meddele tilbakemelding om validering.

    {
      "type": "Input.Text",
      "id": "middleName",
      "label": "Middle name (optional)",
      "isRequired": false,
      "errorMessage": "Please enter a valid middle name"
    }
    
  • Logisk tabulatorrekkefølge: Dynamiske kort følger DOM-rekkefølgen (Document Object Model) ved tabulatornavigasjon, så strukturer JSON-representasjonen av kortet ditt i rekkefølgen du ønsker at brukerne skal flytte seg gjennom med tabulatortasten. Unngå å bruke "ColumnSet"-oppsett som skaper en visuelt logisk rekkefølge, men en forvirrende tabulatorrekkefølge for tastaturbrukere.

  • Handlingsknapper er tilgjengelige med tastaturet som standard: Egenskaper som "Action.Submit" og "Action.OpenUrl" er opprinnelig fokuserbare. Sørg for at tittelen din er beskrivende og ikke noe vagt som "Klikk her", fordi skjermlesere leser tittelen høyt.

  • Legg til "type": "TextBlock" for instruksjoner: Hvis en inndeling med valgfrie felter trenger kontekst, setter du "type" som "TextBlock" før disse feltene. Skjermlesere leser felter i rekkefølge og gir brukerne konteksten de trenger før de når inndataelementene.

    {
      "type": "TextBlock",
      "text": "The following fields are optional. You can skip them if not applicable.",
      "wrap": true
    }
    
  • Unngå "isVisible": "false" i tilgjengelighetsscenarioer: Skjermlesere ignorerer skjulte elementer fullstendig. Hvis tilgjengelighet er prioriteten, holder du valgfrie felter synlige. Hvis du må skjule dem, sørger du for at veksleknappen har en tydelig, beskrivende etikett.

  • Tips for testing i Microsoft Teams: På grunn av små forskjeller i Microsoft Teams-støtte for Dynamiske kort anbefaler vi at du bruker innebygde Windows Narrator eller NVDA til å validere tabulatorrekkefølgen og sikre at kunngjøringer fungerer som forventet.

Spesifikke skjemaegenskaper

Her er noen spesifikke egenskaper i Dynamiske kort-skjemaet som kan bidra til å forbedre tilgjengeligheten.

Egenskapen "label"

Egenskapen "label" er avgjørende for skjermlesere. Når det er en tilkobling mellom etiketter og inndataelementer, kan gjengivelsesbiblioteker angi de nødvendige egenskapene for å la brukere av hjelpemidler, for eksempel skjermlesere, samhandle riktig med inndataelementer i Dynamiske kort.

Finn ut mer i Input.Text.

Hvorfor er "label" bedre enn "placeholder" for tilgjengelighet?

Vi anbefaler å bruke egenskapen "label" til å merke Dynamiske kort-inndataparametere, i stedet for egenskapen "placeholder". Det er en enkel og kortfattet måte å merke inndataelementer for kortforfattere på.

Bruk av egenskapen "TextBlock" som etiketter gjør at du ikke kan håndheve nærhet mellom inndataelementer og etiketter. Når du bruker egenskapen "label", kan du sikre at begge visuelle elementer gjengis side om side, som hjelper brukere med skjermforstørring.

Finn ut mer i Inndatavalidering.

Bruk "errorMessage" til tilbakemelding om validering

Egenskapen "errorMessage" er tilgjengelig for alle inndatatyper for å spesifisere hvilken melding som skal vises når en bruker oppgir en verdi som ikke er gyldig.

Finn ut mer i Inndatavalidering.

TextBlock med "style": "heading" for tilgjengelighetsstruktur

Når du bruker "style": "heading", brukes standard overskriftsstil og TextBlock-elementet merkes som en overskrift for tilgjengelighet.

Finn ut mer i TextBlock.

Handlingsknapper – "tooltip" for skjermleser

Handlingen "Action.ToggleVisibility" støtter en "tooltip"-egenskap som definerer tekst som vises når brukeren holder musepekeren over handlingen. Skjermlesere leser denne teksten.

Finn ut mer i Action.ToggleVisibility.

Vær forsiktig med "isVisible": "false" for inndataelementer

Hold inndataelementer med validering synlige. Inndataelementer med validering under "Action.ToggleVisibility" kan skape forvirring når skjulte inndataparametere ikke er gyldige.

Finn ut mer i Action.ToggleVisibility.

Egenskapen labelPosition for Input.ChoiceSet

For "Input.ChoiceSet" bestemmer egenskapen "labelPosition" posisjonen til etiketten, enten innebygd eller ovenfor (standard).

Finn ut mer i Input.ChoiceSet.