Icon Design Icon Design Accessibility & Inclusive Design

Question 1

According to WCAG 2.1, what is the minimum contrast ratio required for non-text UI components like icons against their background?

Accepted Answer

3:1

Answer

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?

Accepted Answer

Users, especially those with cognitive disabilities, may not recognize what the icon means

Answer

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?

Accepted Answer

aria-hidden='true'

Answer

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?

Accepted Answer

An accessible name via aria-label or a visually hidden text label

Answer

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?

Accepted Answer

Color blindness, affecting approximately 8% of males in the US

Answer

Color-blind users cannot distinguish certain color combinations, so icons must use shape, pattern, or text in addition to color to convey meaning.

Icon Design Practice Test

Icon Design Practice Test

Icon Design Icon Design Accessibility & Inclusive Design