aria-details

<!-- aria-details references an element with detailed information -->

<!-- Image with extended description -->
<img 
  src="chart.png" 
  alt="Q3 sales growth chart"
  aria-details="chart-details"
/>

<div id="chart-details">
  <h3>Detailed Chart Description</h3>
  <p>This bar chart shows quarterly sales growth:</p>
  <ul>
    <li>Q1: $1.2M (baseline)</li>
    <li>Q2: $1.5M (+25% from Q1)</li>
    <li>Q3: $1.8M (+20% from Q2)</li>
  </ul>
  <p>Overall growth: 50% from Q1 to Q3.</p>
</div>

<!-- Unlike aria-describedby, aria-details links to 
     structured content, not just text -->

<!-- Detailed description with structured content -->

<figure>
  <img 
    src="architecture-diagram.svg"
    alt="System architecture overview"
    aria-details="arch-details"
  />
  <figcaption>Figure 1: System Architecture</figcaption>
</figure>

<section id="arch-details">
  <h4>Architecture Details</h4>
  
  <h5>Components</h5>
  <table>
    <tr>
      <th>Component</th>
      <th>Technology</th>
      <th>Purpose</th>
    </tr>
    <tr>
      <td>Frontend</td>
      <td>React</td>
      <td>User interface</td>
    </tr>
    <tr>
      <td>API Gateway</td>
      <td>Node.js</td>
      <td>Request routing</td>
    </tr>
    <tr>
      <td>Database</td>
      <td>PostgreSQL</td>
      <td>Data storage</td>
    </tr>
  </table>
  
  <h5>Data Flow</h5>
  <ol>
    <li>User request hits load balancer</li>
    <li>API Gateway authenticates</li>
    <li>Request routes to appropriate service</li>
    <li>Response returns through same path</li>
  </ol>
</section>

<!-- Using aria-details for footnotes -->

<article>
  <p>
    The study found significant improvements
    <sup aria-details="footnote-1">[1]</sup>
    in cognitive function after 8 weeks.
  </p>
  
  <p>
    Participants showed a 23% increase
    <sup aria-details="footnote-2">[2]</sup>
    in memory recall tasks.
  </p>
</article>

<aside id="footnote-1">
  <h4>Reference 1</h4>
  <p>
    Smith, J. et al. (2024). "Cognitive Enhancement Study."
    <em>Journal of Neuroscience</em>, 45(2), 123-145.
    DOI: 10.1234/jn.2024.0012
  </p>
</aside>

<aside id="footnote-2">
  <h4>Reference 2</h4>
  <p>
    Based on standardized memory assessment tests
    (WAIS-IV, WMS-IV) administered pre and post
    intervention.
  </p>
</aside>

// React component with aria-details
import { useId } from 'react';

// Image with detailed description
function ImageWithDetails({ src, alt, details }) {
  const detailsId = useId();

  return (
    <figure>
      <img 
        src={src}
        alt={alt}
        aria-details={detailsId}
      />
      <details id={detailsId}>
        <summary>View detailed description</summary>
        {details}
      </details>
    </figure>
  );
}

// Chart with accessible data table
function AccessibleChart({ data, title, description }) {
  const detailsId = useId();

  return (
    <div>
      <div 
        role="img"
        aria-label={title}
        aria-details={detailsId}
        className="chart-container"
      >
        {/* Visual chart rendering */}
        <ChartComponent data={data} />
      </div>
      
      <section id={detailsId}>
        <h3>{title} - Data Table</h3>
        <p>{description}</p>
        <table>
          <thead>
            <tr>
              <th>Category</th>
              <th>Value</th>
              <th>Change</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item, i) => (
              <tr key={i}>
                <td>{item.category}</td>
                <td>{item.value}</td>
                <td>{item.change}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}

// Expandable details panel
function ContentWithDetails({ children, detailedContent, summary }) {
  const detailsId = useId();

  return (
    <article aria-details={detailsId}>
      {children}
      
      <aside id={detailsId}>
        <details>
          <summary>{summary}</summary>
          {detailedContent}
        </details>
      </aside>
    </article>
  );
}

// Usage
function App() {
  return (
    <AccessibleChart
      data={[
        { category: 'Q1', value: '$1.2M', change: '-' },
        { category: 'Q2', value: '$1.5M', change: '+25%' },
        { category: 'Q3', value: '$1.8M', change: '+20%' },
      ]}
      title="Quarterly Sales"
      description="Sales performance for the first three quarters."
    />
  );
}