microsoft / microsoft/AdaptiveCards

[Adaptive Cards - Inputs with Validation] -Ensure links are distinguished from surrounding text in a way that does not rely on color.

Open
#8,800 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11yMissing_HCLReviewed A11yRT A11ySev3 A11yWCAG AdaptiveCards_Web Area-Accessibility Area-Renderers Bug HCL-AdaptiveCards-Web HCL-E+D MissingReviewedDeprecated Product-AC
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/
OS Version: 23H2 (OS Build 26020.1000)
Browser Version: Version 122.0.2348.0 (Official build) dev (64-bit)
Tool: Accessibility Insight for Web

Repro steps:

  1. Open the above URL in the edge dev browser.
  2. Navigate to the 'Sample' option and press enter key to activate it.
  3. Navigate to 'Activity Update' option and press enter key to activate it.
  4. Run the accessibility insight for web tool and observe the issue.

Actual Result:
Links are not distinguished from surrounding text in a way that does not rely on color.

Expected Result:
Ensure links should distinguished from surrounding text in a way that does not rely on color.

Element path:
.w3-col.m6.w3-margin-top > p > a[target="_blank"][rel="noopener"]

Snippet:
a target="_blank" rel="noopener" href="https://docs.microsoft.com/adaptive-cards/templating/">Get started with templating </a

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

Note:
Same issue is repro on the 'Action.Show Card' screen.
Same issue is repro under 'Action.ToggleVisibility' screen.

User Impact:
Users with color blindness and low vision have difficulty in identifying the links present on the page. Users can't be able to differentiate between the normal text and links if links do not have underline/chevron symbols.

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

“ Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section”

Screenshots

WCAG1 4 1 - Ensure links are distinguished from surrounding text in a way that does not rely on color

Card JSON
NA
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open https://adaptivecards.io/ in the specified Edge environment and reproduce the issue on the Activity Update, Action.Show Card, and Action.ToggleVisibility samples. Inspect the link matching .w3-col.m6.w3-margin-top > p > a[target="_blank"][rel="noopener"] and verify that links are distinguishable from surrounding text without relying on color. Confirm the affected links meet the reported accessibility requirement using Accessibility Insights for Web.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
accessibility, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.