search

microsoft / rushstack-websites

Doc content for the Rush Stack websites.
Creative Commons Attribution 4.0 International
26 stars 72 forks source link

[TSDoc> Search]: Ensure link i.e API Extractor are distinguished from surrounding text in a way that does not rely on color #143

Closed vaishali1397 closed 1 year ago

vaishali1397 commented 1 year ago

Test Environment: OS Version: 22H2 (OS Build 25370.1) Browser: Edge Dev (Version 115.0.1866.1 (Official build) dev (64-bit)) URL: https://tsdoc.org/ Tool: Accessibility Insights for Web

Repro Steps:

  1. Open the above URL in edge dev browser and login with v-.
  2. Run the fast pass of accessibility insights for web.
  3. Observe the issue.

Actual Result: API Extractor link has insufficient color contrast of 2.356:1 with the surrounding text which is less than 3:1.

Expected Result: Ensure link i.e API Extractor are distinguished from surrounding text in a way that does not rely on color

Snippet: API Extractor

How to fix: Fix any of the following: The link has insufficient color contrast of 2.35:1 with the surrounding text. (Minimum contrast is 3:1, link text: #006721, surrounding text: #1c1e21) The link has no styling (such as underline) to distinguish it from the surrounding text

Notes:

  1. Same issue repro on 'TSDoc Playground' link, isInlineTag text, Suggest an update, Learn more, and How can I use TSDoc link.
  2. Same issue repro for 'Trimming based on related tags' link under 'Tags' link in the navigation landmark.
  3. Same issue repro on 'Rush Stack' link under 'Help' in the main navigation landamrk.
  4. Same issue repro on 'Building the projects', recommended practices, Everyday commands and Microsoft Open Source Code of Conduct link under 'Submitting a pull request' in 'Docs sidebar navigation landmark'.

User Impact: Person with visual disability will get impacted as user will not be able to differentiate the link from the text and hence will not be able to interact with the content easily.

WCAG Reference Link: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)"

MAS1 4 1 Ensures links are distinguished from text MAS1 4 1 Luminosity ratio of the text from surrounding is less than required
vaishali1397 commented 1 year ago

Closing this issue and will track with bug id: https://github.com/microsoft/rushstack-websites/issues/169