ServiceLogo

The ServiceLogo component has been designed with accessibility in mind, providing flexible display options for service and payment provider logos that can be either decorative or semantic depending on context.

The following prop is available to improve the accessibility of your ServiceLogo component:

• The component automatically manages ARIA attributes:
  • When alt is not provided, default role of "presentation" is set. This makes the logo decorative and hidden from screen readers.
  • When alt is provided, the role is set to "img" and the logo becomes accessible to assistive technologies.
• Grayscale mode applies visual styling without affecting accessibility (except for the color contrast)

• If descriptive text should be provided, fill in the alt prop. Role of the ServiceLogo component is automatically set to "img", otherwise it is set to "presentation" by default.
• For payment logos, include the payment method name in the alt text (e.g., “Visa”, “PayPal”, “American Express”).
• For service logos, include the service name and context if relevant (e.g., “Kiwi.com guarantee”, “AirHelp assistance”).
• The alt text should always be translated to the user’s language.
• Avoid redundant alt text when the logo appears next to visible text containing the same information.
• Ensure sufficient color contrast when using grayScale mode, especially against non-white backgrounds.

<Stack>
  <ServiceLogo name="Visa" />
  <Text>Pay with Visa</Text>
</Stack>

Screen reader announces: “Pay with Visa”.

<ServiceLogo name="PayPal" role="img" alt="PayPal payment method" />

Screen reader announces: “PayPal payment method, image”.

<Stack>
  <ServiceLogo name="Visa" />
  <ServiceLogo name="MasterCard" />
  <ServiceLogo name="Amex" />
  <Text>Visa, MasterCard, and American Express accepted</Text>
</Stack>

Screen reader announces: “Visa, MasterCard, and American Express accepted”.