Accessibility

Handled by the partsCopy Anchor Link

• Triggers are real buttons with aria-pressed. Card.RevealTrigger is disabled while the card is frozen.
• Faces: the face turned away is inert and aria-hidden, so Tab never lands on the back of the card while you're looking at the front.
• Number: screen readers hear "Card number ending in 4822", or the whole number once revealed, never the scramble. The cells are aria-hidden.
• Spending is a meter whose spoken value uses your format.
• Carousel follows the APG carousel pattern:
  • the viewport is a focusable region labelled "Cards", with the role description "carousel"; ←/→ move between cards (mirrored right to left) and Home/End go to the ends;
  • each slide is a group labelled "Premium, 2 of 4";
  • slides that aren't current are inert: hidden from screen readers and out of the tab order;
  • CardCarousel.Indicators is a tablist, each slide its tab's panel;
  • the track is a polite live region, so the new card is announced;
  • every label is in labels, to translate.
• Motion: see reduced motion.

Left to youCopy Anchor Link

• Translate the carousel's labels if your page isn't in English.
• Announce the frozen state in text next to the card, with aria-live="polite".
• Keep focus rings visible on the triggers and the flip button.