-
Notifications
You must be signed in to change notification settings - Fork 751
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
Link: Usage tab #3537
Comments
Examples of link + icon in IBM.comCTA componentWithin the
Outside of local, anchor, and external, the above have been requested from adopters to utilize in various pages. Live examples
|
Related: #3869 |
Moving forward with new updates but there are two Unresolved issues after discussing this with @mbgower and the Design team: 1. Visited vs Unvisited link ---> We may want to keep this the same in the guidance as an option until there's an update on their side 2. Underline or no underlines for all links On the Accessibility side, It’s possible to distinguish links by colour, if the contrast is strong enough by G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them. For dangers of a colour-only approach, see the failure technique F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision ---> We will need to add an underline for the focus state but probably leave the default Standalone link as they are at the moment. |
Ref discussion: carbon-design-system/carbon#15175
Ref boxnote: Usage tab pdf
Usage tab
Content:
Clarify that we
recommend
labels accurately reflect the content users will find at the link destination. This may not always be possible."For further content guidance, see IBM Accessibility on link purpose." Revise this to link to the Accessibility tab for more information
Interactions section: Remove Screen reader parts.
Standalone link section:
Change sentence to this "Standalone links are the default link style for Carbon and only have an underline on hover and focus states."
Change the image to have different link content. For example, say something like "View docs" with a right arrow icon.
Visited style section: Is it an accessibility violation to not use visited link styles? If you are not using visited styles, is there a known accessibility consideration that could be put in place? Ask Gower.
Add somewhere what our stance is on not allowing full images as pure links, but that it is okay to have an image within a card + text as a link, etc.
Answered questions from a11y discussion
Is a link made up of text + icon really a link, or is it a button?
A link is a link, not a button, regardless if it is just text or text + icon. We need to be clearer about the content we use as examples in our react storybook and website guidance to establish this.
In-page anchor links are violating the guidance for link color and icon placement.
The anchor links on the Carbon website are coming from Gatsby, not our core components. That being said, we should at least provide an underline on hover and focus in Gatsby. This will be a separate issue.
What about links that are just images?
We do not recommend using pure images as links. We have seen use cases of having cards that also include blocks on content within the container below the image treated as a link. We can add more about this in our guidance.
The text was updated successfully, but these errors were encountered: