Internal Documentation: This page contains templates and patterns for maintaining accessibility compliance across all documentation. Not intended for end users.

​
EU Accessibility Act Compliance Templates

As of June 28, 2025, all digital services must comply with EU Accessibility Act requirements. These templates ensure WCAG 2.1 AA compliance across all documentation.

​
Skip Navigation Template

Add to pages with multiple sections for keyboard navigation: 
<nav role="navigation" aria-label="Page navigation" className="skip-links">
  <a href="#main-content" className="skip-link">Skip to main content</a>
  <a href="#%F0%9F%86%98-getting-help" className="skip-link">Skip to Getting Help</a>
  <a href="#account-billing" className="skip-link">Skip to Account & Billing</a>
</nav>

​
Accessible Card Templates

<Card 
  title="Card Title" 
  icon="icon-name" 
  href="/destination-page"
  aria-label="Navigate to destination page for specific action"
>
  Brief description of what this card does
</Card>

​
Card Group with Proper Labels

<CardGroup cols={2} role="group" aria-label="Support options">
  <Card 
    title="Contact Support" 
    icon="envelope" 
    href="/user-guides/contact-support"
    aria-label="Contact our support team via email"
  >
    Get help from our team within 24 hours
  </Card>
  
  <Card 
    title="FAQ" 
    icon="circle-question" 
    href="/user-guides/faq"
    aria-label="Browse frequently asked questions"
  >
    Find quick answers to common questions
  </Card>
</CardGroup>

<Card 
  title="Download App" 
  icon="download" 
  href="https://apps.apple.com/app/cleft"
  aria-label="Download Cleft app from Apple App Store (opens in new window)"
>
  Get Cleft for iOS, iPadOS, and macOS
</Card>

​
Accessible Accordion Templates

​
Standard Accordion

<Accordion 
  title="Question or Topic" 
  role="button"
  aria-expanded="false"
  aria-controls="accordion-content-unique-id"
>
  Content that answers the question or explains the topic.
</Accordion>

​
Accordion Group

<AccordionGroup role="region" aria-label="Frequently asked questions about account setup">
  <Accordion 
    title="How do I create an account?" 
    role="button"
    aria-expanded="false"
    aria-controls="create-account-content"
  >
    Step-by-step instructions for account creation.
  </Accordion>
  
  <Accordion 
    title="How do I reset my password?" 
    role="button"
    aria-expanded="false"
    aria-controls="reset-password-content"
  >
    Password reset instructions and troubleshooting.
  </Accordion>
</AccordionGroup>

​
Heading Hierarchy Template

Use proper heading hierarchy with ID anchors for keyboard navigation: 
## Main Section {#main-section}

Content for the main section.

### Subsection {#subsection}

Content for subsection.

#### Details {#details}

Detailed content.

<!-- Good -->
[Learn about custom instructions](/user-guides/custom-instructions)
[View pricing details](/user-guides/upgrade-to-plus)

<!-- Avoid -->
[Click here](#)
[Read more](#)

<!-- Good -->
[Download from Apple App Store](https://apps.apple.com/app/cleft) (opens in new window)
[Contact support via email](mailto:[email protected])

<!-- Avoid -->
[Download here](https://apps.apple.com/app/cleft)
[Email us](mailto:[email protected])

​
Screen Reader Only Text

For additional context that helps screen reader users: 
<span className="sr-only">
  Additional context for screen readers
</span>

​
Form Templates (Future Use)

​
Accessible Form Fields

<label htmlFor="email-input">
  Email Address (required)
</label>
<input 
  id="email-input"
  type="email" 
  required 
  aria-describedby="email-help email-error"
/>
<div id="email-help">
  We'll never share your email address
</div>
<div id="email-error" role="alert" aria-live="polite">
  <!-- Error message appears here -->
</div>

​
Color and Contrast Guidelines

​
Acceptable Color Combinations

  • Primary Orange (#e54b2b) on white background ✅
  • White text on Primary Orange background ✅
  • Dark gray (#2d3748) on white background ✅
  • White text on dark gray background ✅

​
Test Your Colors

​
Testing Checklist

Before publishing any page, verify:
  • All Cards have descriptive aria-label attributes
  • All Accordions have role="button" and aria-expanded
  • Headings follow proper hierarchy (h1 → h2 → h3)
  • All links have descriptive text
  • Skip navigation links are present for multi-section pages
  • Color contrast meets WCAG AA standards (4.5:1)
  • Page works with keyboard-only navigation
  • Screen reader announces content logically

​
Common Accessibility Issues to Avoid

​
❌ Bad Examples

<!-- Missing aria-label -->
<Card title="Support" icon="help" href="/support">

<!-- Generic accordion -->
<Accordion title="Question">

<!-- Generic link text -->
[Click here](#)

<!-- Missing heading hierarchy -->
# Page Title
### Subsection (skipped h2)

​
✅ Good Examples

<!-- Proper aria-label -->
<Card title="Support" icon="help" href="/support" aria-label="Get help and support from our team">

<!-- Accessible accordion -->
<Accordion title="How do I reset my password?" role="button" aria-expanded="false">

<!-- Descriptive link -->
[Learn how to contact support](/user-guides/contact-support)

<!-- Proper heading hierarchy -->
# Page Title
## Main Section
### Subsection

​
Resources

Implementation Note: These templates should be used as the standard for all new documentation and when updating existing pages. Consistency across all 96+ MDX files ensures compliance and better user experience.