Visually Hidden

Overview

Source: ./src/fragments/visually-hidden/Visually-Hidden.mdx

Visually Hidden

The oc-visually-hidden class hides content visually but keeps it accessible to screen readers and assistive technologies.

Use oc-visually-hidden to:

• Add extra context for screen reader users (e.g., form instructions, button context)
• Hide headings or labels visually but keep them accessible for accessibility compliance

Do not use oc-visually-hidden to:

• Hide interactive elements that should be visible to all users
• Hide important information from all users

Practical examples

Button with extra screen reader context

Basic Usage

Story: fragments-visually-hidden--basic · tags: fragments, visually-hidden

      <oc-button-v1>
        Submit
        <span class="oc-visually-hidden"> your order</span>
      </oc-button-v1>
      <pre
        style="background:#f6f8fa; border-radius:6px; padding:8px; overflow:auto; border: 2px dashed #d0d7de; margin-top:16px;"
      >
        <code>
${`<oc-button-v1>
  Submit
  <span class="oc-visually-hidden"> your order</span>
</oc-button-v1>`}
        </code>
      </pre>

{
  name: "Basic Usage",
  render() {
    return html`
      <oc-button-v1>
        Submit
        <span class="oc-visually-hidden"> your order</span>
      </oc-button-v1>
      <pre
        style="background:#f6f8fa; border-radius:6px; padding:8px; overflow:auto; border: 2px dashed #d0d7de; margin-top:16px;"
      >
        <code>
${`<oc-button-v1>
  Submit
  <span class="oc-visually-hidden"> your order</span>
</oc-button-v1>`}
        </code>
      </pre>
    `;
  }
}

Visually hidden heading for document structure

Hidden Heading

Story: fragments-visually-hidden--hidden-heading · tags: fragments, visually-hidden

      <h2 class="oc-visually-hidden">Checkout section</h2>

      <p>This section is visually separated, but the heading is only for screen readers.</p>
      <pre
        style="background:#f6f8fa; border-radius:6px; padding:8px; overflow:auto; border: 2px dashed #d0d7de; margin-top:16px;"
      >
        <code>
${`<h2 class="oc-visually-hidden">Checkout section</h2>
<p>This section is visually separated, but the heading is only for screen readers.</p>`}
        </code>
      </pre>

{
  name: "Hidden Heading",
  render() {
    return html`
      <h2 class="oc-visually-hidden">Checkout section</h2>

      <p>This section is visually separated, but the heading is only for screen readers.</p>
      <pre
        style="background:#f6f8fa; border-radius:6px; padding:8px; overflow:auto; border: 2px dashed #d0d7de; margin-top:16px;"
      >
        <code>
${`<h2 class="oc-visually-hidden">Checkout section</h2>
<p>This section is visually separated, but the heading is only for screen readers.</p>`}
        </code>
      </pre>
    `;
  }
}