Accessibility Templates

<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>

<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>

<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/us/app/cleft-for-verbal-thinkers/id6479458038"
  aria-label="Download Cleft app from Apple App Store (opens in new window)"
>
  Get Cleft for iOS, iPadOS, and macOS
</Card>

<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>

<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>

## 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/us/app/cleft-for-verbal-thinkers/id6479458038) (opens in new window)
[Contact support via email](mailto:hello@cleftnotes.com)

<!-- Avoid -->
[Download here](https://apps.apple.com/us/app/cleft-for-verbal-thinkers/id6479458038)
[Email us](mailto:hello@cleftnotes.com)

<span className="sr-only">
  Additional context for screen readers
</span>

<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>

<!-- 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)

<!-- 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