Accessibility

Every template is built and tested to work for everyone: keyboard users, screen reader users, people who zoom or prefer reduced motion. Each page is scanned with axe in light and dark mode before release.

Built in#

• Structure: one h1 per page, headings in order, and landmarks (header, nav, main, footer).
• Skip link: the first Tab press reveals "Skip to content", which jumps past the navigation.
• Keyboard: menus, dialogs, tabs, carousels, lightboxes and filters all work without a mouse. Dialogs trap focus, close with Esc and return focus to what opened them.
• Visible focus: every interactive element shows a clear focus ring.
• Forms: every field has a label; errors appear next to the field, are announced to screen readers and move focus to the first problem.
• Contrast: text and controls meet WCAG AA contrast in both light and dark themes.
• Reduced motion: scroll animations, carousels and smooth scrolling switch off when the visitor asks their system to reduce motion.
• Current page: the active menu link has aria-current="page".

Keep it accessible when you edit#

• Keep exactly one h1 per page, and don't skip heading levels for styling; change the classes instead.
• Write alt text that says what an image shows, or alt="" if it's decorative.
• Give every new input a <label> (or aria-label if the label must be hidden).
• Use real <button> elements for actions and <a href> for navigation.
• When you change colours, check contrast: 4.5:1 for body text, 3:1 for large text and icons.
• Test with the keyboard only (Tab, Shift+Tab, Enter, Space, Esc) and with your system's screen reader.

Testing tools#

• axe DevTools or Lighthouse in your browser's developer tools.
• VoiceOver (macOS and iOS), NVDA (Windows) or TalkBack (Android).