<!-- Using semantic HTML (Preferred) -->
<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article1">Understanding ARIA</a></li>
    <li><a href="/article2">Accessibility Best Practices</a></li>
    <li><a href="/article3">Semantic HTML Guide</a></li>
  </ul>
</aside>

<!-- Using role="complementary" explicitly -->
<div role="complementary" aria-labelledby="sidebar-heading">
  <h2 id="sidebar-heading">Quick Links</h2>
  <nav>
    <a href="/docs">Documentation</a>
    <a href="/tutorials">Tutorials</a>
    <a href="/examples">Examples</a>
  </nav>
</div>

<aside aria-labelledby="sidebar-title">
  <h2 id="sidebar-title" class="sr-only">Sidebar</h2>
  
  <!-- Related Posts -->
  <section>
    <h3>Related Posts</h3>
    <ul>
      <li><a href="/post1">Getting Started with React</a></li>
      <li><a href="/post2">Advanced TypeScript Patterns</a></li>
      <li><a href="/post3">CSS Grid Mastery</a></li>
    </ul>
  </section>
  
  <!-- Newsletter Signup -->
  <section>
    <h3>Subscribe to Newsletter</h3>
    <form>
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required />
      <button type="submit">Subscribe</button>
    </form>
  </section>
  
  <!-- Social Links -->
  <section>
    <h3>Follow Us</h3>
    <ul>
      <li><a href="https://twitter.com/example">Twitter</a></li>
      <li><a href="https://github.com/example">GitHub</a></li>
      <li><a href="https://linkedin.com/company/example">LinkedIn</a></li>
    </ul>
  </section>
</aside>

<main>
  <article>
    <h1>Main Article Content</h1>
    <p>Article text goes here...</p>
  </article>
  
  <!-- First complementary region -->
  <aside aria-label="Author information">
    <h2>About the Author</h2>
    <img src="author.jpg" alt="Jane Doe" />
    <p>Jane is a web developer with 10 years of experience...</p>
  </aside>
  
  <!-- Second complementary region -->
  <aside aria-label="Related resources">
    <h2>Additional Resources</h2>
    <ul>
      <li><a href="/resource1">Resource 1</a></li>
      <li><a href="/resource2">Resource 2</a></li>
    </ul>
  </aside>
</main>

import { FC } from 'react'

interface SidebarProps {
  relatedPosts: Array<{ id: string; title: string; url: string }>
  categories: Array<{ id: string; name: string; count: number }>
}

export const Sidebar: FC<SidebarProps> = ({ relatedPosts, categories }) => {
  return (
    <aside 
      className="sidebar"
      aria-label="Sidebar with related content"
    >
      {/* Related Posts */}
      <section className="sidebar-section">
        <h2 className="sidebar-heading">Related Posts</h2>
        <ul className="post-list">
          {relatedPosts.map((post) => (
            <li key={post.id}>
              <a href={post.url}>{post.title}</a>
            </li>
          ))}
        </ul>
      </section>

      {/* Categories */}
      <section className="sidebar-section">
        <h2 className="sidebar-heading">Categories</h2>
        <ul className="category-list">
          {categories.map((category) => (
            <li key={category.id}>
              <a href={`/category/${category.id}`}>
                {category.name} ({category.count})
              </a>
            </li>
          ))}
        </ul>
      </section>
    </aside>
  )
}