アクセシビリティに関する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を置き換えることができます。

あなたの例では、buttonにaria-describedby="text1"を追加してスクリーンリーダーユーザーを満足させることができますが、これは標準ユーザーには役立ちません。

Answer 2

おそらくあなたは、あなたがボタン内のすべてのあなたの要素を囲む必要があり

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