Accessibility utility generation in SASS - Mini Project: Build & Apply

Accessibility Utility Generation with Sass

📖 Scenario: You are building a small Sass utility to help web developers quickly add accessibility features to their HTML elements. These utilities will include classes to visually hide content but keep it accessible to screen readers, and classes to manage focus outlines for keyboard navigation.

🎯 Goal: Create a Sass file that defines accessibility utility classes using variables and loops. The utilities should include a visually hidden class and a focus-visible outline class. This will help developers improve accessibility easily by adding these classes to their HTML elements.

📋 What You'll Learn

Create a Sass map variable called $accessibility-utilities with two entries: visually-hidden and focus-outline.

Add a configuration variable $focus-outline-color set to #005fcc.

Use a Sass @each loop to generate CSS classes for each utility in $accessibility-utilities.

Complete the CSS rules for .visually-hidden and .focus-outline classes using the map values and configuration variable.

💡 Why This Matters

🌍 Real World

Accessibility utilities help developers quickly add important features for screen reader users and keyboard navigation without writing repetitive CSS.

💼 Career

Knowing how to write reusable Sass utilities and manage accessibility is valuable for front-end developers working on inclusive websites.

1

Create the accessibility utilities map

Create a Sass map variable called $accessibility-utilities with these exact entries: visually-hidden and focus-outline. The value for visually-hidden should be a nested map with keys position set to absolute, width set to 1px, height set to 1px, padding set to 0, margin set to -1px, overflow set to hidden, clip set to rect(0, 0, 0, 0), white-space set to nowrap, and border set to 0. The value for focus-outline should be a nested map with keys outline-style set to solid, outline-width set to 2px, and outline-offset set to 2px.

SASS

# Create the $accessibility-utilities map with visually-hidden and focus-outline nested maps
# Your code here

Hint

Use a Sass map with nested maps for each utility. Follow the exact keys and values given.

2

Add the focus outline color variable

Add a Sass variable called $focus-outline-color and set it to the exact color value #005fcc.

SASS

$accessibility-utilities: (
  visually-hidden: (
    position: absolute,
    width: 1px,
    height: 1px,
    padding: 0,
    margin: -1px,
    overflow: hidden,
    clip: rect(0, 0, 0, 0),
    white-space: nowrap,
    border: 0
  ),
  focus-outline: (
    outline-style: solid,
    outline-width: 2px,
    outline-offset: 2px
  )
);

# Add the $focus-outline-color variable below
# Your code here

Hint

Define a simple Sass variable with the exact name and color value.

3

Generate CSS classes with @each loop

Use a Sass @each loop with variables $name and $properties to iterate over $accessibility-utilities. Inside the loop, create a CSS class named .#{$name} and set its CSS properties using another @each loop over $properties with variables $prop and $value. Assign each property $prop the value $value.

SASS

$accessibility-utilities: (
  visually-hidden: (
    position: absolute,
    width: 1px,
    height: 1px,
    padding: 0,
    margin: -1px,
    overflow: hidden,
    clip: rect(0, 0, 0, 0),
    white-space: nowrap,
    border: 0
  ),
  focus-outline: (
    outline-style: solid,
    outline-width: 2px,
    outline-offset: 2px
  )
);

$focus-outline-color: #005fcc;

# Use @each loop to generate CSS classes for each utility
# Your code here

Hint

Use nested @each loops: outer for utilities, inner for properties.

4

Add the focus color to the focus-outline class

Add a CSS property outline-color with the value $focus-outline-color inside the .focus-outline class only. Do this by adding an @if condition inside the @each loop that checks if $name equals focus-outline. If true, add outline-color: $focus-outline-color; inside the class.

SASS

$accessibility-utilities: (
  visually-hidden: (
    position: absolute,
    width: 1px,
    height: 1px,
    padding: 0,
    margin: -1px,
    overflow: hidden,
    clip: rect(0, 0, 0, 0),
    white-space: nowrap,
    border: 0
  ),
  focus-outline: (
    outline-style: solid,
    outline-width: 2px,
    outline-offset: 2px
  )
);

$focus-outline-color: #005fcc;

@each $name, $properties in $accessibility-utilities {
  .#{$name} {
    @each $prop, $value in $properties {
      #{$prop}: $value;
    }
    // Add outline-color for focus-outline class
    // Your code here
  }
}

Hint

Use an @if condition inside the loop to add the outline-color only for the focus-outline class.

Practice

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