docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Ensure links are distinguished from surrounding text in a way that does not rely on color.

Open msftedad opened this issue 2 years ago • 3 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [ ] I have tried the npm run clear or yarn clear command.
  • [ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • [X] I have tried creating a repro with https://new.docusaurus.io.
  • [ ] I have read the console error message carefully (if applicable).

Description

Ensure links are distinguished from surrounding text in a way that does not rely on color. User is not able to differentiate between the normal text and links. Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds. Users with low vision will face difficulties if link has no styling (such as underline) to distinguish it from the surrounding text.

Reproducible demo

No response

Steps to reproduce

  1. Open https://docusaurus.io/docs URL.
  2. Navigate to link best docusaurus link present under Introduction and testimonials using tab key.
  3. Verify whether links are distinguished from surrounding text in a way that does not rely on color or not.

Expected behavior

Ensure that links are distinguished from surrounding text in a way that does not rely on color. Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.

Actual behavior

Links are distinguished from surrounding text in a way that does not rely on color. Color is the only way through which a link is identified. Underline or Chevron is not present for the links. MicrosoftTeams-image (35) MicrosoftTeams-image (34)

Your environment

Public source code: Public site URL: https://www.fast.design/ Docusaurus version used: OS: Windows 11, Version: 22H2, Build: 22621.1992   Microsoft Edge Version: 114.0.1823.86 (Official build) (64-bit) Tool Used: Accessibility Insights for Web.

Self-service

  • [ ] I'd be willing to fix this bug myself.

msftedad avatar Jul 21 '23 11:07 msftedad

So the contrast issue is fixable already by you on this one and should have been fixed in your colour choices. I agree however that our default link styling should be adjusted to include underline by default. To that end: facebookincubator/infima/pull/290

I assume this is the "correct" place to fix it but if it's better fixed "downstream" in Docusaurus itself I'm happy to do that @slorber :-)

homotechsual avatar Sep 06 '23 14:09 homotechsual

Hi @homotechsual, @slorber , Any update on this issue?

msftedad avatar Jan 09 '24 09:01 msftedad

All discussion in https://github.com/facebookincubator/infima/pull/290

Josh-Cena avatar Feb 15 '24 19:02 Josh-Cena