Marzian Marzian - 3 months ago 28
HTML Question

Accessibility: sr-only or aria-label

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

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.