Accessibility utility generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS snippet?

Given the following SASS code that generates a utility class for screen reader only content, what is the compiled CSS output?

SASS

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

.sr-only {
  @include sr-only;
}

A

.sr-only {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  clip: auto !important;
}

B

.sr-only {
  position: relative !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 1px solid !important;
}

C

.sr-only {
  display: none !important;
}

D

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

💡 Hint

Think about how screen reader only styles hide content visually but keep it accessible.

The mixin applies styles that visually hide the element but keep it accessible to screen readers. The clip and position absolute with tiny size and negative margin achieve this.

🧠 Conceptual

intermediate

Which SASS feature helps generate multiple accessibility utilities efficiently?

You want to create several utility classes for accessibility (like .sr-only, .focus-visible, .aria-hidden) using SASS. Which feature helps you write less code and generate these classes dynamically?

A Using @mixin to define reusable style blocks and @include to apply them

B Using @function to create CSS variables for colors

C Using @extend to inherit styles from HTML elements

D Using @import to load external CSS files

💡 Hint

Think about how to reuse style blocks in multiple places.

Mixins allow you to define reusable style blocks that can be included in multiple classes, perfect for generating accessibility utilities.

❓ selector

advanced

Which selector correctly targets elements with aria-hidden="true" in SASS?

You want to write a SASS rule that styles all elements with the attribute aria-hidden set to true. Which selector syntax is correct?

A

[aria-hidden="true"] {
  display: none;
}

B

.aria-hidden-true {
  display: none;
}

C

#aria-hidden=true {
  display: none;
}

D

[aria-hidden=true] {
  display: block;
}

💡 Hint

Attribute selectors use square brackets and quotes for exact matches.

The correct CSS attribute selector syntax uses square brackets with the attribute name and value in quotes. Option A matches elements with aria-hidden="true".

❓ layout

advanced

What visual effect does this accessibility utility produce?

Consider this SASS utility class for keyboard focus visibility: .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } What will a user see when an element has this class?

A The element becomes invisible

B A blue outline around the element with a small gap from the element's border

C The element's background color changes to blue

D The element's text becomes bold and underlined

💡 Hint

Outline and outline-offset control border-like focus rings.

The outline property draws a visible border around the element, and outline-offset creates space between the border and the element's edge, making the focus ring clear and accessible.

❓ accessibility

expert

What is the effect of this SASS snippet on screen reader users?

This SASS code creates a utility class: .visually-hidden-focusable { @include sr-only; &:focus, &:active { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } } What does this utility do for users navigating with keyboard and screen readers?

A Makes content visible only on mouse hover

B Always hides content from screen readers and keyboard users

C Hides content visually but reveals it when the element receives keyboard focus

D Removes all focus styles from the element

💡 Hint

Think about how focus styles help keyboard users find hidden content.

This utility hides content visually by default but makes it visible and accessible when focused or active, helping keyboard users access important information that is otherwise hidden.

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