korrekte Verwendung von HTML-Taste Text in Bezug auf Zugänglichkeit

Question

Ich habe ein Formular mit 3 Eingabefelder und dann eine Schaltfläche, die wie ein nächstes Symbol geformt ist.

Wenn Sie auf das nächste Symbol klicken, verschwinden die 3 Eingabefelder und es erscheinen neue Eingabefelder und auch eine Schaltfläche zum Absenden.

Code:

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

Ich möchte die "Next" Text unter der Schaltfläche angezeigt werden, damit eine <div> getrennt. Was ist der richtige Weg, um den Text hier zu setzen? Da die Schaltfläche selbst keinen Text enthält, ist es klar, dass diese Schaltfläche zum Klicken erforderlich ist?

Ich habe, habe ich diesen Tag <button> könnte hinzufügen:

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

Aber ich habe sie nicht finde auf diesen page so nicht sicher, ob der Sinn.

Answer 1

verwenden Sie sollten alle Elemente innerhalb einer Schaltfläche einschließen:

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

diese Weise wird die "Next" Text wird anklickbar und die button wird einen gültigen Text ersetzen.

Dann Styling Zweck, werden Sie Standard-Schaltfläche CSS-Eigenschaften entfernen:

button { 
    border: 0; 
    background:transparent; 
} 

Sie könnten auch die button mit einem <div tabindex="0" role="button"> Element ersetzen.

Beachten Sie, dass Sie in Ihrem Beispiel aria-describedby="text1" zu Ihrem button hinzufügen können, um Screenreader-Benutzer zu befriedigen, aber dies würde Standardbenutzern nicht helfen.

Answer 2

Vielleicht können Sie statt Taste

Wie

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