website
website copied to clipboard
[CaseStudiesSection] Avatars are missing alternative text (accessibility bug)
Bug report
Current Behavior
- Go to https://www.radix-ui.com/primitives
- Open Chrome DevTools
- Open the Elements panel
- Locate the "Case Studies World-class teams use Radix Primitives to power their products" section
- Locate the two avatar img elements
- Open the Accessibility panel
- 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