[Accessibility] Card images have no alt description

[gazjoy]

Describe the bug The payment cards have no alt text but they are conveying information to a sighed user that a low vision or screen reader user does not get. (Which card type).

To Reproduce Steps to reproduce the behavior:

1. Go to 'card number' field
2. Enter a valid card number
3. Adyen works out the card type (Visa)
4. The card images go dimmed (visually)
5. There is no alt text in the image or anything readable by a screen reader to convey the same information

Expected behavior We could convey this information to a screen reader users when we know the card type. When we know the card type we can add the alt text to the card image. As the user moves to the next field they should hear something like "Card type Visa" being announced when the screen reader encounters the image.

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey 12.5
• Browser: Safari 15.6

[sponglord]

Hi @gazjoy - thanks for raising this issue.

Due to merchant complaints in the past about the card brand logos being "extraneous information" for the shopper (with regards to what gets read out by the screenreader), we chose to adopt a "decorative image" approach re. https://www.w3.org/WAI/tutorials/images/decorative/ So these images either have an alt="" or an aria-hidden="true" attribute.

But on the other hand they do convey information... but is this vital for the shopper?

For this, and all other a11y questions, and for our general approach to a11y - we are currently in the process with an external US-based ADA / WCAG accessibility agency of having our frontend code reviewed. They are now finalising their reports with their findings and we expect to receive this in the coming weeks.

The main reason why we engaged this very experienced third-party is to get conclusive answers to these kind of questions and whether, and how, to fix certain accessibility related issues

[gazjoy]

@sponglord its good to hear you are actively doing something about the accessibility issues. Can you tell us who the agency is and a bit about their approach? Are they including people in the testing or only using automated tooling to check against WCAG?

[sponglord]

Hi @gazjoy They are a US-based ADA/WCAG accessibility agency. It's not only automated testing, but also includes comprehensive manual testing using a variety of methods, including functional testing by users with disabilities using leading assistive technologies.

[gazjoy]

@sponglord this is good to know. Our client also operates in the UK and EU. Do you have plans to have any other agencies from these areas do any testing? We have effectively done some of this for the project, hence feeding back here on GitHub. We don't yet have any audit done by people with disabilities but we have internal SME's so it's a start.