How to implement SVG accessibility - 面试题

SVG accessibility is crucial for creating inclusive web applications. Here are key methods for implementing SVG accessibility:

1. Add Titles and Descriptions Add <title> and <desc> elements to SVG to provide text descriptions.

svg
<svg width="200" height="200" role="img" aria-labelledby="svg-title svg-desc">
  <title id="svg-title">Sales Data Bar Chart</title>
  <desc id="svg-desc">Bar chart showing 2024 quarterly sales data: Q1 1 million, Q2 1.5 million, Q3 1.2 million, Q4 1.8 million</desc>
  
  <rect x="20" y="80" width="40" height="100" fill="blue" />
  <rect x="80" y="50" width="40" height="130" fill="green" />
  <rect x="140" y="60" width="40" height="120" fill="red" />
  <rect x="200" y="30" width="40" height="150" fill="yellow" />
</svg>

2. Use ARIA Roles Add appropriate ARIA roles to SVG.

svg
<!-- Icon -->
<svg role="img" aria-label="Search icon">
  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>

<!-- Decorative graphic -->
<svg role="presentation" aria-hidden="true">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

3. Keyboard Navigation Add keyboard support for interactive SVG.

svg
<svg width="200" height="200" tabindex="0" role="button" aria-label="Click to toggle color">
  <circle id="interactive-circle" cx="100" cy="100" r="50" fill="blue" />
</svg>

<script>
const circle = document.getElementById('interactive-circle');
const svg = circle.parentElement;

// Mouse click
svg.addEventListener('click', toggleColor);

// Keyboard support
svg.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    toggleColor();
  }
});

function toggleColor() {
  const currentColor = circle.getAttribute('fill');
  const newColor = currentColor === 'blue' ? 'red' : 'blue';
  circle.setAttribute('fill', newColor);
}
</script>

4. Focus Management Add focus styles for interactive elements.

css
svg[tabindex]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

svg[tabindex]:focus circle {
  stroke: #005fcc;
  stroke-width: 3;
}

5. Semantic Structure Use semantic SVG element structure.

svg
<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Monthly Sales Trend Chart</title>
  <desc id="chart-desc">Line chart showing sales trends from January to December</desc>
  
  <g role="list" aria-label="Data points">
    <g role="listitem" aria-label="January sales: 500,000">
      <circle cx="50" cy="150" r="5" fill="blue" />
      <text x="50" y="170" font-size="12">Jan</text>
    </g>
    <g role="listitem" aria-label="February sales: 800,000">
      <circle cx="100" cy="120" r="5" fill="blue" />
      <text x="100" y="140" font-size="12">Feb</text>
    </g>
  </g>
</svg>

6. Color Contrast Ensure SVG element color contrast meets WCAG standards.

css
/* Ensure sufficient contrast */
.high-contrast {
  fill: #000000;  /* Black */
  stroke: #FFFFFF;  /* White */
  stroke-width: 2;
}

/* Avoid relying solely on color to convey information */
.data-point {
  fill: #3366cc;
}

.data-point:hover {
  fill: #ff6600;
  stroke: #000000;
  stroke-width: 2;
}

7. Responsive Text Ensure text in SVG is scalable and readable.

svg
<svg viewBox="0 0 200 100" width="100%" height="auto">
  <text x="100" y="50" font-size="16" text-anchor="middle" font-family="Arial, sans-serif">
    Readable text
  </text>
</svg>

8. Alternative Text Provide alternative text for external SVG files.

html
<img src="chart.svg" alt="Bar chart showing 2024 sales data" />

Best Practices:

Always add title and desc for meaningful SVG
Use appropriate ARIA roles
Add keyboard support for interactive elements
Ensure color contrast meets WCAG standards
Test screen reader compatibility
Avoid relying solely on color to convey information
Add aria-hidden="true" for decorative SVG