Visually Hidden

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.

Is Hidden

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. */