Home Forums WoodMart support forum Accessibility issues (ARIA roles and list structure) in WoodMart theme

Accessibility issues (ARIA roles and list structure) in WoodMart theme

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #702897

    Maiursz
    Participant

    Hello WoodMart Team,

    I am using the WoodMart theme and I’ve noticed several accessibility issues flagged by Google PageSpeed Insights (Lighthouse) that I would like you to fix in the upcoming update.

    Here are the specific issues found:

    ARIA Parent/Child Roles: * The tabs component (wd-nav-tabs) has role=”tablist”, but the direct children () have role=”presentation”. This breaks the required relationship because the elements with role=”tab” (the links) are nested too deeply or the hierarchy is incorrect.

    The slider pagination items (wd-nav-pagin-item) have role=”option” but are not contained within a parent with role=”listbox”.

    Invalid List Structure:

    In the tabs section, Lighthouse flags that lists do not contain only elements properly, or the ARIA roles assigned to them conflict with standard HTML list semantics.

    Touch Targets: * Some interactive elements (like pagination bullets or mobile menu items) do not have sufficient size or spacing for mobile users.

    These issues affect the Accessibility score and make it harder for screen reader users to navigate the site. Could you please look into these ARIA role conflicts and the HTML structure of the tabs and sliders?

    #702899

    Maiursz
    Participant

    Private conten

    #703016

    Maiursz
    Participant

    please me with it

    #703161

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    1. The issue related to product tabs is not theme-related, since the HTML structure is generated by WooCommerce itself:
    https://github.com/woocommerce/woocommerce/blob/c3ec96d661099ade65a8b49aaac87185bb8cea84/plugins/woocommerce/templates/single-product/tabs/tabs.php#L36C15-L36C27

    2. We will fix the pagination issue in the slider in an upcoming update.

    3. To fix the Touch Targets issue, please add the following CSS:

    body .wd-nav-pagin {
        gap: 0;
    }
    
    body .wd-nav-pagin span {
        margin: 7px;
    }
    
    body .wd-style-shape-3 .wd-nav-pagin {
        padding: 3px;
    }

    Kind Regards

    #703199

    Maiursz
    Participant

    So if you can please report it to woocomerce

    #703285

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    WooCommerce is an open-source software, and anyone can report bugs and issues. If you think that it is a bug or want to submit a feature request, you can open an issue on their GitHub repo. Here is a link https://github.com/woocommerce/woocommerce/issues

    Kind Regards

Viewing 6 posts - 1 through 6 (of 6 total)