A11y

Accessibility mixins for better user experience.

accessible-item()

Hides an element visually but keeps it accessible to screen readers.

Usage

.element {
    @include accessible-item();
}

Rendered CSS

.element {
    position: absolute;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

unselectable()

Prevents an element to be selected.

Parameter	Type	Default Value	Description
$bool	boolean	true	If true, disables selection and pointer events; if false, enables them

Usage

.button {
    @include unselectable();
}

Rendered CSS

.button {
    pointer-events: none;
    user-select: none;
}