Accessibility: sr-only or aria-label
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?
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.
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Ebook Reviews
- PES Matches, Skills & News