Erreichbarkeit: sr-only oder aria-Label

Question

From MDN:

Im Beispiel unten eine Schaltfläche gestylt wie ein typischer "Schließen" -Knopf zu sehen, mit einer X in der Mitte. Da nichts anzeigt, 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.

<button aria-label="Close" onclick="myDialog.close()">X</button> 

Nach der Dokumentation Bootstrap:

ausblenden ein Element auf alle Geräte außer Bildschirmlesegeräte mit .sr-only

Also ich denke, ich könnte auch schreiben:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

In einem Bootstrap-Pro Wie kann ich wählen, welches ich bevorzuge?

Answer 1

Im MDN-Beispiel spricht ein Bildschirmleser nur das Wort "Schließen", 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", da 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.