Accessibility: sr-only or aria-label

Question

From MDN:

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

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

According to the Bootstrap Documentation:

Hide an element to all devices except screen readers with .sr-only

So I guess I could also write:

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

In a Bootstrap project, how can I choose which one to prefer?

Answer 1

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

I would use the example from MDN.