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.