Bird
Raised Fist0
SASSmarkup~5 mins

Accessibility utility generation in SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What is the main purpose of accessibility utilities in SASS?
easy
A. To add colorful backgrounds to web pages
B. To make websites easier to use for everyone, including people with disabilities
C. To speed up website loading times
D. To create animations for buttons

Solution

  1. Step 1: Understand accessibility utilities

    Accessibility utilities are styles or code that help users with disabilities navigate and use websites better.

  2. Step 2: Identify the main goal

    The main goal is to improve usability for everyone, especially those with disabilities, not visual decoration or speed.

  3. Final Answer:

    To make websites easier to use for everyone, including people with disabilities -> Option B

  4. Quick Check:

    Accessibility = usability for all [OK]
Hint: Accessibility utilities improve usability for all users [OK]
Common Mistakes:
  • Confusing accessibility with visual design
  • Thinking accessibility speeds up loading
  • Assuming accessibility is only for animations
2. Which SASS syntax correctly defines a mixin for hiding content visually but keeping it accessible to screen readers?
easy
A. @mixin sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
B. @mixin sr-only { display: none; }
C. @mixin sr-only { visibility: hidden; }
D. @mixin sr-only { opacity: 0; pointer-events: none; }

Solution

  1. Step 1: Recall screen-reader-only styles

    Screen-reader-only styles hide content visually but keep it accessible by positioning it off-screen and clipping it.

  2. Step 2: Check each option

    @mixin sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } uses position absolute, tiny size, overflow hidden, and clip to hide visually but keep accessible. The other options hide content completely from screen readers.

  3. Final Answer:

    @mixin sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } -> Option A

  4. Quick Check:

    Screen-reader-only = off-screen + clip [OK]
Hint: Use position absolute and clip for screen-reader-only [OK]
Common Mistakes:
  • Using display:none hides from screen readers
  • Using visibility:hidden also hides from screen readers
  • Using opacity:0 does not remove from layout
3. Given this SASS mixin for focus outline: 
@mixin focus-outline($color) {
  outline: 2px solid $color;
  outline-offset: 2px;
}
What CSS will be generated by @include focus-outline(blue);?
medium
A. outline: 2px dashed blue; outline-offset: 2px;
B. outline: 2px solid red; outline-offset: 2px;
C. border: 2px solid blue; outline-offset: 2px;
D. outline: 2px solid blue; outline-offset: 2px;

Solution

  1. Step 1: Understand mixin parameters

    The mixin takes a color parameter and sets outline with that color and offset 2px.

  2. Step 2: Substitute parameter with 'blue'

    Replacing $color with blue gives outline: 2px solid blue; outline-offset: 2px;

  3. Final Answer:

    outline: 2px solid blue; outline-offset: 2px; -> Option D

  4. Quick Check:

    Mixin color param = blue output [OK]
Hint: Replace $color with argument in mixin output [OK]
Common Mistakes:
  • Confusing border with outline
  • Using wrong outline style like dashed
  • Mixing up color values
4. Identify the error in this SASS mixin for focus outline utility: 
@mixin focus-outline($color) {
  outline: 2px solid $color
  outline-offset: 2px;
}
medium
A. Missing semicolon after outline property
B. Incorrect property name 'outline-offset'
C. Using $color without quotes
D. Outline width should be 1px, not 2px

Solution

  1. Step 1: Check SASS property syntax

    Each property must end with a semicolon to separate declarations.

  2. Step 2: Locate missing semicolon

    The line 'outline: 2px solid $color' lacks a semicolon at the end, causing syntax error.

  3. Final Answer:

    Missing semicolon after outline property -> Option A

  4. Quick Check:

    Missing semicolon = syntax error [OK]
Hint: Always end SASS properties with semicolons [OK]
Common Mistakes:
  • Forgetting semicolons between properties
  • Thinking $color needs quotes
  • Confusing property names
5. You want to create a reusable SASS utility mixin that generates both a focus outline and a screen-reader-only style. Which of the following is the best combined mixin code?
hard
A. @mixin accessibility-utility($color) { outline: 2px solid $color; outline-offset: 2px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
B. @mixin accessibility-utility($color) { border: 2px solid $color; clip-path: inset(50%); }
C. @mixin accessibility-utility($color) { @include focus-outline($color); @include sr-only; }
D. @mixin accessibility-utility { outline: 2px solid black; display: none; }

Solution

  1. Step 1: Understand mixin reuse

    Best practice is to reuse existing mixins inside a combined mixin for clarity and maintainability.

  2. Step 2: Analyze options

    @mixin accessibility-utility($color) { @include focus-outline($color); @include sr-only; } calls existing mixins focus-outline and sr-only, combining their functionality cleanly. @mixin accessibility-utility($color) { outline: 2px solid $color; outline-offset: 2px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } mixes unrelated styles in one block, which is less maintainable. The other options have incorrect or incomplete styles.

  3. Final Answer:

    @mixin accessibility-utility($color) { @include focus-outline($color); @include sr-only; } -> Option C

  4. Quick Check:

    Reuse mixins for combined utilities [OK]
Hint: Combine utilities by including existing mixins [OK]
Common Mistakes:
  • Writing all styles manually instead of reusing mixins
  • Using display:none hides content from screen readers
  • Confusing border with outline