svg 无法访问_使SVG易于访问

svg 无法访问

Inline SVG can do wonders for responsive design while reducing page load times and generating crisp, clean icons, but it comes with some concerns: in particular, accessibility. There’s a strong argument to be made that accessibility was not a priority when the original SVG 1.0 specification was released 15 years ago; however, SVG 1.1 improved upon that some, and the upcoming SVG 2.0 should bring accessibility needs front-and-center.

内联SVG可以在减少页面加载时间并生成清晰，干净的图标方面做出出色的响应式设计 ，但是它带有一些问题：特别是可访问性 。 有强烈的论据认为，当15年前发布原始SVG 1.0规范时，可访问性并不是优先考虑的事情。 但是，SVG 1.1在此基础上进行了改进，即将到来的SVG 2.0应该将可访问性需求放在首位。

In the there here and now, making SVG accessible takes a little work, but it’s a straightforward process if you remember five rules:

在此时此地，使SVG易于访问需要做一些工作，但是如果您记住以下五个规则，这将是一个简单的过程：

1：将链接的SVG图像像位图一样对待，另外添加一个 (1: Treat linked SVG images like bitmaps, with one addition)

When linking to an SVG document as an image, the alt attribute is still required, just like a regular bitmap. An ARIA image role should also be added:

当以图像链接到SVG文档时，仍然需要alt属性 ，就像常规的bitmap一样 。 还应添加ARIA image角色：

<img src="coca-cola-logo.svg" alt="Coca-Cola" role="image">

Without the added role, iOS VoiceOver (Apple’s text-to-speech service for devices) will ignore the alt attribute for the SVG.

如果没有添加角色，iOS VoiceOver(Apple的设备的文本语音转换服务)将忽略SVG的alt属性。

2：如果您使用的是嵌入式SVG，请提供标题 (2: If you’re using inline SVG, provide a title)

The <title> of an SVG element serves a similar purpose to the <title> of an HTML document: it’s a brief text description of the document, or advisory information. Think it as <alt> for inline SVG:

所述<title>的SVG元素的供应类似目的的<title> HTML文档的 ：它是文档，或咨询信息的简要文本描述。 认为它是内嵌SVG的<alt> ：

<svg aria-labelledby="title">
    <g>
        <title id="title" lang="en">Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

<title> can also be used for individual elements: specifically, <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> and <use>, as well as SVG container elements like <a>, <defs>, <g> and <symbol>. <title> should be the first child of this element. Sometimes this title will be visually descriptive:

<title>也可以用于单个元素：具体来说， <circle> ， <ellipse> ， <image> ， <line> ， <path> ， <polygon> ， <polyline> ， <rect> ， <text>和<use>以及SVG容器元素，例如<a> ， <defs> ， <g>和<symbol> 。 <title>应该是此元素的第一个孩子 。 有时，该标题在视觉上具有描述性：

<title>Yellow Five-Pointed Star</title>
<polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>

… and sometimes it will be informational (i.e. describing the purpose or meaning of an element).

……有时它是信息性的 (即描述元素的目的或含义 )。

It should be noted that inline SVG <text> elements are, in most cases, completely accessible, as they contain real text, no matter how visually laden with effects they might be; they won’t need <title> in most cases. However, if you break text into outlines (i.e. pure vector shapes) you will need to provide a <title>.

应当指出，在大多数情况下，内联SVG <text>元素都是完全可访问的，因为它们包含真实的文本，无论它们在视觉上有多大的效果 。 在大多数情况下，他们不需要<title> 。 但是，如果将文本分成轮廓(即纯矢量形状)， 则需要提供<title> 。

Like an HTML page, text in an SVG element is read by accessibility devices in document order, not visual position order.

就像HTML页面一样，可访问性设备会按文档顺序(而不是视觉位置顺序)读取SVG元素中的文本。

If an SVG contains only one element, a single <title> after the opening <svg> tag may well suffice; if the document contains multiple elements, you’ll likely need a <title> for each element or group:

如果SVG仅包含一个元素，则在<svg>标记后的单个<title>可能就足够了； 如果文档包含多个元素，则每个元素或组可能需要一个<title> ：

<svg>
    <g>
        <title>Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

You can improve this by associating <title> with aria-labelledby. In the case of a single element, this might map to the root <svg> element:

您可以通过将<title>与aria-labelledby关联来改善此效果。 对于单个元素，这可能会映射到根<svg>元素：

<svg aria-labelledby="title">
    <g>
        <title id="title" lang="en">Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

Like <desc> and other HTML elements, <title> should also have a lang attribute to indicate the language used (see below).

与<desc>和其他HTML元素一样， <title>也应具有lang属性，以指示所使用的语言(请参见下文)。

Because SVG elements used in <img> tags may be navigated to as stand-alone elements in browsers, or indexed by search engines as separate documents, they should also contain appropriate <title> and <desc> information in the markup of the original SVG document.

因为<img>标记中使用的SVG元素可能会在浏览器中导航为独立元素，或者被搜索引擎索引为单独的文档，所以它们在原始SVG的标记中还应包含适当的<title>和<desc>信息。文件。

3：在适当的地方提供说明 (3: Provide a description where appropriate)

<desc> is a longer description of the SVG element, containing its purpose or design. It might be broadly thought of as the SVG equivalent of <figcaption>.

<desc>是SVG元素的详细说明 ，包含其目的或设计。 它可能被广泛认为是<figcaption>的SVG等效项。

<svg>
	<g>
		<title>International sales by country</title>
		<title lang="fr">Les ventes internationales par pays</title>
		<desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
		<desc lang="fr">Diagramme à barres montrant les ventes de l'entreprise par pays, en millions de dollars (US).</desc>
		<g>
			<text x="20" y="70">US Sales</text>
			<title id="USamount">30 million</title>
			<rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
		</g>
</svg>

Rendered inline, the SVG document will look something like this:

以内联方式呈现，SVG文档将如下所示：

This example assumes that you’d also provide graph axes and numerical information for users without accessibility needs: when possible, expose information as <text> to benefit everyone.

此示例假定您还将为没有辅助功能需求的用户提供图形轴和数字信息：尽可能将信息公开为<text>以使所有人受益。

4：如果SVG纯粹是装饰性的，则无需执行任何操作 (4: If the SVG is purely decorative, you don’t have to do anything)

If the SVG element is being used decoratively - a gradient or background pattern, for example - there is no need to provide <title>, <desc> or alt. (If you want your page to validate, you should include alt for linked SVGs but set the value of the attribute to ”empty” for purely decorative elements: i.e. alt="" or simply alt).

如果SVG元素用于装饰性用途(例如， 渐变或背景图案) ，则无需提供<title> ， <desc>或alt 。 (如果希望您的页面进行验证 ，则应为链接的SVG包含alt ，但对于纯装饰性元素(例如alt=""或简单alt )，将属性的值设置为“ empty”。

Neither <desc> nor <title> are rendered visually in the browser by default; <title> text will appear as a tooltip on hover / selection in compatible browsers.

默认情况下， <desc>和<title>都不会在浏览器中以可视方式呈现。 <title>文本将显示为在兼容浏览器中悬停/选择时的工具提示。

5：不要指望所见即所得工具为您完成任何此操作 (5: Don’t expect your WYSIWYG tool to do any of this for you)

Unfortunately Adobe Illustrator currently has poor support for SVG accessibility: it exports layer names as id values, rather than <title> information. Inkscape does better, allowing you to add and edit <title> and <desc> for every element, at the cost of adding a lot of extraneous cruft to the markup. You’ll likely find a little hand-coding is needed to add full accessibility to an SVG document made in vector illustrator tools.

不幸的是， Adobe Illustrator当前对SVG可访问性的支持很差：它将图层名称导出为id值 ，而不是<title>信息。 Inkscape的效果更好，它允许您为每个元素添加和编辑<title>和<desc> ，但代价是要在标记中添加很多无关紧要的东西。 您可能会发现需要一些手工编码，才能为使用Vector illustrator工具制作的SVG文档添加完全可访问性。

翻译自: https://thenewcode.com/1026/Making-SVG-Accessible

svg 无法访问