Fix: Add accessibility attributes to UI Kit card images and icons

[huangkevin-apr]

Summary

This PR addresses 6 accessibility violations identified by IBM Equal Access Accessibility Checker in the UI Component Kits section of the website homepage. The fixes ensure proper alternative text for preview images and appropriate labeling for decorative external link icons, bringing the component into full WCAG Level A compliance.

Problem

As shown in this figure, the accessibility checker identified two types of violations:

1. Missing Image Alt Text (3 violations - img_alt_valid)
   Preview images for NativewindUI, React Native Reusables, and gluestack lacked alternative text, making them inaccessible to screen reader users.

2. Missing SVG Accessible Names (3 violations - svg_graphics_labelled)
   External link icons (ExternalLink component from Lucide React) within the card headings lacked accessible names, preventing screen reader users from understanding their purpose.

Solution

Image Alt Text
Added dynamic alt attribute to preview images using the title prop, providing meaningful context:

<img
  alt={title}
  className="..."
  src={ogUrl}
/>

This ensures each preview image has descriptive alternative text (e.g., "NativewindUI", "React Native Reusables", "gluestack") that conveys the content's purpose to screen reader users.

External Link Icon Labeling
Added aria-label="Opens in a new tab" to the ExternalLink icon component:

<ExternalLink
  aria-label="Opens in a new tab"
  className="..."
/>

This provides screen reader users with clear information about the icon's function without redundancy, since the link destination is already conveyed by the adjacent title text.

Changes

Fix Before:

Fix After:

Testing

✅ Verified with IBM Equal Access Accessibility Checker
✅ All 3 img_alt_valid violations resolved
✅ All 3 svg_graphics_labelled violations resolved
✅ Screen reader testing: Images properly announced with context, external link icons provide clear action indication
✅ Visual appearance unchanged

Additional Info

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission.

[vercel]

@huangkevin-apr is attempting to deploy a commit to the nativewind Team on Vercel.

A member of the Team first needs to authorize it.