{"templateId":"markdown","versions":[{"version":"v1","label":"v1","link":"/products/checkout/web/v1/accessibility","default":false,"active":false,"folderId":"c6f087f2"},{"version":"v2","label":"v2","link":"/products/checkout/web/accessibility","default":true,"active":true,"folderId":"c6f087f2"}],"sharedDataIds":{"sidebar":"sidebar-products/checkout/web/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["partial","admonition"]},"custom_product":"Checkout","type":"markdown"},"seo":{"title":"Accessibility","description":"Worldpay for Developers - docs, code examples, resources and tools. Everything you need to build your omnichannel payment solution.","siteUrl":"https://docs.worldpay.com/access","image":"/access/assets/worldpay-logo-light.21b7daf79984773a9fcd7d4fbcb07ae5289dfffd6023c4c3dca720c7058e53dc.33f780a6.svg","keywords":"documentation, api, openapi, sdks, developer, payments, json, payouts, 3ds","jsonLd":{"@context":"https://schema.org","@type":"Organization","url":"https://docs.worldpay.com/access","name":"Worldpay"},"meta":[{"name":"google-site-verification","content":"zjziIKaP3ImsqsfhYnEBnq1R85UabiSwl7HTXuwtZuo"},{"name":"doc_product","content":"Access"},{"name":"doc_category","content":"Documentation"}],"llmstxt":{"hide":false,"sections":[{"title":"Payments API","description":"Payment orchestration API combining fraud assessment, 3ds authentication, SCA exemptions, Worldpay Token creation and a card or wallet based payment.","includeFiles":["products/payments/@20240601/**/*"],"excludeFiles":[]},{"title":"Payment Queries API","description":"Querying your payments data, based on a variety of parameters.","includeFiles":["products/payment-queries/@v1/**/*"],"excludeFiles":[]},{"title":"Card BIN Data API","description":"Provides detailed information about a card.","includeFiles":["products/card-bin/@v1/**/*"],"excludeFiles":[]},{"title":"3DS Authentication API","description":"Request 3DS authentication to protect against fraud, be SCA compliant and to shift liability using this standalone API.","includeFiles":["products/3ds/@v3/**/*"],"excludeFiles":[]},{"title":"FraudSight API","description":"Request a risk assessment and receive a response with an outcome (e.g. lowRisk) using this standalone API.","includeFiles":["products/fraudsight/@v1/**/*"],"excludeFiles":[]},{"title":"Checkout SDK","description":"Integrate using our clientside SDKs for both web and native devices. Benefit from SAQ-A/PCI-SSF compliance.","includeFiles":["products/checkout/web/@v2/**/*","products/checkout/ios/@v4/**/*","products/checkout/android/@v4/**/*","products/checkout/react-native/@v3/**/*","products/checkout/flutter/@v1/**/*"],"excludeFiles":[]},{"title":"Tokens API","description":"Minimizes the exposure of sensitive card details and increases the security of your customer's card details.","includeFiles":["products/tokens/@v3/**/*"],"excludeFiles":[]},{"title":"Card Payments API","description":"Request a card payment using this standalone API, requires separate requests for 3DS, Fraud assessment etc.","includeFiles":["products/card-payments/@v7/**/*"],"excludeFiles":[]},{"title":"Card Verifications API","description":"Verify your customer's card to maximize your authentication rates.","includeFiles":["products/card-verifications/@v6/**/*"],"excludeFiles":[]},{"title":"Account Payouts API","description":"Send funds to your customer's bank accounts and search for payouts using parameters.","includeFiles":["products/account-payouts/@20250101/**/*"],"excludeFiles":[]},{"title":"APMs","description":"Pay using eWallets, bank transfers, direct debits, local card schemes, Postpay and eInvoice/ Buy Now Pay Later.","includeFiles":["products/apms/@20240701/**/*"],"excludeFiles":[]},{"title":"Balance API","description":"Request your account details for a single account or all accounts under an entity.","includeFiles":["products/balance/@20250101/**/*"],"excludeFiles":[]},{"title":"Card Payouts API","description":"Send funds to your customer's cards.","includeFiles":["products/card-payouts/@v4/**/*"],"excludeFiles":[]},{"title":"Events (Webhooks)","description":"Receive status updates from Access Worldpay by setting up a webhook.","includeFiles":["products/events/@v1/**/*"],"excludeFiles":[]},{"title":"FX API","description":"Manage Foreign Exchange (FX) on your payments.","includeFiles":["products/fx/@v1/**/*"],"excludeFiles":[]},{"title":"Hosted Payment Pages (HPP) API","description":"Our low-code option to take payments securely at the lowest PCI compliance level - SAQ A.","includeFiles":["products/hosted-payment-pages/@v1/**/*"],"excludeFiles":[]},{"title":"Money Transfers API","description":"Money Transfer OCTs (Original Credit Transaction) allow funds to be pushed to an eligible card in 30 minutes or less.","includeFiles":["products/money-transfers/@v1/**/*"],"excludeFiles":[]},{"title":"Parties API","description":"Create parties, manage your payout instruments and beneficial owners and carry out identity verification checks.","includeFiles":["products/parties/@20250101/**/*"],"excludeFiles":[]},{"title":"SCA Exemptions API","description":"Maximize a frictionless checkout experience by using issuer data insights to apply exemptions.","includeFiles":["products/sca-exemptions/@v1/**/*"],"excludeFiles":[]},{"title":"Split Payments API","description":"Divide funds from a single payment amongst yourself and your parties/sellers.","includeFiles":["products/split-payments/@20250625/**/*"],"excludeFiles":[]},{"title":"Statements API","description":"Retrieve your account statement and see individual entries for all credits and debits.","includeFiles":["products/statements/@20250101/**/*"],"excludeFiles":[]},{"title":"Transfers API","description":"Transfer funds from source account to target account.","includeFiles":["products/transfers/@20250101/**/*"],"excludeFiles":[]},{"title":"Verified Tokens API","description":"Verified Tokens ensures that your customer's payment details are valid and CIT compliant when creating a token.","includeFiles":["products/verified-tokens/@v3/**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Last updated"]},": 31 March 2026 | ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/checkout/web/changelog/"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Change log"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"accessibility","__idx":0},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK enables and supports you in ensuring that your checkout page meets at least an AA rating against WCAG standards."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK provides some default values for certain attributes, but they are also fully customizable. Set your accessibility configuration on initialization."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lang","__idx":1},"children":["Lang"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can set the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lang"]}," to specify the language of an element and all of its child elements."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lang"]}," attribute is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["disabled"]},". It can be enabled to use a preset default of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["en-US"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may also choose to set it to a custom language, by setting the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locale"]}," to be any language supported by the BCP47 syntax. To set custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lang"]}," you must also override the default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enabled"]}," setting to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"aria-label","__idx":2},"children":["Aria-label"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The purpose of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," attribute is to provide a recognizable name for an object that may not have a visible label."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," is set for each of the input fields as follows:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["true"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pan"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Card number\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiry"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Expiry date\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvv"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Security code\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvvOnly"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Security code\""]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Setting ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enabled"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," prevent the SDK from setting any aria-labels on the input fields. Alternatively one, all or any number of the defaults may be over-written by passing custom values into the accessibility config."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"title","__idx":3},"children":["Title"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," attribute is used to provide advisory information for an element, and generates a tooltip when hovering a mouse over the element."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}," attribute is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["disabled"]},". It can be enabled to use preset defaults, or the title for each input field can be individually set. To set custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]},"s you must also override the default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enabled"]}," setting to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pan"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Card number\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiry"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Expiry date\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvv"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Security code is the 3 or 4 digit number that is unique to each card and only appears on the card itself\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvvOnly"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Security code is the 3 or 4 digit number that is unique to each card and only appears on the card itself\""]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Relying on the title attribute alone is discouraged; many user agents do not expose the attribute in an accessible manner. Often they require a mouse to cause a tooltip to appear. This is not accessible to keyboard-only and touch-only users."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-integration","__idx":4},"children":["Example integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Below is an example of an accessibility configuration, where custom values are provided for every possible value. It is not necessary to provide every single one. If only a selection of custom values are passed, those not provided retain their default value."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"    accessibility: {\n      ariaLabel: {\n        enabled: \"true\",\n        pan: \"my custom aria label for pan input\",\n        expiry: \"my custom aria label for expiry input\",\n        cvv: \"my custom aria label for cvv input\"\n      },\n      lang: {\n        enabled: \"true\",\n        locale: \"en-GB\"\n      },\n      title: {\n        enabled: \"true\",\n        pan: \"my custom title for pan\",\n        expiry: \"my custom title for expiry date\",\n        cvv: \"my custom title for security code\"\n      }\n    }\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-recommendations","__idx":5},"children":["Additional recommendations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In addition to the SDK Accessibility configuration customization, we have some recommendations to help your merchant page meet an AA rating against WCAG standards."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure you are familiar with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/checkout/web/styles"},"children":["Styles"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/checkout/web/event-hooks"},"children":["Event hooks"]}," supported by the SDK."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"display-a-focus-indicator-around-the-sdk-fields","__idx":6},"children":["Display a focus indicator around the SDK fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To display a focus indicator, define the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["outline"]}," CSS property in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["is-onfocus"]}," class for your form fields."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"css","__idx":7},"children":["CSS"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".card .checkout .field.is-onfocus {\n  outline: 3px solid #34ebde;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-color-and-an-icon-to-identify-invalid-fields","__idx":8},"children":["Use color and an icon to identify invalid fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To change the text color of an invalid field, define the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}," CSS property in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input.is-invalid"]}," property of your styles configuration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"javascript","__idx":9},"children":["JavaScript"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"styles: {\n  \"input.is-invalid\": {\n    \"color\": \"red\"\n  }\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To display an icon for an invalid field, listen to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wp:field:change"]}," event and specify your styling accordingly."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"javascript-1","__idx":10},"children":["JavaScript"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"form.addEventListener(\"wp:field:change\", function (event) {\n  if (event.detail[\"is-valid\"] === false) {\n    // code to display your invalid field icon\n  } else {\n    // code to remove your invalid field icon\n  }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"display-a-list-of-invalid-fields-with-descriptive-text","__idx":11},"children":["Display a list of invalid fields with descriptive text"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Listen to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wp:field:change"]}," event and keep track of which fields are invalid."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Upon submission of the form, display text to indicate which fields are invalid."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We recommend that you display each text description in a list above the form, as well as providing a suggested correction."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Visit ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.w3.org/WAI/standards-guidelines/wcag/"},"children":["w3.org"]}," for more information on accessibility."]}]}]},"headings":[{"value":"Accessibility","id":"accessibility","depth":1},{"value":"Lang","id":"lang","depth":3},{"value":"Aria-label","id":"aria-label","depth":3},{"value":"Title","id":"title","depth":3},{"value":"Example integration","id":"example-integration","depth":4},{"value":"Additional recommendations","id":"additional-recommendations","depth":3},{"value":"Display a focus indicator around the SDK fields","id":"display-a-focus-indicator-around-the-sdk-fields","depth":4},{"value":"CSS","id":"css","depth":4},{"value":"Use color and an icon to identify invalid fields","id":"use-color-and-an-icon-to-identify-invalid-fields","depth":4},{"value":"JavaScript","id":"javascript","depth":4},{"value":"JavaScript","id":"javascript-1","depth":4},{"value":"Display a list of invalid fields with descriptive text","id":"display-a-list-of-invalid-fields-with-descriptive-text","depth":4}],"frontmatter":{"seo":{"title":"Accessibility"}},"lastModified":"2025-09-22T09:15:26.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/checkout/web/accessibility","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}