Toegankelijkheidstips voor adaptieve kaarten

Copilot Studio-agenten werken goed met schermlezers in Windows, zoals NonVisual Desktop Access (NVDA) en Job Access with Speech (JAWS). Houd rekening met deze tips om de toegankelijkheid te optimaliseren.

Schermlezers

Dit zijn de belangrijkste punten voor de toegankelijkheid van Adaptieve kaarten bij gebruik van een schermlezer en toetsenbordnavigatie.

• Neem altijd de eigenschap 'label' op: de eigenschap 'label' is wat schermlezers aankondigen wanneer een gebruiker focust op invoer. Zonder het label zullen schermlezers mogelijk alleen 'bewerkingsveld' zeggen, zonder verdere context. Schermlezers lezen vaak geen tijdelijke aanduidingen. Deze verdwijnen ook zodra de gebruiker begint te typen. Vertrouw daarom niet hierop om de toegankelijkheid te verbeteren.

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

• Gebruik 'inputStyle' en 'style' zorgvuldig: vermijd aangepaste opmaak 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 validatiefeedback te geven.

  {
    "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 gebruikers moeten navigeren met de Tab-toets. Vermijd het gebruik van indelingen van het type 'ColumnSet' 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 van nature te focussen. Zorg dat uw titel beschrijvend is en niet iets vaags zoals 'Klik hier', aangezien schermlezers de titel hardop voorlezen.

• Voeg 'type': 'TextBlock' toe voor instructies: als een sectie met optionele velden extra context vereist, plaatst u een 'TextBlock' vóór die velden. Schermlezers doorlopen de velden één voor één, zodat gebruikers de context krijgen die ze nodig hebben voordat ze de invoervelden 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 prioriteit heeft, moet u optionele velden zichtbaar houden. Als u ze moet verbergen, zorgt u dat de schakelaar een duidelijk, beschrijvend label heeft.

• Tip van professionals voor testen in Microsoft Teams: vanwege kleine verschillen in Microsoft Teams-ondersteuning voor Adaptieve kaarten adviseren we om het ingebouwde Windows Verteller of NVDA te gebruiken om de tabvolgorde te valideren en te controleren of aankondigingen correct functioneren.

Specifieke schema-eigenschappen

Hier zijn enkele specifieke eigenschappen in het Adaptieve kaarten-schema die kunnen helpen om de toegankelijkheid te verbeteren.

De eigenschap 'label'

De eigenschap 'label' is cruciaal voor schermlezers. Door labels aan invoervelden te koppelen, kunnen weergavebibliotheken de benodigde eigenschappen instellen zodat gebruikers van ondersteunende technologieën, zoals schermlezers, op de juiste manier met invoervelden in Adaptieve kaarten kunnen werken.

Meer informatie vindt u in Input.Text.

Waarom 'label' beter is dan 'placeholder' 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 invoervelden te labelen voor kaartontwerpers.

Het gebruik van TextBlock-eigenschappen als labels verhindert dat u de nabijheid tussen invoervelden en labels kunt afdwingen. Door gebruik te maken van de eigenschap 'label', kunt u ervoor zorgen dat beide visuele elementen naast elkaar worden weergegeven, wat gebruikers helpt die schermvergrootglazen nodig hebben.

Lees meer in Invoervalidatie.

'errorMessage' gebruiken voor validatiefeedback

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

Lees meer in Invoervalidatie.

TextBlock met 'style': 'heading' voor toegankelijkheidsstructuur

Het gebruik van 'style': 'heading' past de standaardkopstijl toe en markeert het TextBlock-element als een kop voor toegankelijkheid.

Meer informatie vindt u in TextBlock.

Actieknoppen: 'toolinfo' voor gesproken tekst

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

Meer informatie vindt u in Action.ToggleVisibility.

Ga zorgvuldig te werk met 'isVisible': 'false' voor invoerelementen

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

Meer informatie vindt u in Action.ToggleVisibility.

De eigenschap 'labelPosition' voor Input.ChoiceSet

Voor 'Input.ChoiceSet' bepaalt de eigenschap 'labelPosition' of het label inline of boven (standaard) wordt weergegeven.

Lees meer in Input.ChoiceSet.