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

Question

我有一个带有3个输入字段的窗体，然后是一个形状像下一个符号的按钮。

当你点击下一个符号时，3个输入字段消失，新的输入字段将显示出来，同时还有一个提交按钮。

代码：

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

我想 “下一步” 文本显示按钮的下方，因此分离<div>。 在这里设置文本的正确方法是什么？由于按钮本身没有文字，是否需要点击此按钮才能清楚？

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

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

但我没有发现他们在这个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> 

这样一路“下一步”文本可点击并且button将具有有效的文本替换。

然后为造型的目的，你必须删除默认按钮的CSS属性：

button { 
    border: 0; 
    background:transparent; 
} 

你也可以用一个<div tabindex="0" role="button">元素替换button。

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

Answer 2

也许你可以用它代替按钮

像

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