WCAG предупреждение «Элементы со значимым фоновым изображением» на НЕ значащем фоновом изображении

Question

Мы используем веб-формы ASP.NET для наших сайтов, используя стандартные "кнопки. Мы добавили классы CSS, чтобы добавить изображение к самой кнопке, рядом с текстом кнопки. Например, зеленый значок галочки на кнопке «Сохранить», красный крестик на кнопках «Удалить» и т. д. Это работаетотлично.

Недавно мы получили вопрос от потенциального клиента, если мы «совместимы с WCAG». Мы не хотим, но хотим быть. В качестве первого шага мы решили использовать плагин аудита доступности WCAG дляChrome для анализа наших сайтов.

Однако для каждой кнопки выдается предупреждение «Элементы со значимым фоновым изображением» (правило WCAG «AX_IMAGE_01»). Из того, что я понимаю, предполагается, что изображение в кнопкезначимым и должен быть фактическим "" - узлом. Из того, что я также понимаю, является то, что, если вы хотите, чтобы изображение не было значимым, вы можете использовать его в качестве фонового изображения для предотвращения этого предупреждения.

Так почему я получаю сообщение об ошибке, если изображение является фоновым изображением?

Я вижу решения, в которых люди меняют ввод, оборачивают егоили что-то в этом роде.Но так как я застрял с кнопкой ASP.NET, я застрял с автоматически сгенерированным кодом, который является простым тегом ввода.

Я использовал для установки фона, используя стиль «background» для изображения,градиент, параметры повтора и т. д. Придумывание Мне может понадобиться явно установить стиль "background-image". Я разделил это, но безрезультатно.

.ascx file:

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

Из того, что я могу найти, использование фоновых изображений - это путь для бессмысленных изображенийТак почему же это дает значимое предупреждение об изображении?