WCAG 的 Wordpress 跨度插入

Question

有没有什么办法可以消除这个错误以通过 wcag 证书？ 您可以在此处查看带有错误的照片：

https://prnt.sc/20xrbrx

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

我搜索了一下，发现如果插入一个额外的跨度，比如

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

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

Answer 1

我在https://dev.netgen.gr 上运行了WAVE tool（如您的屏幕截图所示），与您的屏幕截图中的 32 个错误相比，它仅显示 4 个错误。

有两个“空按钮”错误，因为轮播上的下一个/上一个按钮只有一个嵌入的 <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>