Skip to main content

Adapt to enhanced accessibility support

Zuora

Adapt to enhanced accessibility support

  1. Last updated
  2. Save as PDF

Since the 2023.12.R1 release, Zuora has provided the following enhancements to the Payment Page 2.0 solution to make the page content more accessible to people with visual disabilities. These enhancements are aligned with Web Content Accessibility Guidelines (WCAG) 2.0. Ensure that you test all these changes before they go live in production.

Asterisk indicator

Asterisks (*) are added to indicate the required fields, so that the required fields can be properly detected by the screen reader.

  • For new hosted payment pages created after the 2023.12.R1 release, this enhancement is automatically applied. 
  • For existing hosted payment pages, if you want to adapt to this accessibility support, complete the following steps:
    1. Open your hosted payment page in editing mode, and scroll down to the CSS section.
    2. If you have customized the CSS, back up your CSS.
    3. Click Restore Default CSS.
    4. Update the CSS by incorporating your customization changes into the current CSS.
    5. Click Generate and Save Page.

Textual names, roles, and status attributes

The following textual names, roles, and status attributes are available in the element tags. This makes elements correctly detected by the screen reader.

  • aria-required is added to all fields. 
  • title = "payment" is added to the iframe rendered by Zuora.
  • In the confirmation dialog for bank transfer payment pages, the button role is added to the confirm and cancel buttons.
  • The dialog role is added to the confirmation dialog for ACH payment pages.

For the following hosted payment pages, this enhancement is automatically applied:

  • New hosted payment pages of all types created after the 2023.12.R1 release
  • Existing payment pages for Credit Card and Credit Card Reference payment methods

For existing hosted payment pages for bank transfer payment methods, elements on the confirmation dialog do not get this enhancement automatically. If you want to adapt to this accessibility support, complete the following steps:

  1. Open your hosted payment page in editing mode, and scroll down to the Confirmation Dialog section.
  2. If you have customized the template, back up your template.
  3. Click Restore Default Template.
  4. Update the template by incorporating your customization changes into the current template.
  5. Click Generate and Save Page.

Error keyword

The Error keyword is added to the error messages that occur when the input of the field is invalid, so that the message can be properly detected by the screen reader.

  • For new hosted payment pages created after the 2023.12.R1 release, the Error keyword is present by default. 
  • For existing hosted payment pages, if you want to adapt to this accessibility support, manually update your error messages to the following format:

    Error: <MESSAGE>

Content focus indicator

The content focus indicator can be correctly activated and moved during page navigation. Interactive functionalities are operable with the keyboard.