Only Color is used to differentiate between the link "Visual Studio Code website" and the surrounding text: A11y_VisualStudioCodeServices_Uninstall Visual Studio Code_.zip file installation_Usability.

[prabhudevu]

GitHub Tags:

#A11yTCS; #A11ySev4; #A11yUsable; #A11yUsablehigh; #DesktopWeb; #ChromiumEdge; #BM_VisualStudioCodeServices_Web_July2024; #Visual Studio Code Services; #Win11; #FTP; #Desktopweb; #UseofColor;

Environment Details: 

Application Name:  Visual Studio Code Services URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows Microsoft Edge version 126.0.2592.68 (Official build) (64-bit)

Repro steps:

1. Launch the application URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows and press ENTER.
2. "Uninstall Visual Studio Code" screen gets opened.
3. TAB to Links under ".zip file installation" section.
4. Observe that Only Color is used to differentiate between the link "Visual Studio Code website" and the surrounding text.

Actual:

Only Color is used to differentiate between the link "Visual Studio Code website" and the surrounding text. Underline is provided for the links, but that underline is not clearly visible. Color contrast between "Visual Studio Code website" and the surrounding text is 2.002:1.

Note: Issue is repro with below URLs as well https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2 https://code.visualstudio.com/docs/supporting/faq?dark-plus-v2 https://code.visualstudio.com/docs?dark-plus-v2 https://code.visualstudio.com/download?dark-plus-v2 https://code.visualstudio.com/insiders/?dark-plus-v2 https://code.visualstudio.com/?dark-plus-v2 https://code.visualstudio.com/docs/python/editing?dark-plus-v2 https://code.visualstudio.com/docs/python/jupyter-support-py?dark-plus-v2 https://code.visualstudio.com/docs/python/linting?dark-plus-v2 https://code.visualstudio.com/docs/remote/remote-overview?dark-plus-v2 https://code.visualstudio.com/docs/remote/troubleshooting?dark-plus-v2 https://code.visualstudio.com/docs/remote/wsl?dark-plus-v2 https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2 https://code.visualstudio.com/docs/editor/command-line?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/introvideos?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/keybindings?dark-plus-v2 https://code.visualstudio.com/docs/getstarted/locales?dark-plus-v2 https://code.visualstudio.com/docs/java/java-debugging?dark-plus-v2 https://code.visualstudio.com/docs/languages/csharp?dark-plus-v2 https://code.visualstudio.com/docs/python/debugging?dark-plus-v2

Expected

Link "Visual Studio Code website" should be differentiable from the surrounding text. Provided underline for the links should be clearly visible.

User Impact

Monochromatic users will not be able to know whether "Visual Studio Code website" is a link or not

Attachment

[daviddossett]

Note the link underlines on all links

[12-shweta]

@daviddossett underline is provided but it's not properly visible it should be dark

[12-shweta]

#Rev:shwarh;

[12-shweta]

#A11yPreview;

[daviddossett]

This should now be fixed

[rzhao271]

@prabhudevu could you please verify that the issue has now been resolved?

[12-shweta]

Verified the bug, issue is fixed and hence closing the bug.

[12-shweta]

@rzhao271 could you please close this bug as this prabhu is no longer part of this team and i don't have option to close the bug.