Tillgänglighetstips för adaptiva kort

Copilot Studio-agenter fungerar bra med skärmläsare på Windows, såsom NonVisual Desktop Access (NVDA) och Job Access with Speech (JAWS). För att optimera tillgängligheten, överväg dessa tips.

Skärmläsare

När det gäller tillgänglighet för skärmläsare och tangentbordsnavigering i Adaptiva kort är detta det viktigaste:

• Inkludera alltid "label"-egenskapen: "label"-egenskapen är vad skärmläsare läser upp när en användare fokuserar på ett inmatningsfält. Utan det kan skärmläsare bara säga "redigeringsfält" utan någon kontext. Skärmläsare läser ofta inte platshållare, och de försvinner när användaren börjar skriva. Undvik därför att förlita dig på dem för att hjälpa till med tillgängligheten.

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

• Använd "inputStyle" och "style" med eftertanke: Undvik anpassad styling som tar bort fokusindikatorer. Standardfokusringen är den som tangentbordsanvändare förlitar sig på för att veta var de är på kortet.

• Använd egenskaperna "isRequired" och "errorMessage" för skärmläsare: Även för valfria fält hjälper ett tydligt "errorMessage" skärmläsare att förmedla valideringsfel.

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

• Logisk tabbordning: Adaptiva kort följer Document Object Model (DOM)-ordningen för fliknavigering, så strukturera JSON-representationen av ditt kort i den ordning du vill att användarna ska tabba. Undvik att använda "ColumnSet"-layouter som skapar en visuellt logisk ordning men en förvirrande tabbordning för tangentbordsanvändare.

• Åtgärdsknappar är som standard tillgängliga för tangentbordsanvändare: Egenskaper som "Action.Submit" och "Action.OpenUrl" är nativt fokuserbara. Se till att din titel är tydlig och inte något vagt som "Klicka här", eftersom skärmläsare läser upp titeln högt.

• Lägg till "type": "TextBlock" för instruktioner: Om ett avsnitt med valfria fält behöver sammanhang, sätt "type" som "TextBlock" före dessa fält. Skärmläsare läser fält i följd och ger användarna det sammanhang de behöver innan de når fälten.

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

• Undvik "isVisible": "false" i tillgänglighetsrelaterade scenarier: Skärmläsare ignorerar dolda element helt och hållet. Om tillgänglighet är en prioritet, håll de valfria fälten synliga. Om du måste dölja dem, se till att växlingsknappen har en tydlig, beskrivande etikett.

• Proffstips för testning i Microsoft Teams: På grund av små skillnader i stödet för Adaptiva kort i Microsoft Teams rekommenderar vi att du använder inbyggda Windows Narrator eller NVDA för att validera flikordningen och att annonseringar fungerar som förväntat.

Specifika schemaegenskaper

Här är några specifika egenskaper i Adaptiva kort-schemat som kan hjälpa till att förbättra tillgängligheten.

"Label"-egenskapen

Egenskapen "label" är avgörande för skärmläsare. Genom att koppla etiketter till fält kan renderingsbibliotek konfigurera de egenskaper som behövs för att användare av hjälpmedelsteknologier, såsom skärmläsare, ska kunna interagera korrekt med fält i Adaptiva kort.

Läs mer i Input.Text.

Varför föredras "etikett" framför "platshållare" ur ett tillgänglighetsperspektiv?

Vi rekommenderar att använda egenskapen "label" för att märka inmatningsparametrar i Adaptiva kort, istället för egenskapen "placeholder". Det är ett enkelt och koncist sätt att märka indata för kortförfattare.

Om du använder "TextBlock"-egenskaper som etiketter kan du inte garantera närhet mellan inmatningsfält och etiketter. Genom att använda egenskapen "label" kan du säkerställa att båda visuella elementen visas bredvid varandra, vilket hjälper användare som behöver skärmförstorare.

Läs mer i Inputvalidering.

Använd errorMessage för valideringsfeedback

Egenskapen "errorMessage" finns tillgänglig för alla inmatningstyper för att specificera meddelandet som visas när en användare anger ett värde som inte är giltigt.

Läs mer i Inputvalidering.

Textblock med "style": "heading" för tillgänglighetsstruktur

Genom att använda "style": "heading" appliceras standardrubrikstil och TextBlock-elementet markeras som en rubrik för tillgänglighet.

Läs mer i TextBlock.

Åtgärdsknappar—"tooltip" för skärmläsare

Åtgärden "Action.ToggleVisibility" stöder egenskapen "tooltip" som definierar text som visas när användaren håller muspekaren över åtgärden. Berättarprogramvaran läser denna text.

Läs mer i Action.ToggleVisibility.

Varning med "isVisible": "false" för indataelement

Håll indataelement med validering synliga. Indataelement med validering under "Action.ToggleVisibility" kan leda till förvirring om dolda inmatningsparametrar inte är giltiga.

Läs mer i Action.ToggleVisibility.

"labelPosition"-egenskapen för Input.ChoiceSet

För "Input.ChoiceSet" styr egenskapen "labelPosition" etikettens placering, antingen inline eller ovanför (som standard).

Läs mer om Input.ChoiceSet.