Accessibility

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

Examples

Smooth scroll and view-transition

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

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

Add the sassmods.scss to your custom styles as below then include the Sass mixin as demonstrated below.

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

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

Or individually within the pre-configured @media query:

@use "sassmods/scss/sassmods" 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 "sassmods/scss/sassmods" 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.

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins.

// ---------------------------------------------------------- 
// 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;
  }
}