[Accessibility] Lacks textual equivalent to <svg> elements in notifications. #227494
Closed as not planned
Closed as not planned
Description
opened on Sep 4, 2024
- VS Code Version: 1.88.0
- OS Version: MacOS Sonoma (v14.6.1)
[Issue]
The "i" icon and "tick" icon that appears when user hover on "Editor Language Status" ({}) control are without textual equivalents.
[User Impact]
Screen reader users will not receive an accurate impression of the contents of these images.
[Code Reference]
<span class="codicon codicon-info">::before</span>
[Recommendation]
Ensure images provide informative alternative text. Textual equivalents must be both concise and descriptive.
To add a textual equivalent to an <svg>
element, add a <title> child to the SVG. Place the textual equivalent in the <title>
, then add an ID to the <title>
. Finally, on the <svg>
, add an aria-labelledby
attribute and set its value to the ID of the <title>
Provide "info" for the i icon and "selected" or similar for the tick icon.
Activity