Von MDN :
Im folgenden Beispiel wird eine Schaltfläche so formatiert, dass sie wie eine typische "Schließen" -Schaltfläche aussieht, mit einem X in der Mitte. Da nichts darauf hinweist, dass der Zweck des Buttons darin besteht, den Dialog zu schließen, wird das Attribut aria-label verwendet, um das Etikett für alle assistierenden Technologien bereitzustellen.
%Vor%
Entsprechend der Bootstrap-Dokumentation:
Verstecken Sie ein Element für alle Geräte außer Bildschirmleser mit .sr-only
Ich denke also, ich könnte auch schreiben:
%Vor%Wie kann ich in einem Bootstrap-Projekt auswählen, welches Sie bevorzugen?
Im MDN-Beispiel spricht ein Bildschirmleser nur das Wort "close", da aria-label den Text in der Schaltfläche überschreibt. Dies funktioniert auch, wenn Sie den Code ohne Bootstrap erneut verwenden.
In Ihrem Beispiel spricht ein Bildschirmleser "close x", weil Sie nichts tun, um das "x" vor Bildschirmlesern zu verbergen. Sie fügen auch einen Textknoten hinzu, um ihn dann mit einer Klasse zu verbergen.
Ich würde das Beispiel von MDN verwenden.
Tags und Links html accessibility twitter-bootstrap wai-aria