PayFields - WCAG Compliance

To improve web accessibility, better support users with disabilities, and align with Web Content Accessibility Guidelines (WCAG) best practices, you can enable <label> elements in the PayFields iframe with Frame Labels. By implementing this update, your PayFields become more accessible and compliant with WCAG standards, enhancing user experience and ensuring your forms are user-friendly.

Enabling Frame Labels

To use this feature, include the following line in your JavaScript <script> tag configuration:

JS

PayFields.customizations.useFrameLabels = true;

Once enabled, PayFields renders labels corresponding to each input field. This ensures that each input field is clearly labeled upon activation, enhancing user experience and accessibility.

To align with WCAG best practices, all address fields are grouped within the <fieldset> tag.

Customizing Labels

The following sections describe how to add additional customizations for labels using CSS classes and JavaScript configurations. See the PayFields Developer Guide for information on other customization options.

Visual Customizations

The new CSS classes for visual customizations include:

form-label: Styles the input label elements.
form-fieldset: Styles the fieldset input label elements.
form-legend: Styles the legend elements within fieldsets.
form-fieldset-inner: Styles inner elements within the fieldset.

These classes can be used to style the labels and fieldsets according to your design requirements. For a complete list of supported PayFields CSS customizations, see the PayFields Developer Guide.

Example

CSS

.form-fieldset-inner {
  padding: 2rem;
  background-color: purple;
}

Note: Color contrast is a crucial aspect of WCAG compliance. The web designer is responsible for selecting the appropriate colors that meet the required standards when integrating PayFields.

Custom Label Values

The new JavaScript configuration for custom label values mimics the customization process for PayFields placeholders. This configuration uses the PayFields.customizations.labels object, where the property name matches the input ID and the value is the custom label text.

Example

JS

PayFields.customizations.labels = {
  '#payment_number': 'Card Number',
  '#email': 'Email Address',
  '#address_fields': 'Contact Information'
};

Associating Related Controls with Fieldset

The <fieldset> element contains related form controls, while the <legend> element serves as a title for the group. Use <fieldset> to group related elements, enhance the visual structure, clarify connections, and improve user accessibility. Group the following elements together as a best practice:

Radio Buttons: Group all radio buttons.
Checkboxes: Group all checkboxes.
Related Fields: Group all related fields, such as shipping and billing addresses,

Example

HTML

<fieldset>
  <legend>Shipping Address:</legend>
  <div>
    <label for="shipping_name">
      <span class="visuallyhidden">Shipping </span>Name:
    </label><br>
    <input type="text" name="shipping_name" id="shipping_name">
  </div>
  <div>
    <label for="shipping_street">Street:</label><br>
    <input type="text" name="shipping_street" id="shipping_street">
  </div>
  <!-- Additional fields -->
</fieldset>