Accessibility Issues with Woocommerce

  • Resolved triprems

    (@triprems)


    3 years, 4 months ago

    Hello,

    We are developing a 508-compliant website for the Disability Information Network (https://disabinfo.net/), and noticed some accessibility issues with the default Checkout and Shop pages in Woocommerce. Here is a brief summary of the WCAG failures:

    1. Checkout Page – Coupon Code field uses placeholder text for a label. Provide visible and persistent labels for form controls (i.e. using the label element).
    2. Checkout Page – Gateway icon group for PayPal checkout is missing alternate text (i.e. PayPal Credit, PayPal, Mastercard, etc).
    3. Shop Page – Product sort option triggers a change of context without warning users. Add a button to allow users to trigger changes in context.

    Please advise if there are ways to override some of the fields/controls above, or if we should submit a support/feature request for accessibility updates.

    Thanks!

    Trip Rems
    Aurora Design and Consulting

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Cara

    (@dcka)

    Hi, @triprems!

    The issues you mentioned aren’t so much a function of the core WooCommerce software, which we support in these forums. Rather, they are a product of your site’s theme which, from its code, looks to be the Reykjavik theme.

    In your case, I would suggest first reaching out to your theme developer in case they’re able to assist with addressing the issues you pointed out.

    You may also want to consider using another theme. For instance, you may want to look at these lists:

    In addition, there are plugins that help with ADA compliance. To start, you may want to look into the following:

    I hope that helps get you started in the right direction!

    Thread Starter triprems

    (@triprems)

    Hi Cara,

    Thanks for the quick response!

    The theme that we are using (Reykjavik) is accessibility-ready, and has been tested by our team for conformance with the Web Content Accessibility Guidelines (WCAG 2.0).

    Also, the Product Sort option, Coupon code field, and Payment Gateway icons are not generated by any code in the base theme (Reykjavik). These seem to be custom controls generated by Woocommerce (wrapped in custom classes defined by the plugin).

    Here are some screenshots showing the components highlighted in Developer tools for reference: https://imgur.com/a/1SViygX .

    Please let me know if you need any more information.

    Thanks.

    -Trip

    Plugin Support Cara

    (@dcka)

    Hi Trip,

    Thank you for the additional information! If my suggestions above don’t help and the changes you need are urgent, you can look at additional customization on top of the Reykjavik theme you’re using. If that is a direction you’re interested in, we recommend reaching out to someone on our customizations page. There you’ll find experts who specialize in custom development for WooCommerce.

    I also see that there’s an open issue about making WooCommerce more accessible here: Accessibility issues. While I can’t give a timeframe for when developers will be able to address it, you may want to add your voice to the report.

    Thread Starter triprems

    (@triprems)

    Hi Cara,

    Thanks for the information regarding accessibility issues. I went ahead and added our observations to the thread on Github: https://github.com/woocommerce/woocommerce/issues/24185 .

    Hopefully, these can be addressed by the Woocommerce Dev team soon.

    Thanks.

    -Trip

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Accessibility Issues with Woocommerce’ is closed to new replies.