website icon indicating copy to clipboard operation
website copied to clipboard

[CaseStudiesSection] Avatars are missing alternative text (accessibility bug)

Open ashleemboyer opened this issue 1 year ago • 0 comments

Bug report

Current Behavior

  1. Go to https://www.radix-ui.com/primitives
  2. Open Chrome DevTools
  3. Open the Elements panel
  4. Locate the "Case Studies World-class teams use Radix Primitives to power their products" section
  5. Locate the two avatar img elements
  6. Open the Accessibility panel
  7. See that each element does not have an Accessible Name, like pictured:

Expected behavior

The images should both have an Accessible Name.

Suggested solution

The aria-describedby property is used for computing an Accessible Description. The elements that are being referenced in aria-describedby should actually be referenced by aria-labelledby.

These appear to be the two lines of code that need updated:

https://github.com/radix-ui/website/blob/52578d3c5956b26c117ad8328ee40ecc6170b648/components/marketing/CaseStudiesSection.tsx#L54

https://github.com/radix-ui/website/blob/52578d3c5956b26c117ad8328ee40ecc6170b648/components/marketing/CaseStudiesSection.tsx#L82

ashleemboyer avatar Jun 01 '24 23:06 ashleemboyer