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

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

0 голосов
/ 03 июля 2018

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

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

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

Я пытался использовать изображение с альтернативным текстом. Это исправляет ошибку 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 ]

0 голосов
/ 03 июля 2018

Вместо добавления изображения с альтернативным текстом, добавьте атрибут 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 aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span>
    </button>
  </div>
</body>

</html>
0 голосов
/ 03 июля 2018

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

.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>
...