package.docs.utilities.Accessibility.examples.Accessibility.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Accessibility
section: utility-classes
---## Examples

### Screen reader only

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

```

### Visible

```html
This unsets .pf-v6-u-screen-reader and .pf-v6-screen-reader. It will be visible.

```

### Hidden

```html
The text underneath is hidden.
This text is hidden.

```

## Documentation

### Overview

[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-screen-reader-on-lg**

### Usage

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