Patternfly Logo

Accessibility

Examples

Screen reader only

Content 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

The text underneath is hidden.This text is hidden.

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

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

View source on GitHub