Icon Design Icon Design Accessibility & Inclusive Design 1 — Questions and Answers
Question 1: According to WCAG 2.1, what is the minimum contrast ratio required for non-text UI components like icons against their background?
- 2.5:1
- 3:1 (Correct answer)
- 4.5:1
- 7:1
Correct answer: 3:1
WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for UI components including icons used to convey information.
Question 2: What is the primary accessibility problem with using icons alone (without text labels) in navigation?
- Icons load slower than text
- Users, especially those with cognitive disabilities, may not recognize what the icon means (Correct answer)
- Icons cannot be translated
- Icons increase page file size
Correct answer: Users, especially those with cognitive disabilities, may not recognize what the icon means
Icon-only navigation relies on the user recognizing metaphors, which is unreliable for unfamiliar or cognitively diverse users — text labels add critical clarity.
Question 3: What HTML attribute should be added to a decorative SVG icon that conveys no information?
- role='img'
- aria-hidden='true' (Correct answer)
- alt='icon'
- tabindex='0'
Correct answer: aria-hidden='true'
aria-hidden='true' hides decorative icons from screen readers so they don't read out meaningless noise to assistive technology users.
Question 4: What should be provided for a functional icon (e.g., a search icon button) to be accessible to screen reader users?
- A drop shadow
- An accessible name via aria-label or a visually hidden text label (Correct answer)
- A hover animation
- An outline stroke
Correct answer: An accessible name via aria-label or a visually hidden text label
Screen readers announce the accessible name of interactive elements; without one, a search button icon is announced as 'button' with no context.
Question 5: Which condition makes it essential for icons to never rely solely on color to convey meaning?
- Responsive design requirements
- Color blindness, affecting approximately 8% of males in the US (Correct answer)
- Dark mode compatibility
- High-DPI display support
Correct answer: Color blindness, affecting approximately 8% of males in the US
Color-blind users cannot distinguish certain color combinations, so icons must use shape, pattern, or text in addition to color to convey meaning.
Question 6: What is the purpose of a 'focus indicator' when icons are used as interactive elements?
- To animate the icon on hover
- To visually show keyboard users which icon currently has keyboard focus (Correct answer)
- To increase the icon's file size
- To apply a gradient effect to the icon
Correct answer: To visually show keyboard users which icon currently has keyboard focus
A visible focus indicator (outline or highlight) is essential for keyboard-only users to know which element is currently selected during navigation.
Icon Design Icon Design Accessibility & Inclusive Design 1
According to WCAG 2.1, what is the minimum contrast ratio required for non-text UI components like icons against their background?