On This Page

WCAG 2.2 Compliance

Your integration must be compliant with the Web Content Accessibility Guidelines (WCAG 2.2) in order to meet accessibility standards and regulations. Microform Integration is designed with these guidelines in mind but some accessibility compliance is dependent on your integration, particularly the custom styling of fields. This section contains the minimum required information to ensure that Microform Integration is compliant with WCAG 2.2.

Microform Integration automatically handles many accessibility requirements, but the hosting page and custom styling elements are your responsibility. The parent page that contains Microform Integration must meet WCAG 2.2 standards. This includes proper heading structure, page titles, and other accessibility requirements. All fields that are rendered in Microform Integration are automatically assigned as

aria-required

set to

true

. The parent page must implement clear visual indicators to indicate that these fields are required for users. For information about WCAG 2.2 guidelines, see the Web Content Accessibility Guidelines (WCAG) 2.2 on the W3C website.

Font Configuration

You must follow these guidelines when you apply custom styles to Microform Integration:

Set the font size to at least 16px (1rem) for input fields.

Select font families that are compatible with screen readers and assistive technologies.

Set a line height that is at least 1.5 times the font size.

This is an example Microform Integration font configuration:

// define accessible custom styles 
var customStyles = { 
    'input': { 
        'font-size': '16px', 
        'family': 'Arial, sans-serif', 
        'lineHeight': '1.5' 
    } 
} 
// apply styles to all fields 
var microform = flex.microform({ styles: customStyles });

Color and Contrast

Follow these guidelines to ensure that visibility is compliant for all users:

Maintain a minimum contrast ratio of 4.5:1 between text and background colors.

Do not rely solely on color to convey information.

Implement distinct focus states using both color changes and other visual indicators.

Use the

flex-microform-focused

class for consistent focus indication.

This is an example of color and contrast configuration for Microform Integration:

/* add a visual indicator for focus */ 
.flex-microform-focused { 
  background: lightyellow; 
}

Handle Errors

Microform Integration provides managed classes to indicate field validation states. You must handle any errors that are returned by the

createToken

method. Follow these guidelines to handle errors:

Implement error handling that programmatically associates error messages with their respective form fields.

Associate all helper text with its corresponding form control by setting

aria-describedby

helperTextId

is the unique ID of the helper text container element.

Use the

MicroformError

object to determine to which fields the error applies.

Ensure that all error messages are clear, descriptive, and concise.

Make error messages visible and properly announced by screen readers.

This is an example

MicroformError

object:

{ 
  "name": "MicroformError", 
  "reason": "CREATE_TOKEN_VALIDATION_FIELDS", 
  "message": "One or more fields have a validation error.", 
  "informationLink": "https://www.cybersource.com/products/payment_security/secure_acceptance", 
  "details": [ 
    { 
      "message": "Validation error", 
      "location": "number" 
    } 
  ] 
}

Testing

Follow these guidelines to verify that your integration is compliant before you deploy:

Test keyboard navigation through the entire payment form.

Validate that your implementation works with screen readers (NVDA, JAWS, VoiceOver).

Run automated accessibility checks with tools such as Axe or Lighthouse.

Conduct manual testing with common assistive technologies.

When you follow these guidelines, your Microform Integration implementation maintains compliance with WCAG 2.2 while you provide an accessible payment experience for all users.