SSL - Single Standard for Links

Definitions

The SSL standard defines requirements for the semantics, accessibility, and logic of links.

Structure and Semantics

Anchors and navigation

• <a href="/destination"> is used to navigate to another address. <button> is used for an action that does not navigate.
• A <div> or <span> with a click handler should not replace a link: this removes native link semantics, standard keyboard behavior, and browser actions such as opening the address in a new tab or copying the link.

Link purpose and text

• A link’s purpose must be clear from its text alone or together with programmatically associated context. Labels such as Learn more or Click here are appropriate only when the surrounding context clearly identifies the destination.
• Link text should describe the destination or action. The title attribute may provide supplementary information, but it is not a substitute for meaningful link text; its availability and presentation depend on the device and interaction method.
• A link containing only an icon or image needs an accessible name, provided by link text, visually hidden text, or aria-label; an image also uses alt. aria-label is appropriate when no visible label exists and should not unnecessarily replace existing link text. Decorative icons should be hidden from screen readers.

URL address and structure

• Relative URLs, such as /about, are suitable for internal navigation. External resources use a complete URL; https:// is preferred when available.

• A URL should follow the canonical form used by its destination. A trailing / should not be added or removed arbitrarily: the correct form depends on routing and server or framework configuration. Consistent internal URLs help avoid unnecessary redirects.

  <!-- Internal link -->
  <a href="/about">About</a>
  
  <!-- External link -->
  <a href="https://example.com/pricing">Pricing</a>

Fragment links and allowed destinations

• A link to a section uses a fragment identifier, such as href="#contact". The value must match a unique id on the target element.
• An empty href, href="#" used as a placeholder, and the javascript: scheme are not used. A button is intended for actions that do not navigate.
• Addresses received from a CMS, user input, or another external source should be checked against an allowlist of permitted schemes. An unvalidated address can lead to an unsafe protocol.

Links to files

• The link text or nearby context identifies the file type; the file size is included when it may affect the download decision.

• The download attribute can be used for a file intended to download. It works for same-origin resources and the blob: and data: schemes; response headers and browser settings may affect the result. The attribute alone cannot guarantee a download from an external resource.

  <a href="/files/guide.pdf" download>Guide (PDF, 2 MB)</a>

Accessibility and Security

Visual distinction and focus

• Inline links should be distinguishable from ordinary text by more than color, for example with an underline or another persistent visual cue. A hover-only effect is insufficient.
• Keyboard focus must remain visible. :focus-visible can be used to style it; the native outline should not be removed without an equally visible replacement.

Bypassing repeated content

• A mechanism for bypassing repeated blocks, such as navigation, should be available. A “Skip to main content” link is a common implementation: its fragment must match an existing id on the main region; if hidden by default, the link should become clearly visible when focused.

Visited-link state

• The :visited pseudo-class can distinguish links whose destinations have been opened in the current browser. It applies to internal and external links; browser restrictions protect browsing history rather than depend on the destination type.
• For privacy, browsers restrict the styles available to :visited and the ability to read its state programmatically. This state is optional and must not be the only way to convey meaningful information. Color must not be the only visual cue distinguishing a link from surrounding text.

Opening external links

• External links usually open in the current tab. The target="_blank" attribute should be used only when there is a clear user-experience reason; opening a new tab or window should be indicated in advance.

• Explicitly setting rel="noopener" is recommended with target="_blank". Modern browsers already prevent a _blank page from accessing window.opener; the explicit attribute documents the requirement and supports older implementations.

• rel="noreferrer" also suppresses the Referer header and implies noopener. This attribute is appropriate when withholding the referrer is a separate privacy requirement, not by default on every external link.

• An external-resource icon is optional. A decorative icon beside link text should be excluded from the accessible name. When a link opens a new tab, that behavior should also be announced to screen-reader users.

  <a href="https://partner.example" target="_blank" rel="noopener">
    Partner website
    <span aria-hidden="true">↗</span>
    <span class="sr-only">(opens in a new tab)</span>
  </a>

sr-only is an example utility class for visually hidden text; the equivalent class provided by the project’s design system should be used.

rel values for search qualification

• sponsored is used for paid or sponsored links, and ugc for links in user-generated content. nofollow is used when a link should be qualified for search engines or is not endorsed.
• These rel values do not replace noopener and do not protect against window.opener. Ordinary external links do not need nofollow by default.
• For Google Search, these values are hints and do not guarantee that a URL will not be discovered or indexed.

Email and Telephone Links

mailto: links

• The mailto: scheme is used to open a new email draft.
• Separate multiple recipients with commas and no spaces. URI parameters such as subject and body can provide additional fields.
• Parameter values are encoded as UTF-8 percent-encoded URI data. Line breaks in the body are represented as %0D%0A. When a URI is constructed in JavaScript, each parameter value is encoded rather than the entire link.
• In HTML markup, the & between parameters is written as &. The link invokes the mail application configured on the device; a website cannot guarantee that one is installed or how it behaves.

tel: links

• The tel: scheme is used to initiate a call. In href, a normalized international number is recommended: a leading + followed by digits, without spaces, parentheses, or hyphens.

• RFC 3966 permits visual separators in telephone numbers. For consistency, this standard uses a normalized form without separators.

• Phone numbers in examples are replaced with the mask xxx-xxx-xxx. tel:[normalized-number] in href is a template: it must be replaced with a real normalized number before use. The visible mask is not callable.

  <!-- Template: replace [normalized-number] with a real number -->
  <a href="tel:[normalized-number]">xxx-xxx-xxx</a>

Verification

• The link purpose is clear from its text or accessible context.
• Links are keyboard-accessible and have a visible focus state.
• The :visited state does not depend on scripts or expose browsing history; color is not the only link cue.
• New tabs are announced in advance; noopener is used with target="_blank".
• Fragments point to existing elements; file links work and identify the format; external and user-supplied URLs are validated.
• URLs use the agreed canonical form, and mailto: and tel: values are well-formed.

Examples

Internal link:

<a href="/about">About</a>

Link to a page section:

<a href="#contact">Contact</a>
<section id="contact">...</section>

Skip link for repeated navigation:

<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content">...</main>

Link to a downloadable file:

<a href="/files/guide.pdf" download>Guide (PDF, 2 MB)</a>

External link in the same tab:

<a href="https://example.com">Organization website</a>

External link opening in a new tab with an accessible notice:

<a href="https://partner.example" target="_blank" rel="noopener">
  Partner website
  <span aria-hidden="true">↗</span>
  <span class="sr-only">(opens in a new tab)</span>
</a>

Email to two recipients with a subject and body:

<a href="mailto:manager@example.com,ceo@example.com?subject=Question%20about%20project%20XYZ&amp;body=Hello!%0D%0A%0D%0AI%20have%20a%20question.">
  Email the management team
</a>

Call link (template):

<!-- Template: replace [normalized-number] with a real number -->
<a href="tel:[normalized-number]">xxx-xxx-xxx</a>