5

我有一个页面，其中一个按钮标有一个字形图标（引导程序）。

我有一个新要求，即使用“Wave”工具（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>

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

4

2 回答 2

6

不要添加带有替代文本的图像，而是使用所需的文本在按钮上添加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>

于 2018-07-03T09:19:59.473 回答
1

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

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

于 2018-07-03T09:18:13.327 回答