Wordpress span WCAG插件

Question

有什么方法可以消除错误以通过wcag证书吗？你可以在这里看到错误的照片：

https://prnt.sc/20xrbrx

必须有0个错误才能通过该证书，

我搜索了一下，我发现如果插入像这样的额外跨度

 <span class="sr-only">Visit example.com</span>

或者html中的一些元素可以解决这个问题，但我不知道如何添加自定义alt文本或<span>。

Answer 1

我在https://dev.netgen.gr上运行了WAVE tool (如你的截图所示)，它只显示了4个错误，而你的截图显示了32个错误。

​

​

有两个“空按钮”错误，这是因为您的carousel上的next/prev按钮只有一个嵌入的<svg>，而没有屏幕阅读器可以通告的标签。

​

​

<button type="button" class="slick-next slick-arrow" style="">
  <span class="svg-icon icon-right">
    <svg>
      <use xlink:href="#right"></use>
    </svg>
  </span>
</button>

您需要在按钮上使用aria-label，例如

<button type="button" class="slick-prev slick-arrow" style="" aria-label="previous">
...
<button type="button" class="slick-next slick-arrow" style="" aria-label="next">

在您的搜索字段上有一个“空表单标签”错误消息，因为与按钮类似，您有一个嵌入的<svg>作为标签。

<label>
  <span class="svg-icon icon-search size-normal search-icon">
    <svg role="img">
      <use href="#search" xlink:href="#search"></use>
    </svg>
  </span> 
  <input type="text" name="s" class="search-field focused" value="" placeholder="Search" autocomplete="off">
  <input type="hidden" name="post_type" value="product">
</label>

您的<input>被包装在<label>中，这很好，但是没有任何文本可供屏幕阅读器通知。您的<svg>有role="img"，但它还需要一个aria-label。

    <svg role="img" aria-label="search">
      <use href="#search" xlink:href="#search"></use>
    </svg>