VisuallyHidden
This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.
A utility component to visually hide content while keeping it accessible to screen readers. This is a common pattern for accessibility, often implemented with a CSS class like .sr-only or .visually-hidden. This component provides a declarative way to achieve the same result.
Live Preview
Visually Hidden Usage
The VisuallyHidden component will hide content from the screen, but the content will still be available to screen readers. This is useful for accessibility, for example, providing a text label for an icon-only button.
In the example below, we have a button with a "Close" icon. Sighted users can see the icon, and screen reader users will hear the text "Close".
You can also use it to provide additional context that might be obvious to sighted users but not to screen reader users.
New post
View Vue Code
<template>
<section>
<div class="mbe4">
<h2 class="mbs1 mbe3">Visually Hidden Usage</h2>
<p class="mbe3">
The <code>VisuallyHidden</code> component will hide content from the screen,
but the content will still be available to screen readers. This is useful
for accessibility, for example, providing a text label for an icon-only button.
</p>
<p>
In the example below, we have a button with a "Close" icon. Sighted users
can see the icon, and screen reader users will hear the text "Close".
</p>
</div>
<div class="flex-inline-center mbe4">
<button class="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<VueVisuallyHidden>Close</VueVisuallyHidden>
</button>
</div>
<div class="mbe4">
<p>
You can also use it to provide additional context that might be obvious
to sighted users but not to screen reader users.
</p>
</div>
<div class="mbe4">
<p>
New post<VueVisuallyHidden> (opens in a new window)</VueVisuallyHidden>
</p>
</div>
</section>
</template>
<script setup lang="ts">
import { VueVisuallyHidden } from "agnosticui-core/visually-hidden/vue";
</script>
Live Preview
View Lit / Web Component Code
import { LitElement, html } from 'lit';
import 'agnosticui-core/visually-hidden';
export class VisuallyHiddenLitExamples extends LitElement {
createRenderRoot() {
return this;
}
render() {
return html`
<section>
<div class="mbe4">
<h2 class="mbs1 mbe3">Visually Hidden Usage</h2>
<p class="mbe3">
The <code>VisuallyHidden</code> component will hide content from the screen,
but the content will still be available to screen readers. This is useful
for accessibility, for example, providing a text label for an icon-only button.
</p>
<p>
In the example below, we have a button with a "Close" icon. Sighted users
can see the icon, and screen reader users will hear the text "Close".
</p>
</div>
<div class="flex-inline-center mbe4">
<button class="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<ag-visually-hidden>Close</ag-visually-hidden>
</button>
</div>
<div class="mbe4">
<p>
You can also use it to provide additional context that might be obvious
to sighted users but not to screen reader users.
</p>
</div>
<div class="mbe4">
<p>
New post<ag-visually-hidden> (opens in a new window)</ag-visually-hidden>
</p>
</div>
</section>
`;
}
}
customElements.define('visually-hidden-lit-examples', VisuallyHiddenLitExamples);
Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.
View React Code
import { ReactVisuallyHidden } from "agnosticui-core/visually-hidden/react";
export default function VisuallyHiddenReactExamples() {
return (
<section>
<div className="mbe4">
<h2 className="mbs1 mbe3">Visually Hidden Usage</h2>
<p className="mbe3">
The <code>VisuallyHidden</code> component will hide content from the screen,
but the content will still be available to screen readers. This is useful
for accessibility, for example, providing a text label for an icon-only button.
</p>
<p>
In the example below, we have a button with a "Close" icon. Sighted users
can see the icon, and screen reader users will hear the text "Close".
</p>
</div>
<div className="flex-inline-center mbe4">
<button className="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<ReactVisuallyHidden>Close</ReactVisuallyHidden>
</button>
</div>
<div className="mbe4">
<p>
You can also use it to provide additional context that might be obvious
to sighted users but not to screen reader users.
</p>
</div>
<div className="mbe4">
<p>
New post<ReactVisuallyHidden> (opens in a new window)</ReactVisuallyHidden>
</p>
</div>
</section>
);
}
Props
This component does not have any props. It simply wraps the content you provide to it in the default slot.
Events
This component does not emit any events.
Accessibility
The VisuallyHidden component is an accessibility utility. It helps provide context to screen reader users that might be visually apparent to sighted users. A common use case is providing a text label for an icon-only button. The content remains in the accessibility tree and can be read by assistive technologies, but it is positioned off-screen so it is not visible.