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 が支援技術から隠されていれば完了です。