screenreader needs for SVG accessibility

Issue:

SVG element missing accessible name

• main-svg
• js-plotly-tester

Info:

Description

One or more svg elements, excluding children of button elements and children of anchor elements, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, does not have a mechanism that allows an accessible name value to be calculated.

Why it matters

Without properly implemented alternative text, any meaningful information provided visually will not be conveyed to screen reader users.

Decorative SVGs not marked as such may be mistaken for non-text content missing an equivalent.

What to do

Provide alternative text for all informative images. If an svg element provides additional meaningful information that the surrounding text does not already convey, you can provide an equivalent alternative using aria-label. Alternatively, if the SVG contains a title element, you can use aria-labelledby to reference the ID of the title. If the SVG has both a title and a description, then aria-labelledby should reference the id of the title and aria-describedby should reference the ID of the description. The alt attribute is not a valid attribute for the svg element.

When non-interactive SVGs are descendants of links or buttons and do not have a role set they are implicitly decorative and do not need to be explicitly marked as such.

If the image is decorative, use aria-hidden="true" instead to mark it as hidden. In all cases, if the SVG is a link then focusable can be set to true, if it is not part of a link. Focusable needs be set to false to support legacy browsers, such as IE 11.

W3 Source

定位名为 main-svg 和 js-plotly-tester 的 SVG 元素，并检查它们是如何创建的，以及是否传达有意义的信息。使用屏幕阅读器或无障碍检查器检查生成的 SVG 无障碍行为。完成标准是：信息性 SVG 暴露可访问名称，而装饰性 SVG 对辅助技术隐藏。