Accessibility
The FeatureIcon component displays an image representing a specific feature or ticket type.
Accessibility Props
| Name | Type | Default | Description |
|---|---|---|---|
| alt | string | "" | Text alternative for the icon, used by screen readers to describe the image. |
Image Announcements and Alt Text
The alt attribute determines how screen readers announce the FeatureIcon:
alt=""(default): Icon is treated as decorative and ignored by screen readersalt="text": Screen readers will announce the provided text
Best Practices
Empty alt text
- The icon has adjacent text describing the feature
- The icon is purely decorative and doesn’t add meaningful information
<Stack direction="row" align="center"><FeatureIcon name="TicketFlexi" alt="" /><Text>Flexi Ticket</Text></Stack>
Screen reader announces: “Flexi Ticket” (the icon is ignored)
Descriptive alt text
- The icon stands alone without accompanying text
- The icon conveys unique information
<FeatureIcon name="TicketFlexi" alt="Flexible ticket option" />
Screen reader announces: “Flexible ticket option”
Avoid redundant information
<!-- DON'T do this --><FeatureIcon name="TicketSaver" alt="Saver Ticket" /><Text>Saver Ticket</Text>
Screen reader announces: “Saver Ticket, Saver Ticket” (redundant and confusing)