correct usage of html button text in regards to accessibility -

i have form 3 input fields , button shaped next symbol.

when click on next symbol 3 input fields disappear , new inputs fields show , submit button.

code:

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

i want "next" text appear below button, hence separated <div>. what's correct way set text here? since button doesn't have text, clear button required click?

i checked, add these tag <button>:

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

but didn't find them on page not sure if make sense.

you should enclose elements within button:

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

this way "next" text clickable , button have valid text replacement.

then styling purpose, you'll have remove default button css properties:

button {   border: 0;   background:transparent; } 

you replace button <div tabindex="0" role="button"> element.

note within example add aria-describedby="text1" button in order satisfy screenreader users, wouldn't standard users.