HTML

Accessibility

ExamplesDocumentation

Examples

Screen reader only

Content available only to screen reader, open inspector to investigate This content is intended to be announced by assistive technologies, but not visually presented.
Copied to clipboard

Visible

This class unsets .pf-u-screen-reader and .pf-screen-reader. It will be visible.
Copied to clipboard

Hidden

The text underneath is hidden. This text is hidden.
Copied to clipboard

Documentation

Overview

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

Usage

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