Skip to content
Biome 中文网
开发文档 当前版本 v1.9

noSvgWithoutTitle

诊断类别：lint/a11y/noSvgWithoutTitle

¥Diagnostic Category: lint/a11y/noSvgWithoutTitle

自从：v1.0.0

¥Since: v1.0.0

强制对 svg 元素使用 title 元素。

¥Enforces the usage of the title element for the svg element.

无法像 img 那样为 svg 指定 alt 属性。要使 svg 可访问，可以使用以下方法：

¥It is not possible to specify the alt attribute for the svg as for the img. To make svg accessible, the following methods are available:

  • 将 title 元素作为 svg 的第一个子元素提供

    ¥provide the title element as the first child to svg

  • 提供 role="img" 和 aria-label 或 aria-labelledby 到 svg

    ¥provide role="img" and aria-label or aria-labelledby to svg

示例

Section titled 示例

¥Examples

无效

Section titled 无效

¥Invalid

<svg>foo</svg>
code-block.jsx:1:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg>foo</svg>
      │ ^^^^^
    2 │ 
  
  ℹ For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role=“img”, you should add the aria-label or aria-labelledby attribute.
  
<svg>
    <title></title>
    <circle />
</svg>
code-block.jsx:1:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg>
      │ ^^^^^
    2 │     <title></title>
    3 │     <circle />
  
  ℹ For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role=“img”, you should add the aria-label or aria-labelledby attribute.
  
<svg>foo</svg>
code-block.jsx:1:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Alternative text title element cannot be empty
  
  > 1 │ <svg>foo</svg>
      │ ^^^^^
    2 │ 
  
  ℹ For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role=“img”, you should add the aria-label or aria-labelledby attribute.
  
<svg role="img" aria-label="">
    <span id="">Pass</span>
</svg>
<svg role="presentation">foo</svg>

有效

Section titled 有效

¥Valid

<svg>
    <rect />
    <rect />
    <g>
        <circle />
        <circle />
        <g>
            <title>Pass</title>
            <circle />
            <circle />
        </g>
    </g>
</svg>
<svg>
    <title>Pass</title>
    <circle />
</svg>
<svg role="img" aria-labelledby="title">
    <span id="title">Pass</span>
</svg>
<svg role="img" aria-label="title">
    <span id="title">Pass</span>
</svg>
<svg role="graphics-symbol"><rect /></svg>
<svg role="graphics-symbol img"><rect /></svg>
<svg aria-hidden="true"><rect /></svg>

可访问性指南

Section titled 可访问性指南

¥Accessibility guidelines

文档结构 – SVG 1.1（第二版） ARIA:img 角色 - 可访问性 | MDN 可访问的 SVG | CSS-Tricks - CSS-Tricks 上下文标记可访问的图片和 SVG | scottohara.me 可访问的 SVG

¥Document Structure – SVG 1.1 (Second Edition) ARIA: img role - Accessibility | MDN Accessible SVGs | CSS-Tricks - CSS-Tricks Contextually Marking up accessible images and SVGs | scottohara.me Accessible SVGs

相关链接

Section titled 相关链接

¥Related links