HTML

Accessibility

ExamplesDocumentation

Examples

Screen reader only

ontent available only to screen reader, open inspector to investigateThis content is intended to be announced by assistive technologies, but not visually presented.

Visible

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

Hidden

he text underneath is hidden.This text is hidden.

Documentation

Overiew

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

Usage

ClassApplied toOutcome
.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