关于可访问性的 html 按钮文本的正确用法

Question

我有一个包含 3 个输入字段的表单，然后是一个形状像下一个符号的按钮。

当您点击下一个符号时，3 个输入字段消失，新的输入字段和提交按钮将出现。

代码：

<div class="col-md-1" id="next_area">
   <button type="button" class="glyphicon"></button>
   <div id="text1">Next</div>
</div>

我希望 "Next" 文本显示在按钮下方，因此需要单独的 <div>。在这里设置文本的正确方法是什么？由于按钮本身没有文字，是否可以明确要求点击此按钮？

我检查过，我可以将这些标签添加到 <button>:

data-toggle="collapse" data-target="#text1"

但我没有在这个 page 上找到它们，所以不确定这是否有意义。

Answer 1

也许你可以使用而不是按钮

喜欢

<div class="button">
   <i class="glyphicon"></i>
   <div id="text1">Next</div>
</div>

Answer 2

您应该将所有元素包含在一个按钮中：

<div class="col-md-1" id="next_area">
   <button type="button">
      <div class="glyphicon"></div>
      <div id="text1">Next</div>
   </button>
</div>

这样 "Next" 文本将可以点击，并且 button 将有一个有效的文本替换。

然后出于样式目的，您必须删除默认按钮 css 属性：

button {
  border: 0;
  background:transparent;
}

您也可以将 button 替换为 <div tabindex="0" role="button"> 元素。

请注意，在您的示例中，您可以将 aria-describedby="text1" 添加到 button 以满足屏幕阅读器用户的需求，但这对标准用户没有帮助。

关于可访问性的 html 按钮文本的正确用法

correct usage of html button text in regards to accessibility

html

accessibility

uiaccessibility