WCAG警告“无意义的背景图像的元素”

Question

我们使用标准的“ ”按钮将ASP.NET Web表单用于我们的网站。我们添加了css类，以将图像添加到按钮本身，在按钮文本旁边。例如，“保存”按钮上的绿色复选图标，“删除”按钮上的红叉图标，等等。

最近，我们是否已从潜在客户那里提出了一个问题，如果我们“符合WCAG”。我们不是，但是想要成为。作为第一步，我们决定使用适用于Chrome的WCAG无障碍审核插件来分析我们的网站。

但是，对于每个按钮，它都会发出警告“具有有意义背景图像的元素”（WCAG规则“ AX_IMAGE_01”）。据我了解，它假定按钮中的图像有意义，并且应该是实际的“ ”节点。据我了解，如果您希望图像没有意义，可以将其用作背景图像以防止出现此警告。

那么，即使图像是背景图像，为什么也出现错误？

我看到了一些解决方案，人们可​​以更改输入，将其包装成某种东西或达到某种效果。但是因为我被ASP.NET按钮所困扰，所以我被自动生成的代码所困扰，这是一个简单的输入标签。

我以前使用“背景”样式设置背景，例如图像，渐变，重复选项等。弄清楚我可能需要显式设置“背景图像”样式，我对此进行了拆分，无济于事

.ascx文件：

<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn ico-left btn-accept" OnClick="btnLogin_Click" />

产生的html：

<input type="submit" name="dnn$ctr108635$Login$btnLogin" value="Login" id="dnn_ctr108635_Login_btnLogin" class="btn ico-left btn-accept">

CSS（来自.less文件的结果）：

.btn {
  border: 1px solid #cccccc !important;
  font-size: 12px !important;
  background: #f1f1f1;
  background: linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
  background: -moz-linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
  background: -webkit-linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
}
.btn.ico-left {
  padding-left: 26px;
}
.btn.btn-accept.ico-left {
  background-image: url(../Images/icn_accept.png);
  background-position: left 5px center !important;
  background-repeat: no-repeat !important;
  background-color: #f1f1f1;
  background-image: url(../Images/icn_accept.png), linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
  background-image: url(../Images/icn_accept.png), -moz-linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
  background-image: url(../Images/icn_accept.png), -webkit-linear-gradient(top, #ffffff 0%, #ededed 50%, #ffffff 100%) !important;
}

从我的发现中，使用背景图像是处理无意义图像的方法，那么为什么这会给出有意义的图像警告呢？