可访问性

该 SDK 能够支持您确保结账页面至少满足 WCAG 标准的 AA 等级。

SDK 为特定属性提供一些默认值，但它们也可以完全定制。在初始化时设置您的可访问性配置。

语言

您可以设置 lang 以指定元素的语言及其所有的子元素。

默认情况下，lang属性已禁用。启用它即可使用 en-US 的预设默认值。

您还可以将 locale 设为 BCP47 语法支持的任何语言，从而选择将其设为自定义语言。若要设置自定义 lang，您还必须将默认的 enabled 设置覆盖至 true。

Aria 标签

aria-label 属性的目的是为可能没有可见标签的对象提供可识别的名称。

默认情况下，每个输入字段都按如下设置 aria-label：

将 enabled 设为 false 可防止 SDK 在输入字段上设置任何 Aria 标签。或者，可以将自定义值传递到可访问性配置，以便覆盖一个、全部或任意数量的默认值。

标题

title 属性用于为元素提供咨询信息，并生成在鼠标悬浮于元素上方时显示的工具提示。

默认情况下，title属性已禁用。启用它即可使用预设默认值，或者单独设置每个输入字段的标题。若要设置自定义 title，您还必须将默认的 enabled 设置覆盖至 true。

示例集成

以下是可访问性配置的示例，其中为每个可能的值都提供了自定义值。无需单独提供每个值。如果只传送选定的自定义值，则未提供的值将保留其默认值。

accessibility: {
      ariaLabel: {
        enabled: "true",
        pan: "my custom aria label for pan input",
        expiry: "my custom aria label for expiry input",
        cvv: "my custom aria label for cvv input"
      },
      lang: {
        enabled: "true",
        locale: "en-GB"
      },
      title: {
        enabled: "true",
        pan: "my custom title for pan",
        expiry: "my custom title for expiry date",
        cvv: "my custom title for security code"
      }
    }

附加建议

除了 SDK 可访问性配置自定义外，我们还有一些建议，以帮助您的商户页面满足 WCAG 标准的 AA 评级。

在 SDK 字段周围显示焦点指标

若要显示焦点指标，请为您的表格字段定义 is-onfocus 类中的 outline CSS 属性。

.card .checkout .field.is-onfocus {
  outline: 3px solid #34ebde;
}

使用颜色和图标来识别无效字段

若要更改无效字段的文本颜色，请在样式配置的 input.is-invalid 属性中定义 color CSS 属性。

styles: {
  "input.is-invalid": {
    "color": "red"
  }
}

若要显示无效字段的图标，可侦听 wp:field:change 事件并相应地指定样式。

form.addEventListener("wp:field:change", function (event) {
  if (event.detail["is-valid"] === false) {
    // code to display your invalid field icon
  } else {
    // code to remove your invalid field icon
  }
});

显示包含描述性文本的无效字段列表。

侦听 wp:field:change 事件并跟踪哪些字段是无效的。

在提交表格时，显示文本以表明哪些字段是无效的。

我们建议您在表格上方的列表中显示每个文本描述并提供建议的更正。