Table Of Contents
  CLIENT API - HOSTED IFRAME MODE - ACCESSIBILITY CHANGES AND CONFIGURATION

Client API - Hosted iFrame Mode - accessibility changes and configuration

To make form fields available for screen readers and compliant with WCAG standards, we added appropriate title and aria-label attributes to each iframe and input field. These attributes provide descriptive information about the form fields, which helps screen readers to inform users about the purpose of each field.

Implementation Details

Automatic Attribute Addition

We updated the JavaScript code to iterate through input fields and iframes in the form and set these attributes automatically.
Default values for the title and aria-label attributes are set with the input field's name.


Customization
  • It is possible customize the title and aria-label attributes by adding a new parameter (ariaLabel) to the configuration object.
  • This allows merchants to provide more descriptive information relevant to their specific use case.
  • Since this parameter have automatically a default value, it is not mandatory to be defined in configuration object, unless you want to add a custom description 

---end

Configuration Example

Here is an example of how to use the configuration object to specify custom titles and aria-labels for each field:

Aria labels configuration
const config = {
    fields: {
        cardpan: {
            selector: "cardpan",
            type: "text",
            ariaLabel: "Enter your card number", // Optional
            style: "font-size: 14px; border: 1px solid #000;"
        },
        cardcvc2: {
            selector: "cardcvc2",
            type: "password",
            ariaLabel: "Enter the CVC code of your card", // Optional
            style: "font-size: 14px; border: 1px solid #000;",
            size: "4",
            maxlength: "4"
        },
        cardexpiremonth: {
            selector: "cardexpiremonth",
            type: "text",
            ariaLabel: "Enter the expiration month of your card", // Optional
            size: "2",
            maxlength: "2",
            iframe: {
                width: "40px"
            },
            style: "font-size: 14px; width: 30px; border: solid 1px #000; height: 22px;"
        },
        cardexpireyear: {
            selector: "cardexpireyear",
            type: "text",
            ariaLabel: "Enter the expiration year of your card", // Optional
            iframe: {
                width: "60px"
            },
            style: "font-size: 14px; width: 50px; border: solid 1px #000; height: 22px;"
        }
    },
    defaultStyle: {
        input: "font-size: 1em; border: 1px solid #000; width: 175px;",
        select: "font-size: 1em; border: 1px solid #000;",
        iframe: {
            height: "22px",
            width: "180px"
        }
    },
    language: Payone.ClientApi.Language.de, // Language to display error-messages (default: Payone.ClientApi.Language.en)
    error: "error" // area to display error-messages (optional)
};

---end