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

Individua gli elementi SVG denominati main-svg e js-plotly-tester e verifica come vengono creati e se trasmettono informazioni significative. Controlla il comportamento risultante dell’accessibilità degli SVG con uno screen reader o uno strumento di verifica dell’accessibilità. Il lavoro è completato quando gli SVG informativi espongono un nome accessibile, mentre gli SVG decorativi sono nascosti alle tecnologie assistive.