Add a section for links for Web

[msankaran0712]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Currently we have to refer to the breadcrumbs component to check the links

Motivation and context

No response

[msankaran0712]

Wait for @egunther39 @coliff

Example,
https://web-components.carbondesignsystem.com/?path=/story/components-link--paired-with-icon

[coliff]

Important thing we should include is making sure focus states are accessible.

• Focus states are meant to draw attention to the element. Trying to make them blend in with the UI defeats the purpose.
• Focus states need to have at least [a 3:1 contrast ratio](https://www.w3.org/TR/WCAG20-TECHS/G183.html with the background) against the background color.
• All interactive components on a page need a focus state, not just buttons or links.
• Focus states cannot just be a color change. You need a dedicated visual indicator. This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state.
• Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles.
• Be aware of the thickness of lines used for a focus state. Lines smaller than 2px may be technically accessible, but will be hard to see. Try using a squint test to see how low vision users might be viewing your site.
• Consider using motion to help with transition as the focus jumps from element to element. A good example can be seen by tabbing through WebAim.org.

Much more info at: https://www.sarasoueidan.com/blog/focus-indicators/#main