Hyperlinks are text affordances that trigger either navigation to another page or section, or initiate an action, such as download.
Isolated hyperlinks are textual links that are on a line by themselves, as is typically the case with main calls to action. Isolated hyperlinks should appear as follows:
Brand color (ensure accessibility on background). Default is
Follow with space and official small chevron symbol (not an arrow, nor arrow with circle, nor greater than symbol)
On hover, underline the text (not the following space or chevron) and ensure cursor converts to hand/pointer
In cases where you must include hyperlinks within the context of a given sentence or paragraph, adhere to the same guidance above, but do not include the chevron symbol.
Screen reader users often use hotkeys to navigate a page, skipping to the next heading or link. As such, commonly used web marketing links like "Learn more," "Buy now," "Download now," and "Try it free" lose context. To add the proper context for screen reader users without changing the experience for sighted users do the following:
Include additional context (intended for screenreaders) in the anchor.
Wrap text intended only for screen readers within a span which you hide with CSS.
<a href="/download>Download <span class="hidden">Windows 10</span> now</a>
Lastly, make sure that all links can be navigated to and selected by way of keyboard using the TAB (for navigation) and ENTER (for selection) keys.