Accessibility

Reduced motion page animation styles and visually hidden text utilities for assistive browsing.

Examples (anchor)

Smooth scroll and view-transition (anchor)

Neither smooth-scroll nor view-transition are used for this website's styles due to the authors personal preference for not using them. The styles for each are compiled as follows:

@media (prefers-reduced-motion: no-preference) { 
  :where(html) {
    scroll-behavior: smooth;
  }
  
  @view-transition {
    navigation: auto;
  }
}

Visually hidden text (anchor)

The .vis-hidden and .vis-hidden-focus classes are standard utilities for hiding textual content from the visual interface but keeping the text available for users with assistive browsing. The utilities are compiled as follows:

.vis-hidden, .vis-hidden-focus:not(:focus):not(:focus-within) {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Using the modules (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

Smooth-scroll and view-transition in a @media (prefers-reduced-motion: no-preference) query:

@use "stylemods/scss" as *;
@include vis-hidden-css;
@include combined-motion-no-preference-css;

Or individually within the pre-configured @media query:

@use "stylemods/scss" as *;
@include vis-hidden-css;
@include smooth-scroll-no-preference-css;

Or using your own @media query* where other animation styles can also be included:

@use "stylemods/scss" as *;
@include vis-hidden-css;
@media (prefers-reduced-motion: no-preference) { 
  @include smooth-scroll-css;
  @include view-transition-css;
}

*Whilst a @media query is not necessary for the styles to work by excluding it you're disregarding a specific accessibility preference your website's user has chosen for browsing the internet. The styles are categorized under accessibility to draw attention to this and encourage developers to respect their users preferences when including animated styles.

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Enable using custom overrides or in the configuration.scss document:

@use 'stylemods/scss/configuration' with (
  $enable-vis-hidden: true,
  $enable-smooth-scroll: true,
  $enable-view-transition: true,
);

$enable-vis-hidden:       false !default;
$enable-smooth-scroll:    false !default;
$enable-view-transition:  false !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

// ---------------------------------------------------------- 
// Accessibility
// ----------------------------------------------------------

@mixin smooth-scroll-css {
  :where(html) {
    scroll-behavior: smooth;
  }
}

@mixin view-transition-css {
  @view-transition {
    navigation: auto;
  }
}

@mixin smooth-scroll-no-preference-css {
  @media (prefers-reduced-motion: no-preference) { 
    @include smooth-scroll-css;
  }
}

@mixin view-transition-no-preference-css {
  @media (prefers-reduced-motion: no-preference) { 
    @include view-transition-css;
  }
}

@mixin combined-motion-no-preference-css {
  @media (prefers-reduced-motion: no-preference) { 
    @include smooth-scroll-css;
    @include view-transition-css;
  }
}

@mixin vis-hidden-mixin {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@mixin vis-hidden-css {
  .vis-hidden, .vis-hidden-focus:not(:focus):not(:focus-within) {
    @include vis-hidden-mixin;
  }
}