如何实现 SVG 的可访问性 - 面试题

SVG 的可访问性（Accessibility）对于创建包容性的网页应用非常重要。以下是实现 SVG 可访问性的关键方法：

1. 添加标题和描述 为 SVG 添加 <title> 和 <desc> 元素，提供文本描述。

svg
<svg width="200" height="200" role="img" aria-labelledby="svg-title svg-desc">
  <title id="svg-title">销售数据柱状图</title>
  <desc id="svg-desc">显示2024年四个季度的销售数据柱状图，Q1为100万，Q2为150万，Q3为120万，Q4为180万</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. 使用 ARIA 角色 为 SVG 添加适当的 ARIA 角色。

svg
<!-- 图标 -->
<svg role="img" aria-label="搜索图标">
  <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>

<!-- 装饰性图形 -->
<svg role="presentation" aria-hidden="true">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

3. 键盘导航 为交互式 SVG 添加键盘支持。

svg
<svg width="200" height="200" tabindex="0" role="button" aria-label="点击切换颜色">
  <circle id="interactive-circle" cx="100" cy="100" r="50" fill="blue" />
</svg>

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

// 鼠标点击
svg.addEventListener('click', toggleColor);

// 键盘支持
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. 焦点管理 为可交互元素添加焦点样式。

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

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

5. 语义化结构 使用语义化的 SVG 元素结构。

svg
<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">月度销售趋势图</title>
  <desc id="chart-desc">折线图显示1月到12月的销售趋势</desc>
  
  <g role="list" aria-label="数据点">
    <g role="listitem" aria-label="1月销售额：50万">
      <circle cx="50" cy="150" r="5" fill="blue" />
      <text x="50" y="170" font-size="12">1月</text>
    </g>
    <g role="listitem" aria-label="2月销售额：80万">
      <circle cx="100" cy="120" r="5" fill="blue" />
      <text x="100" y="140" font-size="12">2月</text>
    </g>
  </g>
</svg>

6. 颜色对比度 确保 SVG 元素的颜色对比度符合 WCAG 标准。

css
/* 确保足够的对比度 */
.high-contrast {
  fill: #000000;  /* 黑色 */
  stroke: #FFFFFF;  /* 白色 */
  stroke-width: 2;
}

/* 避免仅依赖颜色传达信息 */
.data-point {
  fill: #3366cc;
}

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

7. 响应式文本 确保 SVG 中的文本可缩放且可读。

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">
    可读的文本
  </text>
</svg>

8. 替代文本 为外部 SVG 文件提供替代文本。

html
<img src="chart.svg" alt="显示2024年销售数据的柱状图" />

最佳实践：

始终为有意义的 SVG 添加 title 和 desc
使用适当的 ARIA 角色
为交互式元素添加键盘支持
确保颜色对比度符合 WCAG 标准
测试屏幕阅读器兼容性
避免仅依赖颜色传达信息
为装饰性 SVG 添加 aria-hidden="true"