PF Next

Accessibility

Screen reader only

Preview

Content available only to screen reader, open inspector to investigate This content is intended to be announced by assistive technologies, but not visually presented.
Content available only to screen reader, open inspector to investigate
<span class="pf-u-sr-only">
      This content is intended to be announced by assistive technologies, but not visually presented.
</span>

Visible

Preview

This class unsets .pf-u-sr-only. It will be visible.
<span class="pf-u-visible">
      This class unsets .pf-u-sr-only. It will be visible.
</span>

Hidden

Preview

The text underneath is hidden. This text is hidden.
The text underneath is hidden.
<span class="pf-u-hidden">
    This text is hidden.
</span>

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. Example .pf-u-sr-only-on-lg

Usage

Class Applied To Outcome
.pf-u-sr-only{-on-[breakpoint]} * Visually hides element, but leaves accessible to assistive technologies
.pf-u-visible{-on-[breakpoint]} * Unsets .pf-u-sr-only