Visibility utilities

tier 2 — classes

What is shown, and to whom. Three separate questions: something drawn for a screen reader and not the screen, something present but not usable, and something for paper rather than the display.

None of these is a substitute for the platform Use the hidden attribute to remove something, disabled on a control that cannot be used, and aria-busy on a region that is reloading. The classes below are for the cases those do not cover, and each one wants its ARIA attribute alongside.

Screen readers only

.visually-hidden takes an element out of the visual rendering and keeps it in the accessibility tree — the name of an icon-only button, a table caption, the target of an aria-describedby — where display: none and width: 0 remove it from the tree as well. .visually-hidden--focusable brings it back when it is reached by keyboard, as a skip link does; the demo above has one, so press Tab.

An icon-only button whose name is announced but not drawn.

<div class="sedna-col" style="max-width:420px">
    <a class="btn visually-hidden visually-hidden--focusable" href="#">
        Focus me with Tab to reveal this link
    </a>
    <div class="sedna-row" style="border:1px solid var(--border); padding:8px">
        <button class="btn btn-icon" type="button">
            <i class="ri-download-2-line"></i>
            <span class="visually-hidden">Export the current view</span>
        </button>
        <span class="text-muted">An icon-only button whose name is announced but not drawn.</span>
    </div>
</div>

State

.sedna-busy dims a block and stops interaction while it reloads — pair it with aria-busy="true", which is the part that is announced. .sedna-invisible hides something that must keep its space, and .sedna-disabled is for something unavailable that is not a <button>, <input> or <a>; add aria-disabled="true" alongside.

Reloading — this content is stale and not interactive.

Reserved space follows: invisible but still occupying its width

Export (not available)

<div class="sedna-col" style="max-width:460px">
    <div class="card sedna-busy" aria-busy="true">
        <div class="card-body">Reloading — this content is stale and not interactive.</div>
    </div>
    <div class="sedna-row">
        <span>Reserved space follows:</span>
        <span class="sedna-invisible">invisible but still occupying its width</span>
    </div>
    <div class="sedna-row">
        <span class="sedna-disabled" aria-disabled="true"><i class="ri-download-2-line"></i> Export (not available)</span>
    </div>
</div>

Print

.sedna-no-print keeps an app's own chrome off the paper and .sedna-print-only lets a sheet carry something the screen does not — a signature line, a reference number, the URL a link points at. The frame already drops itself, so these two are for content the library cannot see.

.sedna-no-print — on screen only .sedna-print-only — on paper only

<div class="sedna-col" style="max-width:460px">
    <div class="sedna-row" style="border:1px solid var(--border); padding:8px">
        <span class="sedna-no-print">.sedna-no-print — on screen only</span>
        <span class="sedna-print-only">.sedna-print-only — on paper only</span>
    </div>
</div>