You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A review of the Usage and other documentation on the Carbon Design System site turned up a few questions to do with link. These are more fully called out in the pdf review of the various pages, along with several minor things to fix, but are summarized here:
Is a link made up of text+icon really a link, or is it a button?
My suspicion is that such a construct is so similar to a button+icon (particulary ghost buttons) that the two amount to the same thing.
Although there is no Sketch link with icon pattern, there is a component implementation of it in React
They use "download" as their example, and I feel, as stated in the Usage review, that a download link does not actually meet the criteria for what they say a link should be. The start of the usage page outlines four times to use a link and when not to (my bolded emphasis):
Use links when you want users to:
Navigate to a different page within the application
Navigate to an entirely different site
Jump to an element on the same page
Link to emails or phone numbers
When not to use
Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action.
A download link clearly does not meet any of the four bulleted situations. My conclusion? It's a button that triggers a download action. Focus is not repositioned, etc. Are there any examples of a text+icon links that actually fulfill these 4 scenarios, or are they more likely to be button functionality, in reality?
I'll mention as an aside that I think this stated divide between buttons and links is a bit too pat. have a look at the pdf for more comments.
Does the icon add meaning that needs to be surfaced for accessibility?
Along with this concern about what such a text+icon 'link' is, there is also a concern with whether the icon is meaningful. As shown in this code snippet, it is hidden with aria, so will never be surfaced to assistive technologies.
Where the link is called "download" it's redundant. But imagine an example where the link is called "My trip diary". If it includes a download icon beside it, that is a VERY different outcome (download my diary) than one without the icon (take me to a page that is my diary).
How can we guide the author to a point where it's clear when an ALT is needed for the icon, and how do they include it? And is this any easier with a button icon? I think in the case of a button, an icon added beside a text label is always superfluous. The button's text is the accessible name.
in-page anchor links are violating the guidance for link color and icon placement
The one example of a link with icon where I think it is always a link is the case of in-page anchor links (basically a page outline). But these are peculiar for Carbon in that they are placed to the left of the link text and are not colored as links
These violate three pieces of guidance in Carbon. Not only do they not use the link color, but they don't take an underline on focus. Finally, they are positioned on the wrong side of the text, according to Carbon.
The standalone link component can be paired with an icon. Use 16px icons and place them to the right of the link.
What is the rationale for these deviations from style? Is this another link variant that needs to be captured?
What about links that are just images?
Although they are unusual, a possible way of making a link is an image link, as demonstrated by the w3c. Carbon has no examples of this. If they are never used, that's fine (although it might be an idea to explicitly address that). If they are used, this is possibly another link variant to capture.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Package
@carbon/react
Browser
Chrome
Operating System
MacOS
Package version
https://react.carbondesignsystem.com/?path=/story/components-link--default
React version
No response
Automated testing tool and ruleset
n/a
Assistive technology
No response
Description
A review of the Usage and other documentation on the Carbon Design System site turned up a few questions to do with link. These are more fully called out in the pdf review of the various pages, along with several minor things to fix, but are summarized here:
Is a link made up of text+icon really a link, or is it a button?
My suspicion is that such a construct is so similar to a button+icon (particulary ghost buttons) that the two amount to the same thing.
Although there is no Sketch link with icon pattern, there is a component implementation of it in React
They use "download" as their example, and I feel, as stated in the Usage review, that a download link does not actually meet the criteria for what they say a link should be. The start of the usage page outlines four times to use a link and when not to (my bolded emphasis):
A download link clearly does not meet any of the four bulleted situations. My conclusion? It's a button that triggers a download action. Focus is not repositioned, etc. Are there any examples of a text+icon links that actually fulfill these 4 scenarios, or are they more likely to be button functionality, in reality?
I'll mention as an aside that I think this stated divide between buttons and links is a bit too pat. have a look at the pdf for more comments.
Does the icon add meaning that needs to be surfaced for accessibility?
Along with this concern about what such a text+icon 'link' is, there is also a concern with whether the icon is meaningful. As shown in this code snippet, it is hidden with aria, so will never be surfaced to assistive technologies.
Where the link is called "download" it's redundant. But imagine an example where the link is called "My trip diary". If it includes a download icon beside it, that is a VERY different outcome (download my diary) than one without the icon (take me to a page that is my diary).
How can we guide the author to a point where it's clear when an ALT is needed for the icon, and how do they include it? And is this any easier with a button icon? I think in the case of a button, an icon added beside a text label is always superfluous. The button's text is the accessible name.
in-page anchor links are violating the guidance for link color and icon placement
The one example of a link with icon where I think it is always a link is the case of in-page anchor links (basically a page outline). But these are peculiar for Carbon in that they are placed to the left of the link text and are not colored as links
These violate three pieces of guidance in Carbon. Not only do they not use the link color, but they don't take an underline on focus. Finally, they are positioned on the wrong side of the text, according to Carbon.
What is the rationale for these deviations from style? Is this another link variant that needs to be captured?
What about links that are just images?
Although they are unusual, a possible way of making a link is an image link, as demonstrated by the w3c. Carbon has no examples of this. If they are never used, that's fine (although it might be an idea to explicitly address that). If they are used, this is possibly another link variant to capture.
WCAG 2.1 Violation
No response
Reproduction/example
n/a
Steps to reproduce
visit pdf reviews and https://react.carbondesignsystem.com/?path=/story/components-link--default to review.
Code of Conduct
Beta Was this translation helpful? Give feedback.
All reactions