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.

Demo coming soon…

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>