By adding the visually-hidden class to an element it will be hidden to sighted users, but its content will still be announced by users that are using a screenreader.
It’s advised to use this class to add extra information about a section or to describe an icon. For example: when a button it used that only houses an icon, a descriptive text can be added so users that are using a screenreader get information about the purpose of the button.
By adding the is-hidden class to an element it will be hidden to sighted users and will not be announced to users that are using a screen reader.
It’s advised to use this class when information is shown after the user performs an action, like clicking on a tab in tabbed navigation.
<div class="visually-hidden">
Hide only visually, but have it available for screenreaders
</div>
<div class="is-hidden">
Hidden
</div>
<div class="visually-hidden">
Hide only visually, but have it available for screenreaders
</div>
<div class="is-hidden">
Hidden
</div>
/* No context defined for this component. */