关于链接

HTML Living Standard 有一个专门讨论链接的部分。以下是该文档提供的释义：

链接是一个概念性结构，代表两个资源之间的连接。

它还指出，链接有两种类型：外部资源链接和超链接。

我们分别举例说明。

外部资源链接

指向外部资源的链接是指当前网站之外的资源。可以通过设置 rel 属性为 "external" 来标记这些链接，然后还可以使用像 a[rel="external"] 这样的 CSS 属性选择器对它们应用独特的样式。例如，您可能选择在每个 rel="external" 的链接后面附加文本 "(外部链接)"。这可以通过以下 CSS 实现：

a[rel="external"]::after {
  content: " (external link)";
}

相关概念：提前警告用户上下文变化，以尽量减少混淆

还可以对带有 target="_blank" 的链接应用特殊样式。在以下示例中，文本“（在新标签页中打开）”被添加到链接中，以警告用户激活链接时会发生多个上下文变化。

a[target="_blank"]::after {
  content: " (opens in new tab)";
}

这与 Success Criterion 3.2.5: Change on Request 有关，该标准指出：

只有在用户提出要求时才会更改上下文，或者有一种机制可以关闭这种更改。

出于许多原因，提醒用户某个操作会导致上下文变化非常重要。一些用户可能因为认知限制或视觉、阅读或智力障碍而无法察觉到上下文的变化。对于运动能力有限的用户来说，意外和不必要的上下文变化会导致他们需要付出额外努力才能回到原来的状态。

超链接

超链接是指向当前网站内资源的链接。下面是一些例子：

• 链接到当前页面上的另一个位置，例如目录有一个链接到标题元素的链接
• 链接到网站的另一个页面，例如链接到另一个网站的相关博文
• 可下载文件的链接，这些文件将在以后使用，而不是立即使用

按钮元素接受的一长串属性：

• autofocus 自动对焦
• autocomplete 自动完成
• disabled 禁用
• form 组成
• formaction 行动
• formenctype 表单类型
• formmethod 方法
• formnovalidate
• formtarget 表单目标
• name 名字
• type
• value

button ARIA 角色

WAI-ARIA 1.2 规范指出， button 的作用是：

点击或按下时允许用户触发操作的输入。按钮主要用于不连续的操作。将按钮的外观标准化，可增强用户将部件识别为按钮的能力。

这就是说，按钮通常一次只用于执行一个动作。它还指出，用户可以从按钮的标准化外观中获益，从而识别出按钮是一种交互式元素。

还有多少用户代理或辅助技术功能被编码不良的元素破坏？我不知道。你想测试每一个元素并找出答案吗？我很怀疑。使用本地 HTML 元素即可！

请记住使用 ARIA 的第一条规则：

如果可以使用已内置所需语义和行为的本地 HTML 元素或属性，而不是重新利用一个元素并添加 ARIA 角色、状态或属性使其可访问，那么就这样做吧。

不要忘记使用 ARIA 的第二条规则：

除非确有必要，否则不要改变本地语义。

为什么按钮和链接的样式不同

有四项无障碍原则指导我们必须如何构建网络和内容。可以用缩写词 POUR 来记住它们：信息和界面必须是可感知的、可操作的、可理解的和稳健的。

按钮和链接的外观与无障碍环境的四项原则有什么关系呢

• 在用户操作界面之前，他们必须能够感知界面中哪些元素是交互式的。
• 为了让用户在操作界面之前做出明智的决定，界面必须易于理解。
• 为了让用户能在多种条件和环境下操作界面，界面必须坚固耐用。

那么答案是什么呢？

当你需要连接两个资源，且元素被激活时需要发生以下情况之一时，请使用锚元素：

• 下载链接资源
• 将浏览器焦点移至页面的其他部分、
• 将浏览器定位到另一个页面

当需要让用户执行可编程操作（如提交表单或打开对话框）时，可使用按钮元素。