The Web Content Accessibility Guidelines (WCAG) contain recommendations for making web content more accessible. By following these recommendations, the content is made available to a wider group of people with, for example, visual impairments, hearing impairments and light sensitivity.

WCAG is developed in collaboration with individuals and organizations worldwide, with the goal of providing a common standard for web accessibility that meets the needs of individuals, organizations, and governments at an international level. Those who need to follow this are authorities, county councils, municipalities and other actors who are classified as bodies under public law, including some private actors who perform services with public funding.

By following these guidelines, most web content will also be more useful and accessible to all users.

It’s important to Swedbank Pay that all our customers have access to a payment solution that complies with WCAG 2.1. As a result, we have this as a constant focus. We thereby feel confident that we optimize our payment flows to keep up with your customers regardless of how they shop – online through a computer or mobile phone, or, through an app in your physical sales channels.

Here are four central and important areas to align WCAG within:

  • Clearly labeled instructions
  • Clear status changes
  • Clear validation errors
  • Zooming up to 200%

Clearly labeled instructions that describe to the user how to complete forms.

  • Each input field has a headline and the floating label is changed to a static label.
  • Information about how we expect the information to be entered. A national flag is added when that helps the user. 
  • All information can be read by screen readers

Status changes are made clearer to help assistive technologies interpret the change and inform the user.

  • When you have added correct information, we clearly show that the field is correct by changing the color and adding an OK icon.

  • When the status of the payment button turns from inactive (some or all fields are incorrect) to active (all fields are correct), it is clearly shown that the form is OK.

  • When all fields are OK, the color of the payment button changes and an arrow appears after the amount to indicate that you are ready for the next step.

  • All information can be read by screen readers.

Clear validation errors – we show simple and informative error messages

  • When input fields are filled out incorrectly, we change the color of the border to red and also add an icon to illustrate that it is incorrect.
  • Information about the validating error is shown underneath the input field. That way, we can guide the user on what they need to change.
  • The payment button is in inactive state until the errors are changed to correct information.
  • All information can be read by screen readers.

When the interface is zoomed to 200% or the text size is enlarged, the display adjusts automatically.

  • Zooming and text size are settings on the users’ devices. We therefore added better intelligence for our UIs to adapt better to web browser instructions.
  • All elements keep correct size, padding and distance to other objects.