For the external link add LinkExternal icon, it helps indicating that a hyperlink goes to a different domain. In case, when this icon is used alone as a link, it must be correctly identified by assistive technology and have a valid alternative text.
When presenting multiple links to the same location next to each other, it can create a poor experience for assistive technology users. Instead, wrap all elements in the same anchor tag to create a larger target area and a single entry for screen reader and keyboard-only users. When using this method, images within the anchor tag should have a null alt attribute.
Developers should use the a tag when creating links because it has built-in accessibility features. These features include keyboard focusability, screen reader compatibility, and a default pointer cursor.
Add tabindex=”0” so that the link becomes keyboard focusable
Add role=”link” so that assistive technology recognizes the element as a link
Add the styling cursor: pointer so that mouse users will recognize the element as a link.
If there is no text in the link, it is necessary to use aria-label with a link description.