Awesome Reviewers expert instructions

domains / / nrwl/nx

accessibility attributes for decorative elements

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.

raw .md Code Style 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.

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.