如何使用跳过链接使您的 WordPress 网站更易于访问
已发表: 2023-02-26在我们的可访问性系列介绍中，我们讨论了各种 Web 内容可访问性指南 (WCAG) 的基础。 现在是采取下一步行动的时候了，查看一些关键指南并向您展示如何使您的网站更易于访问。 让我们从旁路块开始，通常称为跳过链接。
什么是跳过链接？
跳过链接是一个隐藏在您网站上的特殊链接，直到它通过 tab 键或屏幕阅读器进入:focus 。 他们的目的是让替代技术用户（使用键盘和屏幕阅读器的人）能够跳过内容块。 直接从标准：
“一种机制可用于绕过在多个网页上重复的内容块。” – WCAG 标准 2.4.1 – 旁路块
2.4.1是A级标准。 这意味着它包含在第 508 节中，并且是法律要求的。 你需要有跳过链接。
您能猜出最常见的内容跳过链接块适用于什么吗？ 如果您猜对了“菜单”，那您就猜对了。 菜单几乎出现在站点的每个页面上。 有视力的用户和鼠标用户倾向于向右滚动，因为它是您希望出现的网站元素之一。 但是导航菜单并不是唯一需要跳过链接的块。
跳过链接通常被忽视的区域是左侧边栏（或右侧边栏，用于从右到左语言（如阿拉伯语）的网站）。 由于它们倾向于按语义顺序排列，用户将需要一种方法来跳过定期重复的侧边栏，以便直接访问内容。
出现在主页之外的特色帖子块也是如此。 一些网站设计将特色帖子部分或滑块带到内部页面。 除非这些部分的内容发生变化，即：类别或存档页面，否则应该有一个跳过链接。
你如何添加跳过链接？
现在您知道什么是跳过链接，是时候将它们添加到您的站点了。 有几种方法可以解决这个问题。 简单的方法（对于非编码人员来说，这是唯一的方法）是安装一个插件。 困难的方法是自己将它们编码到您的主题中。
使用插件
我们在跳过链接时推荐一个插件：Joe Dolson 的 WP Accessibility。 它解决了几个可访问性问题，包括为您添加基本的跳过链接。
自己编码
您的另一个选择是自己编写跳过链接的代码。 代码本身相当简单，只需要一些基本的 HTML 和 CSS 知识，但在尝试此方法之前，您需要熟悉 WordPress 主题和模板的工作方式。 从现在开始，我们假设您知道如何查找引用的文件以及如何编辑它们。
我们将首先编写实际的跳过链接。 这将允许轻松复制和粘贴到模板文件中。 回顾一下 HTML 知识，你需要写出一个锚标记。 请注意，此处的格式是为了便于阅读。
&amp;lt;a href=”[don't fill this in yet]” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; 我们故意将href属性留空。 这是因为我们需要定义我们的跳过链接将链接到的位置。 对于这个例子，我们将使用<main>元素作为我们的目标。 因为我们不能直接链接到没有 ID 的元素，所以我们需要确保我们的<main>元素有一个。 您的<main>元素可能会在header.php中找到，但并非总是如此。 找到元素后，您需要确保它有一个 ID。 如果没有，请像这样添加一个：
&amp;lt;main id=”main-content”&amp;gt; [a bunch more code below]ID 的具体值并不重要，但您需要记住它。 现在您需要使用 ID 值更新您的跳过链接代码。
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; 现在您已经构建了跳过链接，返回到您的header.php文件或主题的开始<body>标记所在的位置。 <body>标签是跳过链接必不可少的位置，因为对于键盘和屏幕阅读器用户来说，它们绝对是进入:focus的第一件事。
在<body>标记之后，通过您完成的 HTML。 下面显示了一个更详细的示例，其中包含多个跳过链接。 如果您想向您的网站添加多个链接，请确保正确应用 ID。
&amp;lt;body&amp;gt; &amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt; &amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt; &amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;gt; [Header navigation goes here]现在您的代码中已经有了跳过链接，但您还没有完成！ 如果您现在加载您的页面，您将在顶部看到跳过链接。 是时候添加一些 CSS 了。 跳过链接的样式非常简单，使用以下示例：
.skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; } 您看不到的是display: none的使用。 使用它会导致屏幕阅读器完全跳过链接，完全违背目的。 隐藏是通过使用right: 100%将文本放置在屏幕外并将其移动到right: auto on :focus完成的。
应用 CSS 后，一切就绪。 您的跳过链接已到位，但已隐藏。 当键盘用户或屏幕阅读器在 initiates :focus处加载您的页面时，您的跳过链接将让他们直接移动到他们想要的内容。
把它包起来
跳过链接是辅助功能的一个完美示例，它看起来需要大量工作，但实际上并非如此。 我们在代码方面所做的只是添加几行 HTML 和 CSS。 对于非技术方法，我们安装了一个插件。 这两种方法都需要很长时间，这一点很重要，因为跳过链接是 WCAG 2.0（最新的 WCAG 标准）的 A 级标准。法律要求您将它们放在您的网站上。不要让自己处于危险之中； 今天添加您的跳过链接！