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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) as demonstrated 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.

Source code (anchor)

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