Visually Hidden #
The aFP Design System provides the afp-visually-hidden utility to hide elements visually while keeping them accessible to assistive technologies, such as screen readers. This is useful for content that should be read by screen readers but not displayed on screen, or for hints, labels, and instructions that improve accessibility without cluttering the visual layout.
Elements that are visually hidden can still receive focus when navigating via keyboard. When an element inside a visually hidden container gains focus, it becomes visible to sighted users. This ensures that keyboard users can see where the focus is, maintaining usability and accessibility.
Classes #
| Class | Description |
|---|---|
afp-visually-hidden |
Hides content visually but keeps it accessible to screen readers and other assistive technologies. |
afp-visually-hidden-force |
Forces an element to remain hidden visually regardless of state. |
afp-visually-hidden-hint |
Used for hints; hides the content visually while allowing it to be associated with interactive elements via the hint part. |
afp-visually-hidden-label |
Used for labels; hides the content visually while keeping it accessible via the label part. |