Icon Design Graphics Icon 5 — Questions and Answers
Question 1: What does 'ARIA label' on an icon element accomplish in web accessibility?
- It sets the icon's display size for screen readers
- It provides a text description of the icon's purpose for assistive technologies like screen readers (Correct answer)
- It hides the icon from visual display while keeping it in the DOM
- It links the icon to its SVG source file
Correct answer: It provides a text description of the icon's purpose for assistive technologies like screen readers
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?
- PNG sprites embedded in a CSS file
- SVG content inlined as JSX components, allowing styling with props (Correct answer)
- ICO files referenced via img tags
- Base64-encoded GIFs embedded in JSON
Correct answer: SVG content inlined as JSX components, allowing styling with props
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?
- Increasing the icon's bounding box size
- Switching from an outlined to a filled style or changing color/weight (Correct answer)
- Adding a drop shadow to the active icon
- Rotating the icon 45 degrees
Correct answer: Switching from an outlined to a filled style or changing color/weight
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?
- 2:1 against the background
- 3:1 against the background (Correct answer)
- 4.5:1 against the background
- 7:1 against the background
Correct answer: 3:1 against the background
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?
- To add animation keyframes to the SVG
- To reduce the number of SVG elements and simplify the file for reliable rendering and smaller size (Correct answer)
- To convert the icon to PNG format automatically
- To enable icon font generation from the SVG
Correct answer: To reduce the number of SVG elements and simplify the file for reliable rendering and smaller size
Flattening merges overlapping shapes into a single compound path, reducing DOM complexity and preventing unintended rendering artifacts.
Question 6: What is 'negative space' and how is it used effectively in icon design?
- The empty area around an icon used for layout spacing
- Intentional empty areas within an icon's silhouette that create implied shapes or details (Correct answer)
- The dark background behind a light icon
- Whitespace between icon and its label text
Correct answer: Intentional empty areas within an icon's silhouette that create implied shapes or details
Negative space uses the background to imply shapes or details inside an icon, allowing complex concepts to be expressed with minimal visual noise.
Question 7: When designing icons for both light and dark mode, what is the BEST practice for handling icon colors?
- Create separate red and blue versions of each icon for each mode
- Use a single currentColor value so the icon inherits its color from the surrounding text or CSS variable (Correct answer)
- Export two separate PNG files per icon for each mode
- Apply a CSS invert filter to flip icons from light to dark mode
Correct answer: Use a single currentColor value so the icon inherits its color from the surrounding text or CSS variable
currentColor makes SVG icons inherit the computed color of their container, adapting automatically to theme changes without duplicate assets.
Icon Design Graphics Icon 5
What does 'ARIA label' on an icon element accomplish in web accessibility?