Tips voor toegankelijkheid voor adaptieve kaarten

Copilot Studio-agents werken goed met schermlezers in Windows, zoals NonVisual Desktop Access (NVDA) en Taaktoegang met Spraak (JAWS). Bekijk deze tips om de toegankelijkheid te optimaliseren.

Schermlezers

Voor de toegankelijkheid van adaptieve kaarten voor schermlezers en toetsenbordnavigatie is dit belangrijk.

• Neem altijd de eigenschap label op: de eigenschap Label is wat schermlezers aankondigen wanneer een gebruiker zich richt op een invoer. Zonder deze optie kunnen schermlezers 'veld bewerken' zonder context zeggen. Schermlezers lezen vaak geen tijdelijke aanduidingen en verdwijnen zodra de gebruiker begint te typen. Vermijd daarom dat u erop vertrouwt om u te helpen met toegankelijkheid.

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

• Gebruik 'inputStyle' en 'style' zorgvuldig: Vermijd aangepaste stijl waarmee focusindicatoren worden verwijderd. De standaardfocusring is waar toetsenbordgebruikers op vertrouwen om te weten waar ze zich op de kaart bevinden.

• Gebruik 'isRequired' en 'errorMessage' voor lezers: Zelfs voor optionele velden helpt een duidelijke "errorMessage" schermlezers om feedback over validatie te communiceren.

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

• Logische tabvolgorde: Adaptieve kaarten volgen de dom-volgorde (Document Object Model) voor tabnavigatie, dus structureer de JSON-weergave van uw kaart in de volgorde waarin u wilt dat gebruikers door tabs gaan. Vermijd het gebruik van 'ColumnSet'-indelingen die een visueel logische volgorde maken, maar een verwarrende tabvolgorde voor toetsenbordgebruikers.

• Actieknoppen zijn standaard toegankelijk via het toetsenbord: eigenschappen zoals 'Action.Submit' en 'Action.OpenUrl' zijn systeemeigen focusbaar. Zorg ervoor dat uw titel beschrijvend is in plaats van iets vaags als 'Klik hier' omdat schermlezers de titel hardop voorlezen.

• Voeg 'type' toe: 'TextBlock' voor instructies: Als een sectie met optionele velden context nodig heeft, stelt u 'type' in als 'TextBlock' voor die velden. Schermlezers lezen velden op volgorde, zodat gebruikers de context hebben die ze nodig hebben voordat ze de invoer bereiken.

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

• Vermijd 'isVisible': 'false' voor toegankelijkheidsscenario's: schermlezers slaan verborgen elementen volledig over. Als toegankelijkheid de prioriteit is, houdt u optionele velden zichtbaar. Als u ze moet verbergen, moet u ervoor zorgen dat de wisselknop een duidelijk, beschrijvend label heeft.

• Pro tip voor testen in Microsoft Teams: Vanwege kleine verschillen in Microsoft Teams-ondersteuning voor adaptieve kaarten, raden we u aan de ingebouwde Windows Verteller of NVDA te gebruiken om de tabvolgorde te valideren en die aankondigingen werken zoals verwacht.

Specifieke schema-eigenschappen

Hier volgen enkele specifieke eigenschappen in het schema adaptieve kaarten waarmee de toegankelijkheid kan worden verbeterd.

De eigenschap 'label'

De eigenschap Label is essentieel voor schermlezers. Door een verbinding tussen labels en invoer te hebben, kunnen rendererbibliotheken de benodigde eigenschappen instellen zodat gebruikers van ondersteunende technologieën, zoals schermlezers, correct kunnen communiceren met invoer in adaptieve kaarten.

Meer informatie vindt u in Input.Text.

Waarom is 'label' beter dan 'plaatsaanduiding' voor toegankelijkheid?

U wordt aangeraden de eigenschap label te gebruiken in plaats van de eigenschap placeholder voor het taggen van invoerparameters voor adaptieve kaarten. Het is een eenvoudige en beknopte manier om invoer voor kaartauteurs te labelen.

Als u de eigenschappen 'TextBlock' gebruikt als labels, voorkomt u dat u de nabijheid tussen invoer en labels afdwingt. Met behulp van de eigenschap "label" kunt u ervoor zorgen dat beide visuele elementen naast elkaar worden weergegeven, wat helpt bij gebruikers die schermvergroters nodig hebben.

Meer informatie over invoervalidatie.

'errorMessage' gebruiken voor validatiefeedback

De eigenschap errorMessage is beschikbaar voor alle invoertypen om het bericht op te geven dat moet worden weergegeven wanneer een gebruiker een waarde invoert die niet geldig is.

Meer informatie over invoervalidatie.

TextBlock met 'style': 'heading' voor toegankelijkheidsstructuur

Met 'style': 'heading' wordt de standaardstijl voor kopteksten toegepast en wordt het TextBlock-element gemarkeerd als kop voor toegankelijkheid.

Meer informatie vindt u in het TextBlock-element.

Actieknoppen: tooltips voor narratie

De actie Action.ToggleVisibility ondersteunt een eigenschap tooltip waarmee tekst wordt gedefinieerd die wordt weergegeven wanneer de gebruiker de muisaanwijzer op de actie plaatst. Voorleessoftware leest deze tekst.

Meer informatie vindt u in Action.ToggleVisibility.

Let op met 'isVisible': 'false' voor invoerelementen

Houd invoerelementen zichtbaar met validatie. Invoerelementen met validatie onder Action.ToggleVisibility kunnen verwarring veroorzaken wanneer verborgen invoerparameters niet geldig zijn.

Meer informatie vindt u in Action.ToggleVisibility.

De eigenschap labelPosition voor Input.ChoiceSet

Voor Input.ChoiceSet bepaalt de eigenschap labelPosition de positie van het label, hetzij inline of hoger (standaard).

Meer informatie vindt u in Input.ChoiceSet.