使用 bootstrap 的字形图标时如何修复 "empty button" 网络可访问性错误

Question

我有一个页面，其中的按钮标有字形 (bootstrap)。

我有一个新的要求，用"Wave"工具（https://wave.webaim.org/extension/）检查页面时不能有"Errors"。

问题是 Wave 为按钮抛出错误，因为它是 "empty button"。

我尝试使用带有替代文字的图片。这修复了 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>

有没有比虚拟 img 更好的方法来确保可访问性（为字形提供替代文本）？

Answer 1

为了良好的可访问性，每个交互元素都需要有一个文本，在您的情况下，您可以将相应的文本添加到额外标签中的按钮元素，这是不可见但技术可读的。

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

此 class 已包含在 bootstrap 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-label：

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

Answer 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 aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span>
    </button>
  </div>
</body>

</html>

使用 bootstrap 的字形图标时如何修复 "empty button" 网络可访问性错误

how to fix "empty button" web accessability error when using bootstrap's glyhicons

html

twitter-bootstrap

glyphicons

web-accessibility