關於可訪問性的正確使用html按鈕文本

我有一個帶有3個輸入字段的窗體，然後是一個形狀像下一個符號的按鈕。關於可訪問性的正確使用html按鈕文本

當你點擊下一個符號時，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如果有意義所以不知道。

來源

2017-07-28 Tom

你應該附上一個按鍵內的所有元素：

<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以滿足屏幕閱讀器用戶，但這對標準用戶無效。

來源

2017-07-29 08:32:59 Adam

-1

也許你可以用它代替按鈕

像

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

來源

2017-07-28 23:30:43

關於可訪問性的正確使用html按鈕文本

回答

相關問題