Please don't forget to read Usage part of each element.
Accessibility
Accessibility classes for screen readers and keyboard navigation focus state.
Screen reader only
Show for screen readers only
To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr
class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
This text can only be read by a screen reader.
Hide for screen readers only
To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true"
class. This doesn't affect how the element looks, but screen readers will skip over it.
Show only on focus
For visually hidden interactive controls, such as traditional “skip” links, put show-on-focus
class. This will ensure that the control becomes visible once focused (for sighted keyboard users).