Skip to content

[Accessibility] Lacks textual equivalent to <svg> elements in notifications. #227494

Closed as not planned
@Krituhar

Description

  • 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.

Screenshot of the issue:
Screenshot 2024-09-03 at 5 17 47 PM

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

accessibilityKeyboard, mouse, ARIA, vision, screen readers (non-specific) issuesbugIssue identified by VS Code Team member as probable bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions