如何修复“空按钮”Web可访问性错误时使用bootstrap的glyhicon

34gzjxbg 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(157)

我有一个页面，其中一个按钮被标记为字形图标（引导程序）。
我有一个新的要求，即当使用“Wave”工具（https://wave.webaim.org/extension/）检查页面时，必须没有“错误”。
问题是Wave为按钮抛出错误，因为它是一个“空按钮”。
我试着使用带有alt文本的图像。这修复了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更好的方法来确保可访问性（为字形图标提供替代文本）？

twitter-bootstrap

来源：https://stackoverflow.com/questions/51150103/how-to-fix-empty-button-web-accessability-error-when-using-bootstraps-glyhico

2条答案

按热度按时间

camsedfj1#

在按钮上添加aria-label或title属性并添加所需文本，而不是添加带有alt文本的图像。

<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）回复(0）举报 2022-12-07

ugmeyewa2#

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

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

赞(0）回复(0）举报 2022-12-07

我来回答

如何修复“空按钮”Web可访问性错误时使用bootstrap的glyhicon

2条答案

相关问题

热门标签

最新问答