Icon Design Graphics Icon 5

Question 1

What does 'ARIA label' on an icon element accomplish in web accessibility?

Accepted Answer

It provides a text description of the icon's purpose for assistive technologies like screen readers

Answer

An aria-label attribute gives screen readers descriptive text to announce when users navigate to an icon-only interactive element.

Question 2

When exporting icons for a React component library, which format and approach is MOST common?

Accepted Answer

SVG content inlined as JSX components, allowing styling with props

Answer

Inlining SVG as JSX allows React components to accept color and size props, making icons fully themeable without separate CSS.

Question 3

What icon design technique helps visually distinguish a 'selected' or 'active' state from a 'default' state?

Accepted Answer

Switching from an outlined to a filled style or changing color/weight

Answer

Toggling between outlined and filled variants is a common pattern (used in Material Design and iOS tab bars) to signal active state without adding extra elements.

Question 4

Which color contrast ratio does WCAG 2.1 Level AA require for graphical icons that convey information?

Accepted Answer

3:1 against the background

Answer

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for informational icons against adjacent colors.

Question 5

What is the main reason designers flatten or merge icon paths before delivering to developers?

Accepted Answer

To reduce the number of SVG elements and simplify the file for reliable rendering and smaller size

Answer

Flattening merges overlapping shapes into a single compound path, reducing DOM complexity and preventing unintended rendering artifacts.

Icon Design Practice Test

Icon Design Practice Test

Icon Design Graphics Icon 5