Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[med] Color: Many Pages: Only color is used to distinguish links on the page #5447

Closed
ogumen opened this issue Sep 23, 2021 · 1 comment
Closed

Comments

@ogumen
Copy link

ogumen commented Sep 23, 2021

Action Performed:

  1. Using Chrome, open https://staging.new.expensify.com/
  2. Tab to focus the "privacy policy", "terms of service" or "licenses" links.
  3. Notice if the links have any other visual cues besides color to be distinguished from surrounding text.

Expected Result:

Color should not be the only way to differentiate the link from the surrounding text. There should be additional cues, such as a border, bold or italic text, along with the color differentiation. A contrast ratio of 3.00:1 should be provided between the link text and adjacent text to meet the requirement.

Actual Result:

Only color is used to distinguish links from normal text. The blue links (#0185FF) against dark grey surrounding text (#7D8B8F) have a color contrast ratio of 1.02:1.

HTML:
<a href="https://use.expensify.com/terms" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">terms of service</span></a>...<a href="https://use.expensify.com/privacy" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">privacy policy</span></a>...<a href="https://use.expensify.com/licenses" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">licenses</span></a>

Other occurrences:

  1. Terms of service -> Only color is used to distinguish links from surrounding text.
  2. Privacy policy -> Only color is used to distinguish links from surrounding text.
  3. Licenses -> Only color is used to distinguish links from surrounding text.
  4. About -> Only color is used to distinguish "Terms of service" and "Privacy policy" links from surrounding text.
  5. Set password -> Only color is used to distinguish links from surrounding text.

Workaround:

No workaround

Area issue was found in:

Landing page, Terms of service page, Privacy policy page, Licenses page, About overlay, Set password page

Failed WCAG checkpoints

1.4.1

User impact:

The low-vision and color-blind users might not be able to distinguish the links from surrounding text.

Suggested resolution:

Provide some additional decoration for the link (e.g. bold or larger font or a permanent underline), so that link can be easily differentiated from surrounding text. The 3.00:1 color contrast ratio between the link text and adjacent text can be achieved by using the darker blue color for the link text. An example of color to use is #003D75, which will give a color contrast ratio of 3.09:1 against the current color of surrounding text (#7D8B8F).
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
https://www.w3.org/WAI/WCAG21/Techniques/general/G183

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Bug5179545_color_-links-_about
Bug5179545_color_-links-_landing_page
Bug5179545_color_-links-_set_password
Bug5179545_Licenses_-_links_are_identified_only_by_means_of_color
Bug5179545_Privacy_policy_use_of_color
Bug5179545_Terms_of_service_-_links_are_identified_only_by_means_of_color

Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

View all open jobs on GitHub

@ogumen ogumen added this to the Accessibility Audit milestone Sep 23, 2021
@shawnborton
Copy link
Contributor

So the terms of service page is hosted on UseDot and it's technically not part of the NewDot app. @stitesExpensify @kadiealexander do you still think it's worth addressing these issues, or should we punt and focus on the app itself?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants