Accessibility Issues

  • With website accessibility lawsuits on the rise, I decided to run a few different accessibility website scans. These ADA accessibility scans don’t seem to agree with each other. That said, these issues came from: https://accessibe.com/accessscan

    ISSUE 1:

    Elements that act as buttons but use non-button tags (e.g., span, div, a) should include a role=”button” attribute.

    Code snapshots of failed elements

    • <a href=”#” class=”woocommerce-store-notice__dismiss-link” >Dismiss</a>

    ISSUE 2:

    Menu items that have a dropdown should include an aria-haspopup=”true” attribute.

    3 Code snapshots of failed elements

    • <a href=”***” >Shop</a>
    • <a href=”***” >Terms</a>
    • <a href=”***” >About Us</a>

    (These are the main headings in the navbar. I went to Appearance – Menus. There I set Shop, Terms, and About Us as top-level items in the navbar menu. I then nested some other items under each of these by moving them over to the right, so when you hover over these top three links on the website there are additional nested links that will show only on hover.)

    ISSUE 3:

    Menu items that have a dropdown should include an “aria-expanded” attribute set to “false” by default, which changes to “true” when the dropdown is opened, and back to “false” when closed.

    3 Code snapshots of failed elements

    • <a href=”***” >Shop</a>
    • <a href=”***” >Terms</a>
    • <a href=”***” >About Us</a>

    If there’s any easy solutions or you believe these are not valid issues, just let me know.

Viewing 1 replies (of 1 total)

  • Hi @q4u2,

    Thank you for sharing your accessibility concerns and running scans to ensure your site is compliant.

    The Storefront theme is designed as a lightweight, customizable foundation for WooCommerce stores, focusing on performance and compatibility. While it includes many accessibility-friendly features, it doesn’t cover all advanced accessibility functions, such as dynamic ARIA attributes, to keep the theme flexible and performant.

    After reviewing the flagged issues—such as missing role="button" attributes for interactive elements like the “Dismiss” link, missing aria-haspopup="true" for dropdown menus, and the absence of aria-expanded attributes for toggling dropdown states—I recommend addressing all these issues with the Pojo Accessibility plugin.

    This plugin provides an all-in-one solution for improving your website’s accessibility by automatically adding ARIA roles and attributes to interactive elements, such as menus and buttons. It can address the following:

    1. Assigning role="button" to elements like the dismiss link for your store notice.
    2. Adding aria-haspopup="true" to menu items with dropdowns, making them accessible to screen readers.
    3. Dynamically managing the aria-expanded attribute on dropdown menu items to indicate their open/close state.

    Please check and let us know if this helps.

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