Preserve inclusive behaviour

Accessibility

Understand the keyboard, semantics, focus and reduced-motion foundations built into Template Empire React components.

What the components provide

Template Empire components are authored for WCAG 2.1 AA requirements and are checked with automated axe, keyboard and reduced-motion tests appropriate to each interaction.

Decorative effects stay out of the accessibility tree, meaningful controls use native semantics, and animated text keeps a coherent accessible reading order.

Visible focus styles and keyboard operation for interactive controls.
Content remains available when JavaScript or animation is unavailable.
Reduced motion removes movement or replaces it with a brief opacity change.
Decorative canvases, trails and duplicate marquee content are hidden from assistive technology.

What your implementation must provide

A component cannot guarantee the accessibility of the content placed inside it. Supply accurate labels, alternative text, heading order and link destinations, and maintain sufficient contrast after applying your brand colours.

When you change interaction or animation, repeat the keyboard, screen-reader and reduced-motion checks. Do not remove focus restoration, pause controls or live announcements because they appear visually redundant.

Respect reduced motion

Test with prefers-reduced-motion set to reduce. Essential information must be visible immediately, scroll-linked layouts must remain escapable, and ambient loops should stop.

@media (prefers-reduced-motion: reduce) {
  .ambient-effect {
    animation: none;
    transform: none;
  }
}

Verify in your product

Automated checks catch common failures but do not certify an entire page. Test the finished flow with only a keyboard, at 200 percent zoom, in light and dark themes, and with a screen reader on the browsers your product supports.

Confirm logical focus order and a visible focus indicator.
Open and close overlays with the keyboard and verify focus returns.
Check content at narrow widths and enlarged text without horizontal loss.
Run axe after your real copy, colours and surrounding layout are present.