Content which should be visually hidden, but remain accessible to assistive
technologies such as screen readers, can be styled using the
This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of icons or colour) need to also be conveyed to non-visual users.
Another common usage could be to visually hide a form label while maintaining
accessibility, which can be achieved using the
Emojis can add a playfulness to your interface but require some formatting to ensure they are accessible for all users.
Emoji component wraps the provided symbol in a
span with a
attribute. If a label is provided, then it is passed as an
aria-label to the
span. If no label is provided the emoji is assumed to be a decorative element
with no semantic meaning and is hidden from screen-readers.