Question

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

单击下一个符号时，3个输入字段将消失，新输入字段将显示，并且还会显示提交按钮。

代码：

Desktop

我想要＆＃34;下一个＆＃34;文本显示在按钮下方，因此是一个单独的<div class="col-md-1" id="next_area"> <button type="button" class="glyphicon"></button> <div id="text1">Next</div> </div>。在这里设置文本的正确方法是什么？由于按钮本身没有文字，是否需要点击此按钮？

我检查过，我可以将这些标记添加到<div>：

<button>

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

Answer 1

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

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

这样＆＃34; Next＆＃34;文本将是可点击的，button将有一个有效的文本替换。

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

button {
  border: 0;
  background:transparent;
}

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

请注意，在您的示例中，您可以向aria-describedby="text1"添加button以满足屏幕阅读器用户的需求，但这对标准用户不起作用。

Answer 2

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

像

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

正确使用html按钮文本的可访问性

2 个答案: