Svg Project

title: "SVG Project — Build a Complete Accessible SVG Page" description: "Build a production-ready page with accessible SVG graphics, interactive elements, charts with data tables, and full keyboard support." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Apply everything you learned by building a complete page with accessible SVGs, interactive maps, charts, and icons.

## What You'll Learn

How to combine all SVG patterns into a single production-ready page.

## Why It Matters

A complete SVG page demonstrates how different SVG types need different accessibility approaches and how they work together.

## Real-World Use

A DodaTech analytics dashboard page has an SVG logo, interactive chart with data table, and status icons. All SVGs are properly labeled and keyboard accessible.

## Complete SVG Page

```html
<article>
  <h1>Analytics Dashboard</h1>

  <!-- Company logo SVG -->
  <svg role="img" aria-label="DodaTech" viewBox="0 0 200 50">
    <rect width="200" height="50" fill="#0066cc" rx="5"/>
    <text x="20" y="35" fill="#fff" font-size="24" font-family="sans-serif">DodaTech</text>
  </svg>

  <!-- Interactive chart with data table -->
  <figure>
    <svg role="img" aria-labelledby="chart-title"
         viewBox="0 0 500 250">
      <title id="chart-title">Monthly Active Users 2026</title>
      <!-- Data points focusable -->
      <g role="list" aria-label="Data points">
        <rect role="listitem" tabindex="0" focusable="true"
              x="30" y="200" width="30" height="20"
              aria-label="January: 10K users"
              fill="#4a90d9"/>
        <rect role="listitem" tabindex="0" focusable="true"
              x="70" y="160" width="30" height="60"
              aria-label="February: 15K users"
              fill="#4a90d9"/>
        <rect role="listitem" tabindex="0" focusable="true"
              x="110" y="120" width="30" height="100"
              aria-label="March: 20K users"
              fill="#4a90d9"/>
      </g>
    </svg>

    <table aria-label="Monthly active users data">
      <caption>Monthly Active Users 2026</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Users</th>
      </tr>
      <tr>
        <th scope="row">January</th>
        <td>10,000</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>15,000</td>
      </tr>
      <tr>
        <th scope="row">March</th>
        <td>20,000</td>
      </tr>
    </table>
  </figure>

  <!-- Status icons -->
  <ul class="status-list">
    <li>
      <svg role="img" aria-label="Online" width="16" height="16">
        <circle cx="8" cy="8" r="6" fill="#00aa00"/>
      </svg>
      Server status: Online
    </li>
  </ul>
</article>

JavaScript

// Keyboard navigation for chart
document.querySelectorAll('[role="listitem"]').forEach(item => {
  item.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const label = this.getAttribute('aria-label');
      document.getElementById('data-detail').textContent = label;
    }
  });
});

Common Mistakes

1. Inconsistent labeling across SVG types

Logo, chart, and icons use different labeling patterns. Choose one pattern and apply consistently.

2. No separate styling for focusable SVGs

Focusable SVG elements need explicit CSS focus styles.

3. Chart data table not adjacent

Place the data table immediately after the chart figure.

4. Decorative SVGs not hidden

Background or decorative SVGs should use aria-hidden="true".

5. No fallback for SVG loading failure

Provide text content or a message when SVG fails to render.

Practice Questions

1. What are three types of SVGs on a typical page? Logo (informative), chart (complex, interactive), and icons (decorative or functional).

2. How do you handle keyboard navigation within a chart? Use role="list" on the group and role="listitem" on data points. Support arrow key navigation.

3. Why should the data table be adjacent to the chart? So all users can reference both the visual chart and the data table together.

Challenge: Build a complete analytics dashboard page with an SVG logo, an interactive chart with data table, and a list of status icons.

FAQ

Mini Project

Build a complete analytics dashboard page with 3 SVG components: logo, interactive bar chart with data table, and status indicator icons. Test all accessibility features.

What's Next

Now explore Accessible Drag and Drop to learn how to make drag-and-drop interactions accessible.