Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Accessibility

Accessibility classes for screen readers and keyboard navigation focus state.

last modified: 17/03/2022 12:00:04

Screen reader only

Show for screen readers only

To visually hide content, while still allowing assistive technology to read it, add the class show-for-sr class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

This text can only be read by a screen reader.

Hide for screen readers only

To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true" class. This doesn't affect how the element looks, but screen readers will skip over it.


Show only on focus

For visually hidden interactive controls, such as traditional “skip” links, put show-on-focus class. This will ensure that the control becomes visible once focused (for sighted keyboard users).