調適型卡片的協助工具提示

Copilot Studio Agent 與 Windows 上的螢幕助讀程式搭配良好，例如 NonVisual Desktop Access (NVDA)及 Job Access with Speech (JAWS)。 為了最佳化協助工具，請考慮以下提示。

螢幕助讀程式

就調適型卡片的螢幕助讀程式和鍵盤瀏覽協助功能而言，以下是最重要且需優先考慮的部分。

  • 一律包含「label」屬性：「label」屬性是當使用者聚焦於輸入欄位時，螢幕助讀程式會宣讀的內容。 沒有它，螢幕助讀程式可能只會說「編輯欄位」，卻沒有上下文。 螢幕助讀程式通常不會讀取預留位置，且在使用者開始輸入後，預留位置就會消失。 因此，請勿依賴預留位置來協助提供無障礙環境。

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

  • 謹慎使用「inputStyle」和「style」：避免使用會移除焦點指示器的自訂樣式。 預設焦點環是鍵盤使用者用來了解自己在卡片上位置的依據。

  • 為螢幕助讀程式使用「isRequired」和「errorMessage」：即使是選用欄位，明確的「errorMessage」也會協助螢幕助讀程式傳達確認意見反應。

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

  • 邏輯索引標籤順序：調適型卡片的索引標籤瀏覽會依照文件物件模型 (DOM) 的順序進行，因此請根據您希望使用者索引標籤瀏覽的順序來結構化卡片的 JSON 呈現方式 。 避免使用「ColumnSet」配置，因為這些配置會產生視覺上合理的順序，但對鍵盤使用者來說是會造成混淆的索引標籤順序。

  • 動作按鈕預設是鍵盤可存取的：像是「Action.Submit」和「Action.OpenUrl」這類屬性是原生可設定焦點的。 請確保您的標題具描述性，而不是像「按一下此處」這樣模糊的標題，因為螢幕助讀程式會朗讀標題內容。

  • 新增「type」："TextBlock" 作為指令：若某區段選用欄位需要上下文，請於這些欄位之前設定「type」為「TextBlock」。 螢幕助讀程式會依序朗讀欄位，讓使用者在開始輸入資料前獲得所需的上下文。

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

  • 避免在協助工具案例中使用 "isVisible": "false"：螢幕助讀程式會完全略過隱藏元素。 如果協助工具是優先考量，請保持選用欄位可見。 如果必須隱藏，請確保切換開關有明確且具描述性的標籤。

  • 在 Microsoft Teams 中測試的專業建議：由於 Microsoft Teams 對調適型卡片的支援略有差異，我們建議您使用內建的 Windows 朗讀程式或 NVDA 來確認索引標籤順序，並確保公告工作能如預期運作。

特定結構描述屬性

以下是調適型卡片結構描述中一些能幫助提升無障礙性的具體屬性。

「label」屬性

「label」屬性對螢幕助讀程式非常重要。 透過標籤與輸入之間的連線，轉譯器程式庫能設定必要的屬性，讓使用輔助科技 (如螢幕助讀程式) 的使用者能正確地與調適型卡片內的輸入互動。

如需詳細資訊，請參閱 Input.Text。

為什麼對於提升無障礙性，「label」屬性優於「placeholder」屬性？

我們建議使用「label」屬性來標記調適型卡片的輸入參數，而非「placeholder」屬性。 這是卡片作者標示輸入欄位的一種簡單又簡潔的方式。

使用 "TextBlock" 屬性做為標籤會讓您無法強制輸入與標籤之間的近接。 透過使用「label」屬性，您可以確保輸入這兩個視覺效果元素並排顯示，可以協助需要螢幕放大鏡的使用者。

如需了解更多，請參閱輸入確認。

使用「errorMessage」來提供確認意見反應

「errorMessage」屬性適用於所有輸入類型，能指定當使用者輸入無效值時要顯示的訊息。

如需了解更多，請參閱輸入確認。

搭配 "style": "heading" 用於協助工具結構的 TextBlock

使用「style」：「heading」可套用預設標題樣式，並將 TextBlock 元素標記為標題，以提升無障礙結構。

在 TextBlock 中了解詳細資訊。

動作按鈕—用於輔助敘述的「工具提示」

「Action.ToggleVisibility」動作支援一個「tooltip」屬性，可定義使用者將滑鼠游標懸停在動作上時會出現的文字。 語音旁白軟體會讀取這段文字。

在 Action.ToggleVisibility 中了解詳細資訊。

將 "isVisible": "false" 用於輸入元素時，請小心

保持具有確認的輸入元素可見。 在「Action.ToggleVisibility」底下具有確認的輸入元素，若隱藏的輸入參數無效，可能會造成混淆。

在 Action.ToggleVisibility 中了解詳細資訊。

Input.ChoiceSet 的「labelPosition」屬性

對於「Input.ChoiceSet」，「labelPosition」屬性決定標籤的位置，可以是內嵌或上方 (預設值)。

如欲深入了解，請參閱 Input.ChoiceSet。

  • 上次更新時間：