WAVE 报告扫描后 ASTRA CART DRAWER 的空按钮错误

Question

运行 Wave Report 工具，我得到一个关于 <button type="button" class="astra-cart-drawer-close"> 说

的错误

A button is empty or has no value text

网站是WP，用ASTRA Theme和Elementor搭建。是否有 CSS 代码解决方案或任何其他解决方案？

站点是www.defkalionsa.gr

Answer 1

我知道是什么导致了问题，但我无法 select 页面上的正确内容以显示 X-close 按钮。

<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>

你有一个带有嵌入式 <svg> 的 <button>，我认为 <svg> 只是一个很大的 'X' 来表示关闭按钮，但没有什么可告诉辅助的屏幕 reader 等技术 <svg> 代表什么。您可以通过将 aria-label="close" 添加到 <button>.

来解决此问题

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

（对于 Internet Explorer，如果您关心的话，您还需要 <svg focusable="false"> 以便键盘用户无法跳转到 <svg>）。

包含 <div> 的 class 表示 astra-mobile-cart-drawer 所以我认为此按钮仅显示在移动视图中。我在浏览器中切换到移动视图，但仍然无法显示此按钮。我向购物车添加了一些东西并显示了购物车，但仍然没有成功。

您仍然可以使用 aria-label 解决问题，但我真的希望看到 X-close 按钮起作用以确认它正在尝试做什么。

WAVE 报告扫描后 ASTRA CART DRAWER 的空按钮错误

Empty Button error for ASTRA CART DRAWER after WAVE report scanning

html

css

accessibility