I am auditing accessibility and ADA compliance on my website using the WAVE evaluation tool (https://wave.webaim.org/). The website uses the Impulse theme by Archetype Themes.
When auditing the product detail pages on my website, the WAVE tool flagged two bits of code:
These code segments appear to relate to the Shop Pay and “More payment options” selectors below the “Add to Cart” button. WAVE lists the codes as “Empty button” errors, saying the code “is empty or has no value text” and that “descriptive text must be presented to screen reader users to indicate the function of the button.”
Could someone offer any explanation as to what these pieces of code do and why they would be flagged as an accessibility issue by WAVE? More importantly, how can I go about adding the necessary descriptive text or otherwise adjusting the code to avoid accessibility issues?
Shopify support said: “The issues you identified are indeed related to the Shop Pay and ‘More payment options’ buttons on your product pages. These empty button elements, although hidden, might cause accessibility issues as they could potentially be read as empty by screen readers used by visually impaired users” but did not suggest how to address the issue.