Accessibility utility generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a utility class that visually hides content but keeps it accessible to screen readers.

SASS

.sr-only {
  position: [1];
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Bstatic

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using position: relative or static which keeps the element visible.

Not setting clip or overflow properties.

The position: absolute; removes the element from the normal flow and allows it to be visually hidden while still accessible to screen readers.

2fill in blank

medium

Complete the mixin to generate a utility class that hides content visually but keeps it accessible.

SASS

@mixin sr-only {
  position: [1];
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Drag options to blanks, or click blank then click option'

Astatic

Babsolute

Csticky

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed or static positioning which either fixes the element or keeps it visible.

Forgetting to set clip or overflow properties.

The mixin uses position: absolute; to visually hide the element but keep it accessible.

3fill in blank

hard

Fix the error in the utility class that should visually hide content but keep it accessible.

SASS

.sr-only {
  position: [1];
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Brelative

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative or static position which keeps the element visible.

Incorrect clip syntax without commas.

The clip property requires commas between values. Using position: absolute; is necessary to hide the element visually but keep it accessible.

4fill in blank

hard

Fill both blanks to create a mixin that generates a utility class for screen reader only content.

SASS

@mixin sr-only {
  position: [1];
  clip: [2];
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Brect(0, 0, 0, 0)

Cfixed

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed or relative position which does not hide the element properly.

Using clip without commas or incorrect values.

The position: absolute; removes the element from normal flow, and clip: rect(0, 0, 0, 0); hides it visually but keeps it accessible.

5fill in blank

hard

Fill all three blanks to create a reusable accessibility utility mixin with customizable position, clip, and white-space properties.

SASS

@mixin sr-utility($pos: [1], $clip: [2], $ws: [3]) {
  position: $pos;
  clip: $clip;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: $ws;
  border: 0;
}

Drag options to blanks, or click blank then click option'

Afixed

Brect(0, 0, 0, 0)

Cnowrap

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed position which may cause unexpected behavior.

Forgetting commas in clip property.

Using normal white-space which allows wrapping.

The mixin uses default parameters: position: relative; to position the element, clip: rect(0, 0, 0, 0); to hide it visually, and white-space: nowrap; to prevent line breaks.