Accessibility Issue

With website accessibility lawsuits on the rise, I decided to run a few different accessibility website scanners. All of the scanners I tried are complaining about the hearts not having proper labeling for screen readers. I believe they are asking for them to have an aria-label element. Below are the complaints from two different scanners:

WEBSITE SCANNER 1: https://accessibe.com/accessscan

Links should include text that sets expectations about the page they lead to. If empty links are used as layout wrapping elements, provide a description using screen-reader only text or an “aria-label” attribute.

10 Code snapshots of failed elements

• <a href=”?add_to_wishlist=35276&amp;_wpnonce=26cd56dd5a” class=”add_to_wishlist single_add_to_wishlist” data-product-id=”35276″ data-product-type=”variable” data-original-product-id=”0″ data-title=”” rel=”nofollow” > <svg id=”yith-wcwl-icon-heart” …
• <a href=”?add_to_wishlist=32953&amp;_wpnonce=26cd56dd5a” class=”add_to_wishlist single_add_to_wishlist” data-product-id=”32953″ data-product-type=”variable” data-original-product-id=”0″ data-title=”” rel=”nofollow” > <svg id=”yith-wcwl-icon-heart” …
• <a href=”?add_to_wishlist=32292&amp;_wpnonce=26cd56dd5a” class=”add_to_wishlist single_add_to_wishlist” data-product-id=”32292″ data-product-type=”variable” data-original-product-id=”0″ data-title=”” rel=”nofollow” > <svg id=”yith-wcwl-icon-heart” …

I omitted the rest, it’s saying it for all of them.

WEBSITE SCANNER 2: https://pagespeed.web.dev/

Links do not have a discernible name:

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

Failing Elements

li.wc-block-grid__product > div.yith-wcwl-add-to-wishlist > div.yith-wcwl-add-button > a.add_to_wishlist

<a href=”?add_to_wishlist=35276&amp;_wpnonce=26cd56dd5a” class=”add_to_wishlist single_add_to_wishlist” data-product-id=”35276″ data-product-type=”variable” data-original-product-id=”0″ data-title=”” rel=”nofollow”>

li.wc-block-grid__product > div.yith-wcwl-add-to-wishlist > div.yith-wcwl-add-button > a.add_to_wishlist

<a href=”?add_to_wishlist=32953&amp;_wpnonce=26cd56dd5a” class=”add_to_wishlist single_add_to_wishlist” data-product-id=”32953″ data-product-type=”variable” data-original-product-id=”0″ data-title=”” rel=”nofollow”>

Again I omitted the rest of the results. It’s saying it about all of the hearts that are in the corner of the product images.

I manually updated the templates > add-to-wishlist-****.php files, just with a different aria-label text for each:

    <a

        href=”<?php echo esc_url( wp_nonce_url( add_query_arg( ‘add_to_wishlist’, $product_id, $base_url ), ‘add_to_wishlist’ ) ); ?>”

        class=”<?php echo esc_attr( $link_classes ); ?>”

        data-product-id=”<?php echo esc_attr( $product_id ); ?>”

        data-product-type=”<?php echo esc_attr( $product_type ); ?>”

        data-original-product-id=”<?php echo esc_attr( $parent_product_id ); ?>”

        data-title=”<?php echo esc_attr( apply_filters( ‘yith_wcwl_add_to_wishlist_title’, $label ) ); ?>”

        rel=”nofollow”

        aria-label=”Add to Wishlist” //ADDED THIS

    >

I am not knowledgeable with website accessibility at all, I just put the label there and the scans all stopped reporting a problem. It would be great if you would review this issue and make any needed changes to resolve the problem with your next update so it won’t be necessary to keep updating the files manually.

Thanks!