假如浏览器支持原生的”跳至内容”链接……

• 原文地址：Imagining native skip links
• 原文作者：kittygiraudel.com
• 译文出自：翻译方案
• 本文永久链接：github.com/xitu/人工智能技能使用gold-m…
• 译者：霜羽 H人工智能换脸鞠婧祎郑爽oarfroster
• 校对者：chzh9311、Kimhooo

[我们最近在 A11y Advent calendar 话题中谈到了”跳至内容”链接。假定你不熟悉这个概念ios退款，我引证ios是什么意思一下那里的原文：

当点击一个链接时，页面会被从头加载，焦点会恢复到页后端开发面顶部。而假定在这时候运用无妨碍辅佐github中文社区功用在页面中导航ios体系，在访问主要内容之前，必须先逐一越过整个页人工智能电影眉、导航，有时乃至包含侧边栏github怎么下载文件。这体会太糟糕了！为了解决这个问题，一个常见的规划ios14桌面布局图片方式是结束一个越过链接人工智能工作方向及前景，也就是发送至主要内容区域的锚链接。

存在的问题

所以这一切都很好。仅仅后端和前端有什么区别跳至内容链接的结束并不那么简略。仅列出几个它应该满足的约束条件：

• 它应该是第一个能够被辅佐功用辨认的链接。
• 它应该被小心地躲藏起来，以让其对特定用户而言依然能够运用。
• 当调集到它上面时它应该变得可见。
• 它的内容应该以 “越过” 开端，以便于让用户辨认。
• 它应该导航到页面的主后端开发需求学什么要内容。

这并不凌乱，但也很人工智能的界说简略搞砸。已然每个网站都需求这样做，那么问题就来了 —— 为什么阅览器不原生支撑呢？ —— 这是12月时我向ios是什么意思 Web We Want提议的。

阅览器的功用？

不难想象，为了给运用辅佐技能的人供给更好、更一致的体会，阅览器能够在原生的状况下处理这个问题，几乎不需求网页开发人工智能概念股人员进行控制。

在阅览器的用户界面中跳出一个标签（或运用专github下载用的快捷markdown笔记键切换），进入另一个网页时，阅览器会当即闪现越过链接，而且清楚：

1. 它将作为标签次序中的第一个元素被刺进。
2. 它将运用阅览器的言语，这不一定是网页的言语。
3. 从技能上讲，它将是阅览器界面的markdown语法一部分，而不是网站的一部分。ios14桌面布局图片因此ios体系，这将依据阅览器的主github下载题进行款式规划。
4. 它不会被网页成心访问（github中文官网网页严厉意义上的）。
5. 它将后端开发需求把握什么技能被渲染在页面的顶部，以避免损坏布局的危险。

一个 HTML API

中心思想是尽量削减对它的控制ios退款权。就像开发者对阅览器的后端和前端有什么区别标签或地址栏的外观和行ios下载为没github开放私库有发言权相同。也就人工智能能否取代人类是说，链接的政策应该是能够装备的。

一个合理的默认值是指向 <main> 元素，因为它在每个页面中都是仅有的，而且明确地要包含主要内容。

<main> 是文档或使用程后端序正文的主要内容。主要内容区域由与文档的中心主题或使用程序的中心功用直接相关或扩展的内容组成。

• W3C HTML 编辑草案

但并不是一切的网站都运用 <main> 元素。我认为阅览器或许会有一些内置的启发式方法来找出什么是主要的内容容器，但恐怕这不在该功用讨论的范围内。

因此，为了给 Web 开发者供给一种方法来准确界说哪个容器才是真实的主容器，能够运用一个 <meta> 标签。它将承受一个 CSS 选择器（凌乱程度由需求抉择），当运用越过链接时，阅览器将查询该 DOM 节点，将翻滚并调集它。

<meta name="skip-link" value="#content"/>

另一种方法是运用带有 rel 特点的 <link> 标签，人工智能电影如 Aaron Gustafson 所提示的。

<link rel="skip-link" href后端言语="#content"/>

阅览器是否应该监听这个元素的改动（不管是什么）是一个开放性的问题。我认为是的，仅仅为了安全起见。

现有的跳转内容链接应该怎样处理？github怎么下载文件

阅览器是否会在本地结束越过链接，我们现有的自界说链接又会怎样？他们很或许不ios14会有太大的困扰。

在网页内容区域中的标签将闪现原生的跳转链接。假定运用，它将绕过整个导航github中文官网网页，包含自界说跳转链接。假定不运用，下一个标签将是网站的跳转链接，这将是剩下的，但也无关紧要。

志向的状况是，阅览器供给一种方法来markdown数学公式知道是否支撑该功用，这样跳转链接就可认为还不支撑跳转链接的阅览器进markdown数学公式行多重填充。不过这很或许需求 JavaScript。

if (!windows.navigator.skipLink) {
const skipLink = document.后端工程师createElement('a')
skipLink.href='#main'
sk人工智能技能使用ipLink.innerHT人工智能的界说ML = '跳转到主要内容'
document.body.prepend(skipLink)
}

收尾github是干什么的

这绝不是完美的，我也没有一个满有把握的解决方案能够供给。假定有的话ios14，我信任比我更聪明、更有智慧的人早就提出来了。

不过，缺少跳转链接对运用辅佐技能阅览网页的人来说是一个很大的妨碍。而且考虑到每个网站都需求一个，不同网站之间几乎没有差异，这的确感觉像是阅览器在原生上该做的工作。

和平常相同，欢迎在社区上与我同享你的主意：)

假定发现译文存在过错或其他需求改进的当地，欢迎到 翻译方案 对译文进行修改并 PR，也可获得相应奖赏积分。文章开端的 本文永人工智能专业久链接 即为本文在 GitHub 上的 MarkDown 链接。

翻译方案 是一个翻译优质互联网技能文章的社区，文章来历为 上的英文同享文章。内容掩盖 Amarkdown语法ndroid、iOS、前端、后端、区块链、产品、规划、人工智能等领域，想要检查更多优质译文请继续注重 翻译方案、官方微博、知乎专栏。