Visibility

Screen reader only

The .sr-only (aliased as .visually-hidden) class hides an element visually but keeps it in the accessibility tree for screen readers.

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Usage

<!-- Label for icon-only button -->
<button class="zui-button zui-button-icon">
  <i class="ph ph-gear"></i>
  <span class="sr-only">Settings</span>
</button>

<!-- Skip navigation link -->
<a href="#main" class="sr-only">Skip to main content</a>

The hidden attribute

ZUI's reset makes the native hidden attribute work on every element, including ZUI components that set their own display (like .zui-button's inline-flex, which would otherwise override the browser's built-in [hidden] rule):

[hidden]:not([hidden='until-found']) {
  display: none !important;
}

Toggle visibility from JavaScript with the hidden property — no class juggling or inline styles needed:

<button class="zui-button" hidden>Reset</button>

button.hidden = false // show
button.hidden = true // hide

hidden="until-found" is excluded from the rule, so browsers can still reveal that content via find-in-page and fragment navigation.