Accessibility: single product tabs

  • Hello,
    after performing several accessibility checks I am facing some problems. We are talking about the single product page and specifically the tabs.
    Trying to be concise this part of the file:
    woocommerce/templates/single-product/tabs/tabs.php

    <ul class="tabs wc-tabs" role="tablist">
    <?php foreach ( $product_tabs as $key => $product_tab ) : ?>
    <li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>">
    <a href="#tab-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
    <?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?>
    </a>
    </li>
    <?php endforeach; ?>
    </ul>

    Leads to failure of accessibility checks.
    Probably the “tab” role and the “aria” attributes should not refer to the “a” tag but to the “li” tag.
    After modifying the code as follows:

    <ul class="tabs wc-tabs" role="tablist" aria-label="Info">
    <?php foreach ( $product_tabs as $key => $product_tab ) : ?>
    <li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
    <a href="#tab-<?php echo esc_attr( $key ); ?>">
    <?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?>
    </a>
    </li>
    <?php endforeach; ?>
    </ul>

    the accessibility check reveals a single error referring to attributes inserted via javascript (I assume)..

    <a href="#tab-description" aria-selected="true" tabindex="0">
    Descrizione</a>

    Do you have a suggestion on how to fix it?
    Thanks for your patience and support!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    Hi there,

    Thank you for reaching out!

    WooCommerce follows WordPress coding standards, including accessibility best practices, but we don’t provide support for modifying template files or customizations. Since the issue involves changes to the tabs.php template and possible JavaScript interactions, it would require custom development to fully resolve.

    For reference, you can check WooCommerce’s documentation on template overrides:
    https://developer.woocommerce.com/docs/template-structure-overriding-templates-via-a-theme/

    If you’re looking to make accessibility improvements, you might consider working with a developer who specializes in accessibility or checking with the theme developer to see if they have built-in support for better accessibility in the product tabs. I can recommend?WooExperts?and?Codeable.io?as options for getting professional help. Alternatively, you can also ask your development questions in the??WooCommerce Community Slack?as custom code falls outside our usual?scope of support.

    Let us know if you have any other questions related to WooCommerce core features!

    I also have this problem, but it seems that the team has other priorities at the moment.

    However, my site has dropped several positions in the google organic search rankings because of it.

    Apparently the bug was introduced 2 versions ago. I’m sure of this because I often monitor the rankings at the end of each relevant update.

    Let’s hope there’s interest in resolving it.

    https://www.ads-software.com/support/topic/pagespeed-accessibility-errors-last-update-3/

    Thread Starter franklnx

    (@franklnx)

    Hi @shahzeenfarooq ,
    The post should not necessarily be interpreted as a request for template modification support. If what was reported does indeed involve an accessibility problem, it might be something to think about.
    In Europe on June 28 the European Accessibility Act will go into effect, meaning that all e-commerce will have to be brought into compliance.
    Beyond the laws, accessibility is very important both in terms of ethics and SEO.
    I hope that with the next updates at least this small problem can be solved.

    Regards,
    Frank

    • This reply was modified 4 days, 21 hours ago by franklnx.
    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello franklnx,

    Thank you for your reply.

    I understand that the European Accessibility Act will take effect on June 28, requiring all e-commerce platforms to comply. You also highlighted the importance of accessibility for both ethics and SEO.

    WooCommerce continues to evolve to meet industry standards. If this regulation applies in Europe, the development team may already be aware.

    Let’s see how things progress as the date approaches. ??

    Best regards.

    And the solution is…

    Plugin Support Moses M. (woo-hc)

    (@mosesmedh)

    Hi @nunowp,

    Kindly reference @doublezed2’s response above: “WooCommerce continues to evolve to meet industry standards. If this regulation applies in Europe, the development team may already be aware.”

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Tags