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

2.5:1

Answer

4.5:1

Answer

7:1

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

Icons load slower than text

Answer

Icons cannot be translated

Answer

Icons increase page file size

Question 3

What HTML attribute should be added to a decorative SVG icon that conveys no information?

Accepted Answer

aria-hidden='true'

Answer

role='img'

Answer

alt='icon'

Answer

tabindex='0'

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

A drop shadow

Answer

A hover animation

Answer

An outline stroke

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

Responsive design requirements

Answer

Dark mode compatibility

Answer

High-DPI display support

Question 6

What is the purpose of a 'focus indicator' when icons are used as interactive elements?

Accepted Answer

To visually show keyboard users which icon currently has keyboard focus

Answer

To animate the icon on hover

Answer

To increase the icon's file size

Answer

To apply a gradient effect to the icon