'Empty Button error for ASTRA CART DRAWER after WAVE report scanning

Running the Wave Report tool, I got an error about <button type="button" class="astra-cart-drawer-close"> saying

A button is empty or has no value text

The site is WP, built with ASTRA Theme and Elementor. Is there a CSS code solution or any other?

The site is www.defkalionsa.gr

htmlcssaccessibility


Solution 1:[1]

I know what's causing the problem but I can't select the right things on the page to get the X-close button to appear.

<div id="astra-mobile-cart-drawer" class="astra-cart-drawer open-right">
  <div class="astra-cart-drawer-header">
    <button type="button" class="astra-cart-drawer-close">
      <span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
        <svg class="ast-mobile-svg ast-close-svg"...>
          <path d="M5.293..."></path>
        </svg>
      </span> 
    </button>
    <div class="astra-cart-drawer-title">Shopping Cart</div>
  </div>
  <div class="astra-cart-drawer-content"></div>
</div>

You have a <button> with an embedded <svg> and I presume the <svg> is just a big 'X' to represent a close button but there's nothing to tell assistive technology such as a screen reader what the <svg> represents. You can fix this by adding aria-label="close" to the <button>.

    <button aria-label="close" type="button" class="astra-cart-drawer-close">

(For Internet Explorer, if you care, you also need <svg focusable="false"> so that the keyboard user can't tab to the <svg>).

The class on the containing <div> says astra-mobile-cart-drawer so I presume this button is only shown in mobile view. I switched to mobile view in the browser but still couldn't get this button to appear. I added something to the cart and displayed the cart but still no luck.

You can still fix the problem with aria-label but I was really hoping to see the X-close button in action to confirm what it's trying to do.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions