0
0
SASSmarkup~5 mins

Accessibility utility generation in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Accessibility utilities help make websites usable for everyone, including people with disabilities. They provide easy ways to add important features like focus outlines and screen reader support.

When you want to quickly add keyboard focus styles to buttons and links.
When you need to hide content visually but keep it readable by screen readers.
When you want to improve color contrast for better readability.
When you want to create reusable styles that improve accessibility across your site.
When you want to ensure your site meets basic accessibility standards without repeating code.
Syntax
SASS
@mixin accessibility-utility($type) {
  @if $type == 'focus-outline' {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  } @else if $type == 'sr-only' {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

This mixin uses a parameter to generate different accessibility styles.

Use @include accessibility-utility('focus-outline'); to add focus outlines.

Examples
Adds a visible outline when an element is focused, helping keyboard users see where they are.
SASS
@include accessibility-utility('focus-outline');
Makes content invisible visually but still readable by screen readers.
SASS
@include accessibility-utility('sr-only');
Sample Program

This example shows two accessibility utilities: a focus outline on a button and screen-reader-only text inside a paragraph.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Accessibility Utilities Example</title>
  <style>
    /* Compiled CSS from SASS */
    .focusable:focus {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
  </style>
</head>
<body>
  <button class="focusable">Click me</button>
  <p><span class="sr-only">Screen reader only text.</span> Visible text here.</p>
</body>
</html>
OutputSuccess
Important Notes

Always test your accessibility utilities with keyboard navigation and screen readers.

Use semantic HTML along with utilities for best results.

Summary

Accessibility utilities make your site easier to use for everyone.

SASS mixins let you reuse accessibility styles easily.

Focus outlines and screen-reader-only text are common utilities to start with.