链接和按钮指南

链接

链接是 Web 中最基本、最基础、最核心的构建模块之一。点击一个链接，您将跳转到另一个页面，或跳转到同一页面的另一个位置。

目录

• HTML 实现
• 样式和 CSS 考虑因素
• JavaScript 考虑因素
• 可访问性考虑因素

HTML 实现

基本链接

<a href="https://css-tricks.org.cn">CSS-Tricks</a>

这是一个指向“完全限定”或“绝对”URL 的链接。

相对链接

您也可以“相对”链接。

<!-- Useful in navigation, but be careful in content that may travel elsewhere (e.g. RSS) -->
<a href="/pages/about.html">About</a>

这可能很有用，例如，在开发中，域名可能与生产站点不同，但您仍然希望能够点击链接。相对 URL 最适合导航等操作，但在内容中（例如博文）使用时要小心，因为这些内容可能在其他地方被阅读，例如在应用程序或 RSS 订阅源中。

跳转链接

链接也可以通过以 # 开头来成为“哈希链接”或“跳转链接”。

<a href="#section-2">Section Two</a>
<!-- will jump to... -->
<section id="section-2"></section>

点击该链接将“跳转”（滚动）到 DOM 中第一个 ID 与之匹配的元素，例如上面的 section 元素。

💥 **小技巧：**在开发中使用哈希链接（例如 #0）可能会有用，这样您就可以点击链接而不会像点击 # 链接那样被发送回页面顶部。但要小心，不指向任何位置的链接永远不应该出现在生产环境中。

💥 **小技巧：**跳转链接有时可以从 平滑滚动 中获益，以帮助用户理解页面正在从一个地方移动到另一个地方。

在网站上看到一个“返回顶部”链接是很常见的 UI/UX 现象，尤其是在重要导航控件位于顶部但有大量内容需要滚动（或以其他方式导航）时。要创建一个跳转链接，请链接到页面顶部元素的 ID，该元素是将焦点发送回去的最佳位置。

<a href="#top-of-page">Back to Top</a>

跳转链接有时也用于链接到其他没有 href 属性的锚点 (<a>) 元素。这些被称为“占位符”链接。

<a id="section-2"></a>
<h3>Section 2</h3>

这些链接有一些 可访问性考虑因素，但总体而言是可以接受的。

禁用链接

没有 href 属性的链接是 唯一实用方法 来禁用链接。为什么要禁用链接？也许它是一个只有在登录或注册后才能激活的链接。

a:not([href]) {
  /* style a "disabled" link */
}

当链接没有 href 时，它没有角色、没有可聚焦性，也没有键盘事件。 这是故意的。您可以把它想象成 <span>。

您需要链接在新窗口或选项卡中打开吗？

您可以为此使用 target 属性，但这 强烈不建议。

<a href="https://css-tricks.org.cn" target="_blank" rel="noopener noreferrer">
  CSS-Tricks
</a>

使其起作用的部分是 target="_blank"，但请注意那里有额外的 rel 属性和值，这些值 使其更安全，而且 更快。

让链接在新选项卡中打开是一个重大的 UX 讨论。我们在这方面有一篇关于 何时使用它的完整文章。总结如下

不要使用它

• 因为您或您的客户个人偏好。
• 因为您正在尝试提高您在网站上的停留时间指标。
• 因为您正在区分内部链接和外部链接或内容类型。
• 因为这是您逃避处理无限滚动复杂性的方法。

使用它

• 因为用户正在当前页面上执行某些操作，例如主动播放媒体或有未保存的工作。
• 您有一些模糊的技术原因迫使您这样做（即使那样，您可能仍然是例外而不是规则）。

需要链接触发下载吗？

链接上的 download 属性 将指示浏览器下载链接文件，而不是在当前页面/选项卡中打开它。这是一个不错的 UX 功能。

<a href="/files/file.pdf" download>Download PDF</a>

rel 属性

此属性用于链接与目标的关系。

rel 属性也常用于 <link> 元素（它不用于创建超链接，而是用于诸如包含 CSS 和预加载之类的事情）。我们这里不包括 <link> 元素的 rel 值，只包括锚点链接。

以下是一些基本示例

<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

<a href="/topics/" rel="directory">All Topics</a>

• rel="alternate"：文档的备用版本。
• rel="author"：文档的作者。
• rel="help"：有关文档的帮助资源。
• rel="license"：许可证和法律信息。
• rel="manifest"：Web 应用清单文档。
• rel="next"：系列中的下一篇文章。
• rel="prev"：系列中的上一篇文章。
• rel="search"：用于在当前文档中执行搜索的文档。

还有一些 rel 属性专门用于 告知搜索引擎

• rel="sponsored"：将广告或付费展示（通常称为付费链接）标记为赞助。
• rel="ugc"：对于不太可靠的用户生成内容，例如评论和论坛帖子。
• rel="nofollow"：告诉搜索引擎忽略此链接，不要将此网站与链接到的网站关联起来。

还有一些以安全性为中心的 rel 属性

• rel="noopener"：防止新选项卡使用 JavaScript window.opener 功能，该功能可能会访问包含链接的页面（您的网站）以执行恶意操作，例如窃取信息或共享受感染的代码。与 target="_blank" 一起使用通常 是一个好主意。
• rel="noreferrer"：防止其他网站或跟踪服务（例如 Google Analytics）将您的页面识别为点击链接的来源。

如果需要，您可以使用多个空格分隔的值（例如 rel="noopener noreferrer"）

最后，一些rel属性来自微格式标准或独立网络，例如

• rel="directory"：表示超链接的目标是包含当前页面条目的目录列表。
• rel="tag"：表示该超链接的目标是当前页面的作者指定“标签”（或关键字/主题）。
• rel="payment"：表示该超链接的目标提供了一种显示或支持当前页面的方式。
• rel="help"：表示链接到的资源是当前文档的帮助文件或常见问题解答。
• rel="me"：表示其目标代表与当前页面相同的个人或实体。

ARIA 角色

链接的默认角色是link，因此你不需要执行

<a role="link" href="/">Link</a>

你只需要在伪造链接时这样做，这将是一件奇怪/罕见的事情，你必须使用一些 JavaScript 来完成它，以便它真正遵循链接。

<span class="link" tabindex="0" role="link" data-href="/">
  Fake accessible link created using a span
</span>

只需查看上面的内容，你就可以看到伪造链接需要多少额外的工作，并且这还没有考虑它会破坏右键单击，不允许在新标签页中打开，不适用于 Windows 高对比度模式和其他阅读器模式以及辅助技术。很糟糕！

一个有用的 ARIA 角色来指示当前页面，例如

<a href="/" aria-current="page">Home</a>
<a href="/contact">Contact</a>
<a href="/about">About/a></a>

你应该使用title属性吗？

可能不会。将其保留用于为iframe提供简短的描述性标题。

<a title="I don't need to be here" href="/">
  List of Concerts
</a>

title提供了一个悬停触发的 UI 弹出窗口，显示你编写的文本。你无法对其进行样式化，并且它实际上并没有那么易于访问。

悬停触发是这里的关键短语。它在任何仅限触控的设备上都不可用。如果链接需要更多上下文信息，请在链接周围的实际内容中提供该信息，或者使用链接本身的描述性文本（而不是像“点击这里”这样的东西）。

仅包含图标的链接

如果链接中只包含一个图标，例如

<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>

这不足以提供有关链接的上下文信息，特别是对于辅助功能的原因，但可能对任何人都有用。带有文本的链接几乎总是更清晰。如果你绝对无法使用文本，你可以使用类似以下模式的内容

<a href="/">
  <!-- Hide the icon from assistive technology -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Acts as a label that is hidden from view -->
  <span class="visually-hidden">Useful link text</span>
</a>

visually-hidden是一个用于使用 CSS 视觉隐藏标签文本的类

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

与aria-label不同，视觉隐藏文本可以翻译，并且在专用浏览模式中会保持更好的效果。

围绕图像的链接

如果你将图像包裹在链接中，图像可以是链接。无需使用 alt 文本来说明图像是一个链接，因为辅助技术已经会这样做。

<a href="/buy/puppies/now">
  <img src="puppy.jpg" alt="A happy puppy.">
</a>

围绕更大内容块的链接

你可以链接整个内容区域，例如

<a href="/article/">
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>

但当然，也存在 UX 影响。例如，选择文本可能更难，并且整个元素需要相当复杂的样式才能创建清晰的焦点和悬停状态。也存在辅助功能影响，例如在宣布为链接之前，会先读取整个卡片的内容。

以下是一个包含两种方法的示例。第一个将整个卡片包裹在链接中。这是有效的，但请记住影响。第二个在标题中包含一个链接，并且链接上有一个覆盖整个卡片的伪元素。这也有一些影响（例如，选择文本有点尴尬），但对于辅助技术来说可能更符合预期。

第二个示例还打开了包含多个链接的可能性。你不能嵌套链接，所以如果你需要嵌套链接，事情会变得有点棘手。尽管可以通过将各个链接设置在覆盖卡片的链接之上，并使用 z-index 来实现。

样式和 CSS 注意事项

以下是链接的默认外观

你很可能要更改链接的样式，并且也很可能使用 CSS 来完成。我可以通过以下方式在 CSS 中将所有链接设置为红色

a {
  color: red;
}

有时，选择和样式化页面上的所有链接有点太过分了，因为导航中的链接可能与文本中的链接完全不同。你始终可以范围选择器来针对特定区域内的链接，例如

/* Navigation links */
nav a { }

/* Links in an article */
article a { }

/* Links contained in an element with a "text" class */
.text a { }

或者直接选择链接进行样式化。

.link {
  /* For styling <a class="link" href="/"> */
}

a[aria-current="page"] {
  /* You'll need to apply this attribute yourself, but it's a great pattern to use for active navigation. */
}

链接状态

链接是可聚焦元素。换句话说，它们可以使用键盘上的Tab键进行选择。链接可能是你非常有意识地设计不同状态（包括:focus状态）的最常见元素。

• :hover：用于在鼠标指针悬停在链接上时进行样式化。
• :visited：用于在链接已被跟随时进行样式化，尽可能地按照浏览器能够记住的方式进行。由于安全性问题，它具有有限的样式化能力。
• :link：用于在链接未被访问时进行样式化。
• :active：用于在链接被按下时（例如鼠标按钮被按下或在触控屏上点击元素）进行样式化。
• :focus：非常重要！链接应该始终具有焦点样式。如果你选择删除大多数浏览器应用的默认蓝色边框，也使用此选择器来重新应用一个视觉上明显的焦点样式。

这些可以像任何伪类一样进行链接，因此如果你觉得对你的设计/UX 有用，你可以这样做。

/* Style focus and hover states in a single ruleset */
a:focus:hover { }

你可以将链接设置为按钮样式

也许链接和按钮之间的某些混淆是因为类似这样

这当然看起来像一个按钮！每个人都会称它为按钮。即使是设计系统也可能称它为按钮，并且可能有一个类似.button { }的类。但是！你可以点击的、上面写着“了解更多”的东西绝对是一个链接，而不是一个按钮。这完全没问题，它只是又一次提醒你使用语义和功能上正确的元素。

颜色对比度

由于我们经常使用不同的颜色对链接进行样式化，因此使用具有足够颜色对比度的颜色以实现辅助功能非常重要。存在各种视觉障碍（请参阅工具WhoCanUse 以模拟具有不同障碍的配色方案），并且高对比度几乎可以帮助所有障碍。

也许你为链接设置了一个蓝色

虽然这对你来说可能看起来不错，但最好使用测试工具来确保颜色符合研究指南的要求，并具有足够的对比度。在这里，我将使用 Chrome DevTools，它会告诉我这种颜色不符合要求，因为它与背后的背景色对比度不够。

颜色对比度是链接的一个重要考量因素，不仅仅因为链接通常使用独特的颜色，需要检查，而且因为它们有各种不同的状态（悬停、焦点、活动、访问），这些状态可能也有不同的颜色。再加上文本可以被选中，你有很多地方需要考虑对比度。 这里有一篇文章介绍了所有这些。

链接的“类型”样式

我们可以使用 CSS 中的属性选择器来识别链接指向的资源类型，前提是 href 值中包含有用的信息。

/* Style all links that include .pdf at the end */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* Style links that point to Google */
a[href*="google.com"] {
  color: purple;
}

打印链接的样式

CSS 有一种“at-规则”，用于声明仅对打印媒体生效的样式（例如，打印网页）。你可以将它们包含在任何 CSS 中，如下所示

@media print {
  /* For links in content, visually display the link */ 
  article a::after { 
    content: " (" attr(href) ")";
  }
}

重置样式

如果你需要移除链接（或任何其他元素）的所有样式，CSS 提供了一种使用 all 属性来移除所有样式的方法。

.special-area a {
  all: unset;
  all: revert;
  
  /* Start from scratch */
  color: purple;
}

你也可以使用关键字移除单个样式。（同样，这并不只针对链接，而是通用的方法）

a {
  /* Grab color from nearest parent that sets it */
  color: inherit;

  /* Wipe out style (turn black) */
  color: initial;

  /* Change back to User Agent style (blue) */
  color: revert;
}

JavaScript 注意事项

假设你想要阻止链接的点击执行其默认行为：跳转到该链接或在页面中跳转。在 JavaScript 中，你可以使用 preventDefault 来阻止跳转。

const jumpLinks = document.querySelectorAll("a[href^='#']");

jumpLinks.forEach(link => {
 link.addEventListener('click', event => {
    event.preventDefault();
    // Do something else instead, like handle the navigation behavior yourself
  });
});

这种方法是“单页面应用”（SPA）工作原理的核心。它们拦截点击，以防止浏览器接管并处理导航。

SPA 会查看你尝试跳转到的位置（在你的网站内），加载所需的数据，替换页面上需要替换的部分，并更新 URL。这相当于复制浏览器免费提供的功能，需要做很多工作，但你可以实现页面之间的动画等效果。

另一个与链接相关的 JavaScript 问题是，当点击指向另一个页面的链接时，会离开当前页面并加载另一个页面。对于包含用户正在填写但未完成的表单的页面，这可能是一个问题。如果他们点击链接并离开页面，他们将丢失他们的工作！你唯一阻止用户离开的机会是使用 beforeunload 事件。

window.addEventListener("beforeunload", function(event) {
  // Remind user to save their work or whatever.
});

默认行为被移除的链接不会宣布新的目标。这意味着使用辅助技术的使用者可能不知道他们最终到了哪里。你将不得不做一些事情，比如更新页面的标题并将焦点重新移到文档的顶部。

JavaScript 框架

在 JavaScript 框架（如 React）中，你可能有时会看到链接是从类似 <Link /> 组件而不是原生 <a> 元素创建的。自定义组件可能会创建一个原生 <a> 元素，但会添加额外的功能，例如启用 JavaScript 路由器工作，并根据需要添加 aria-current="page" 等属性，这很好！

最终，链接就是链接。JavaScript 框架可能会提供或鼓励一定程度的抽象，但你始终可以自由地使用常规链接。

可访问性注意事项

我们在上面的部分中介绍了一些可访问性（它们都是相关的！），但这里还有一些需要考虑的事情。

• 链接文本本身不需要像“链接”或“前往”这样的文字。使文本更有意义（使用“文档”而不是“点击此处”）。
• 链接默认情况下已经具有 ARIA 角色（role="link"），因此无需显式设置它。
• 尽量不要使用 URL 本身作为文本（<a href="google.com">google.com</a>）。
• 链接通常是蓝色的，通常带下划线，这通常很好 。
• 内容中的所有图像都应该有 alt 文本，但当图像被包裹在没有其他文本的链接中时，这一点更加重要。

独特的可访问名称

一些辅助技术可以创建页面上的交互元素列表。想象一下一组四个文章卡片，它们都包含一个“阅读更多”，交互元素的列表将类似于

• 阅读更多
• 阅读更多
• 阅读更多
• 阅读更多

没什么用。你可以使用我们介绍过的 .visually-hidden 类，使链接更像

<a href="/article">
  Read More
  <span class="visually-hidden">
    of the article "Dancing with Rabbits".
  <span>
</a>

现在每个链接都是唯一的，清晰明了。如果设计允许，请不要使用隐藏的类，以消除对所有人的歧义。

<button>Buy Now</button>

<form action="/" method="POST">
  <input type="text" name="name" id="name">
  <button>Submit</button>

  <!-- If you want to be more explicit... -->
  <button type="submit">Submit</button>

  <!-- ...or clear the form inputs back to their initial values -->
  <button type="reset">Reset</button>

  <!-- This prevents a `submit` action from firing which may be useful sometimes inside a form -->
  <button type="button">Non-submitting button</button>
</form>

<form action="/" method="get">

  <!-- override the action -->
  <button formaction="/elsewhere/" type="submit">Submit to elsewhere</button>

  <!-- override encytype -->
  <button formenctype="multipart/form-data" type="submit"></button>

  <!-- override method -->
  <button formmethod="post" type="submit"></button>

  <!-- do not validate fields -->
  <button formnovalidate type="submit"></button>

  <!-- override target e.g. open in new tab -->
  <button formtarget="_blank" type="submit"></button>

</form>

<div class="modal">

  <h2>Save document?</h2>

  <button>Cancel</button>
  <button autofocus>OK</button>
</div>

<button disabled>Pay Now</button>
<p class="error-message">Correct the form above to submit payment.</p>

/* Might be good styles for ANY disabled element! */
button[disabled] {
  opacity: 0.5;
  pointer-events: none;
} 

<button>
   <svg aria-hidden="true" focusable="false">
     <path d="..." />
   </svg>
   <span class="callout">Big</span>
   Sale!
</button>

<button type="button">
  <span role="img" aria-label="Fox">
    🦊
  </span>
  Button
</button>

button {
  font-family: inherit; /* For all browsers */
  font-size: 100%; /* For all browsers */
  line-height: 1.15; /* For all browsers */
  margin: 0; /* Firefox and Safari have margin */
  overflow: visible; /* Edge hides overflow */
  text-transform: none; /* Firefox inherits text-transform */
  -webkit-appearance: button; /* Safari otherwise prevents some styles */
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.button {
  border: 0;
  border-radius: 0.25rem;
  background: #1E88E5;
  color: white;
  font-family: -system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  cursor: pointer;
}

button:hover { }
button:focus { }
button:active { }
button:visited { } /* Maybe less so */

button[aria-pressed="true"] { }
button[aria-pressed="false"] { }

<p>You may open your <button>user settings</button> to change this.</p>

document.querySelector("button").addEventListener('click', function(event) {
  event.currentTarget.setAttribute("disabled", true);
}, {
    once: true
});

<button onclick="console.log('clicked');">
  Log it.
</button>

<button onmousedown="">
</button>

<button onmouseup="">
</button>

const Button = ({ className, children }) => {
  const [activated, setActivated] = React.useState(false);
  return (
    <button
      className={`button ${className}`}
      aria-pressed={activated ? "true" : "false"}
      onClick={() => setActivated(!activated)}
    >
      {children}
    </button>
  );
};

button:focus {
  outline: 0; /* Removes the default blue ring */

  /* Now, let's create our own focus style */
  border-radius: 3px;
  box-shadow: 0 0 0 2px red;
}

:focus:not(:focus-visible) { 
  outline: 0; 
}

<button aria-labelledby="buttonText">
  Time is running out! 
  <span id="buttonText">Add to Cart</span>
</button>