Back to all reviewers

accessibility attributes for decorative elements

nrwl/nx
Based on 2 comments
Other

Decorative images, icons, and other visual elements that don't convey meaningful content should include `aria-hidden="true"` to prevent screen readers from announcing them. This ensures a cleaner experience for users with assistive technologies and maintains consistent accessibility markup patterns across the codebase.

Code Style Other

Reviewer Prompt

Decorative images, icons, and other visual elements that don’t convey meaningful content should include aria-hidden="true" to prevent screen readers from announcing them. This ensures a cleaner experience for users with assistive technologies and maintains consistent accessibility markup patterns across the codebase.

Apply this attribute to any img, svg, or icon elements that serve purely decorative purposes:

<!-- Decorative sidebar icon -->
<img 
  src={icon} 
  alt="" 
  aria-hidden="true" 
  class="sidebar-icon w-4 h-4 dark:invert"
/>

<!-- Decorative group icon -->
<img 
  src={icon} 
  alt="" 
  aria-hidden="true" 
  class="sidebar-icon w-4 h-4 dark:invert"
/>

This practice should be consistently applied to maintain clean, accessible markup throughout the application.

2
Comments Analyzed
Other
Primary Language
Code Style
Category

Source Discussions