Accessibility: sr-only or aria-label

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.

According to the Bootstrap Documentation:

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

So I guess I could also write:

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


Solution 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.

Related:  Bootstrap4 dependency PopperJs throws error on Angular

I would use the example from MDN.