Accessibility utility generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of accessibility utilities in web development?

Accessibility utilities help make websites usable for everyone, including people with disabilities, by improving keyboard navigation, screen reader support, and visual clarity.

intermediate

In Sass, how can you create a reusable accessibility utility for visually hiding content but keeping it readable by screen readers?

You can create a mixin that applies styles like position: absolute;, width: 1px;, height: 1px;, overflow: hidden;, and clip: rect(0, 0, 0, 0); to hide content visually but keep it accessible.

beginner

Why should accessibility utilities use semantic HTML elements along with CSS?

Semantic HTML provides meaning and structure to content, which helps assistive technologies understand the page better. CSS alone cannot convey meaning, so combining both ensures better accessibility.

intermediate

What Sass feature allows you to generate multiple accessibility utility classes efficiently?

Sass @mixin and @each loops let you create reusable styles and generate multiple utility classes by iterating over lists or maps, reducing repetitive code.

beginner

Name two common accessibility utilities you might generate with Sass.

1. Visually hidden text utility for screen readers.<br>2. Focus outline utilities to improve keyboard navigation visibility.

Which CSS property is commonly used in accessibility utilities to hide content visually but keep it readable by screen readers?

A opacity: 0;

B clip: rect(0, 0, 0, 0);

C visibility: hidden;

D display: none;

Using clip: rect(0, 0, 0, 0); along with other styles hides content visually but keeps it accessible to screen readers. display: none; and visibility: hidden; hide content from all users including screen readers.

In Sass, which directive helps you create reusable style blocks for accessibility utilities?

A @import

B @function

C @mixin

D @extend

@mixin defines reusable style blocks you can include in multiple places, perfect for accessibility utilities.

Why is it important to include focus styles in accessibility utilities?

A To improve keyboard navigation visibility

B To hide elements from screen readers

C To change font size

D To add animations

Focus styles help keyboard users see which element is active, improving navigation and usability.

Which Sass feature allows generating multiple utility classes by looping over a list?

A @each

B @if

C @while

D @import

@each loops over lists or maps to generate multiple classes or styles efficiently.

What is a key benefit of using accessibility utilities in your CSS?

A They add animations

B They reduce page load time

C They change the site color scheme

D They make your site usable for people with disabilities

Accessibility utilities improve usability for people with disabilities by enhancing navigation, readability, and screen reader support.

Explain how you would create a Sass mixin for a visually hidden accessibility utility and why it is useful.

Think about how to hide content from sight but not from assistive technology.

Describe two accessibility utilities you can generate with Sass and how they improve user experience.

Consider utilities that help users who rely on keyboard or screen readers.