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

Xác định các phần tử SVG có tên main-svg và js-plotly-tester, đồng thời kiểm tra cách chúng được tạo ra và liệu chúng có truyền tải thông tin có ý nghĩa hay không. Kiểm tra hành vi trợ năng của SVG sau đó bằng trình đọc màn hình hoặc công cụ kiểm tra trợ năng. Hoàn tất khi các SVG mang thông tin cung cấp một tên có thể truy cập, còn các SVG mang tính trang trí được ẩn khỏi các công nghệ hỗ trợ.