Consider adding a <VisuallyHidden /> component

[rpfaeffle]

Why?

When creating accessible components and websites there is often a need for additional informations that should only be displayed to users in need of screen-readers. Therefore the text should be visually hidden but still visible to screen-readers.

An example would be links that open in a new tab, this behaviour should be announced by the screen-reader to prevent confusion.

Usage

Example usage:

<a href="https://onyx.schwarz" target="_blank">
    Onyx Documentation<VisuallyHidden as="span">, opens in new tab</VisuallyHidden>
</a>

Implementation

The implementation of such a component would be quite straightforward.

.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

<script setup lang="ts">
defineProps<{
  as?: string;
}>()
</script>

<component :is="as ?? 'span'"></slot ></component>

[JoCa96]

Great idea! Do you have additional best practices or examples where this would be used?
I am asking because links that open in a new tab, this behaviour should be announced by the screen-reader to prevent confusion is something that I would like to add to our guidelines, maybe you have more like this?

[rpfaeffle]

It could basically be used instead of aria-label on non-interactive elements, as those do not support aria-label but sometimes need an additional description for screen-reader users.

[larsrickert]

I like the idea :) Question: I would expect the screen reader to automatically announce that the link is opened in a new tab when the target="_blank" attribute is set. Isn't this the case?

[rpfaeffle]

Unfortunately this is not the case. There is even an implementation page of W3C (https://www.w3.org/TR/WCAG20-TECHS/G201.html) about that implementation.

[larsrickert]

onyx supports a OnyxVisuallyHidden component, you can check it out here