Соответствие WCAG - элемент с кнопкой role = и без содержимого

Вы можете использовать элемент button с атрибутами aria-label и title:

 <button class="k-select" role="button"
        aria-label="alternative for screen readers"
        title="alternative for other users"
        value="abcd">
   <span class="k-icon k-i-calendar"></span>
 </button>

Адам прав, преобразовав это в <button>. Это лучший подход с самого начала, а также означает, что вы можете сбросить файл role="button". Это также означает, что вы получаете доступность взаимодействия бесплатно (например, вам не нужно слушать клавишу пробела или клавишу Enter).

Вместо того, чтобы пытаться присвоить самому <button> доступное имя, поместите его на значок. Если вы делаете это последовательно, вы можете быть уверены, что у значка всегда есть доступное имя, независимо от того, находится ли он в элементе управления, таком как кнопка или ссылка.

Итак, рассмотрим этот HTML:

<button class="k-select">
  <span class="k-icon k-i-calendar">Calendar</span>
</button>

Теперь у вас есть обычная кнопка, которая не была снабжена атрибутами, чтобы попытаться сделать ее доступной. Значок, с другой стороны, теперь имеет текст внутри, и это становится доступным именем.

Теперь примените это правило CSS, чтобы визуально скрыть этот текст:

.k-icon {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; /* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
}

Обычно у меня это служебный класс (.visually-hidden), так что я могу применять его где угодно.

FontAwesome рассказывает о подходе, похожем на этот на своем сайте, чтобы сделать свои значки доступными.

При таком подходе вам не понадобится ни ARIA, ни одноразовые решения для кода, ни какой-либо скрипт. Сначала это работает с вашими значками (настоящая проблема) и означает, что, когда эти значки используются где-то еще (ссылки, кнопки и т. Д.), Они становятся доступными.

Кроме того, для кнопки нельзя использовать ни alt, ни value. aria-label не нужен. Определенно избегайте title.