Как исправить ошибку веб-доступности "пустая кнопка" при использовании глициконов начальной загрузки

У меня есть страница, где кнопка помечена глификом (начальной загрузкой).

У меня есть новое требование, чтобы при проверке страницы с помощью инструмента "Волна" не было "ошибок" ( https://wave.webaim.org/extension/).

Проблема в том, что волна выдает ошибку для кнопки, потому что это "пустая кнопка".

Я пытался использовать изображение с альтернативным текстом. Это исправляет ошибку Wave, но делает кнопку немного больше, и я также обеспокоен злоупотреблением изображением для этого.

Это минимальная версия моей страницы, показывающая проблему:

<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>

Есть ли лучший способ обеспечить доступность (предоставить альтернативный текст для глификона), чем dummy img?

Источник

2 ответа

Решение

Вместо добавления изображения с альтернативным текстом, добавьте aria-label или же title Атрибут на кнопке с нужным текстом.

<html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div>
    <button>
      <span class="glyphicon glyphicon-chevron-up"></span>
      </button>
  </div>
  <div>
    <button aria-label="UP button" title="UP button">
      <span class="glyphicon glyphicon-chevron-up"></span>
    </button>
  </div>
</body>

</html>

Источник

Для хорошей доступности каждый элемент взаимодействия должен иметь текст, в вашем случае вы можете добавить соответствующий текст к элементу кнопки в дополнительном теге, который невидим, но технически удобочитаем.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

Этот класс уже включен в загрузочную версию https://getbootstrap.com/docs/4.1/getting-started/accessibility/

Чтобы иметь читаемый текст, есть также возможность добавить aria-label атрибут, как описано здесь: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute Но я не уверен, что это подходит для упомянутой вами проверки.

Ваш код расширения с дополнительным описанием и меткой aria:

<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button aria-label="description">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="sr-only">Description</span>
</button>
</div>
<div>
<button aria-label="description">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="sr-only">Description</span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>

Источник
Другие вопросы по тегам