noSvgWithoutTitle

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/noSvgWithoutTitle

¥Diagnostic Category: lint/a11y/noSvgWithoutTitle
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noSvgWithoutTitle": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制对 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

示例

¥Examples

无效

¥Invalid

1
<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.

1
<svg>
2
    <title></title>
3
    <circle />
4
</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.

1
<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.

1
<svg role="img" aria-label="">
2
    <span id="">Pass</span>
3
</svg>

1
<svg role="presentation">foo</svg>

有效

¥Valid

1
<svg>
2
    <rect />
3
    <rect />
4
    <g>
5
        <circle />
6
        <circle />
7
        <g>
8
            <title>Pass</title>
9
            <circle />
10
            <circle />
11
        </g>
12
    </g>
13
</svg>

1
<svg>
2
    <title>Pass</title>
3
    <circle />
4
</svg>

1
<svg role="img" aria-labelledby="title">
2
    <span id="title">Pass</span>
3
</svg>

1
<svg role="img" aria-label="title">
2
    <span id="title">Pass</span>
3
</svg>

1
<svg role="graphics-symbol"><rect /></svg>

1
<svg role="graphics-symbol img"><rect /></svg>

1
<svg aria-hidden="true"><rect /></svg>

可访问性指南

¥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

noSvgWithoutTitle

摘要

如何配置

描述

示例

无效

有效

可访问性指南

相关链接