Visibility

Kelp includes a few utility classes for controlling the visibility of UI elements.

Hide

Add the [hidden] attribute to any element to hide it in DOM, and hide it from screen readers.

<div class="callout" hidden>
	I will not be displayed.
</div>

This is a native HTML attribute, but Kelp includes some CSS to ensure it’s not overridden by display properties on elements.

Hide Until Ready

There may be times where you want a Web Component to be hidden until it’s finished instantiating.

You can accomplish that with the [hide-until-ready] attribute. When the Web Component loads, an [is-ready] attribute is added and the component becomes visible.

<kelp-disclosure target="#content" hide-until-ready>
	<button>Show More</button>
</kelp-disclosure>

Show Until Ready

For some components, you might want to provide fallback content that becomes hidden once the component [is-ready].

You can add the [show-until-ready] attribute to direct child elements inside a component with the [hide-until-ready] attribute. All elements will be hidden except those with the [show-until-ready] attribute.

One the component has an [is-ready] attribute, elements with the [show-until-ready] attribute are automatically hidden, and all other content becomes visible.

<kelp-disclosure target="#content" hide-until-ready>
	<a href="/fallback-link" show-until-ready>Learn more</a>
	<button>Show More</button>
</kelp-disclosure>

Visually Hidden

The .visually-hidden class hides content visually in the UI, but leaves it accessible to screen readers.

This class is sometimes paired with an ARIA live region used to announce changes to the UI that a sighted user would be aware but a visually impaired user would not.

<div 
	role="status"
	class="visually-hidden"
	id="announce"
></div>

const announce = document.querySelector('#announce');
announce.textContent = 'Content loaded'

It can also be used as an alternative to the [aria-label] attribute.

This is useful when automated translation is a concern. Translators often skip [aria-label], but will translate content in a .visually-hidden element.

<button>
	<span class="visually-hidden">
		Favorite This
	</span>
	<span aria-hidden="true">
		❤️
	</span>
</button>

Focusable Visually Hidden

The .visually-hidden-focusable class hides content visually the same way the .visually-hidden class does, but becomes visible when it receives focus.

This technique is most commonly used with skip nav links.

<a 
	class="visually-hidden-focusable"
	href="#main"
>
	Skip to Content
</a>

<nav><!-- ... --></nav>