20 个必须知道的 Web 可访问性技巧

2025-05-28

20 个必须知道的 Web 可访问性技巧

两只手伸出来互相帮助

目录

本系列的第三部分旨在为您提供创建可访问网站的基本原则（并非全部，因为这几乎是不可能的！）、实用建议和示例。

我将分享我们团队遵循的一些基本准则，以使我们的网站可访问并实现双 A 级可访问性。

我们将揭开为图像创建清晰描述的秘密，探索仅使用键盘进行导航的世界等等，以便每个人都可以像专业人士一样浏览您的网站。:)

1 - 学习如何使用屏幕阅读器

在开始编写代码之前，了解如何使用屏幕阅读器非常重要。这是一项基本技能，可以帮助您了解用户在浏览您的网站时面临的挑战。

我们团队大部分人在 MacOS 系统下工作时都会使用Voiceover。不过 Windows 系统上也有其他选择，比如Speechify、JAWS和NVDA。

花时间熟悉屏幕阅读器将为您提供有关用户体验的宝贵见解。

展示屏幕阅读器在 dev.to 中的样子

最常用的键

  • Tab 和 Shift+Tab：这些键允许用户在网页上的交互元素（例如链接、表单字段和按钮）中前进和后退。
  • 箭头键：箭头键用于在文本块内导航或在不同组件（例如标题、段落和列表）之间移动。用户可以上下左右移动以详细浏览内容。
  • 节点：通过节点导航，您可以探索并与每个元素进行互动，例如从拼图的一块移动到另一块。在 Voiceover 中，您可以按 进行导航Control + Option + Arrow key。
  • Enter 键或空格键：这些键用于激活按钮、链接或表单控件。当用户停留在交互元素上时，可以按Enter 键或空格键来触发相关操作或访问链接。
  • 标题：许多屏幕阅读器提供快捷键在标题之间跳转。例如，按“H”键可让用户导航到下一个标题，从而更轻松地浏览网页结构。
  • 搜索：屏幕阅读器通常提供搜索功能，使用户能够在网页上查找特定的单词或短语。通过输入关键词，用户可以快速找到相关信息，而无需浏览整个页面。此外，Voiceover 中还有一个非常有用的组合，可以显示所有标题、链接和表单控件，即Control + Shift + U。

所有提到的屏幕阅读器的图标

2 - 掌握 ARIA 的相关知识

在第二个技巧中，我认为有必要解释一下 ARIA 的含义。ARIA 的全称是“无障碍富互联网应用”（Accessible Rich Internet Applications）。它指的是一套旨在提升网站对残障人士友好度的指南和工具。

ARIA 有助于为网页元素（例如按钮或链接）提供更多信息，以便屏幕阅读器和其他辅助技术能够更好地理解它们。这就像向那些看不见或无法使用鼠标的人发出呼吁，让他们能够顺畅地浏览和与网站互动。

最常见的 ARIA 属性

这些是我们在为网站实现双A无障碍功能过程中主要使用的ARIA属性。还有更多可用的属性，但至少熟悉以下这些至关重要：

  • aria-hidden：通过设置aria-hidden="true"，我们向辅助技术指示图标应在辅助功能树中隐藏。它适用于非交互式元素。
<button class="icon-button">
  <span class="visually-hidden" aria-hidden="true">Close</span>
  <i class="fas fa-times"></i>
</button>
Enter fullscreen mode Exit fullscreen mode
  • aria-label：当没有可见标签时，为元素提供文本替代。
<button class="icon-button" aria-label="Search">
  <i class="fas fa-search"></i>
</button>
Enter fullscreen mode Exit fullscreen mode
  • aria-labelledby：将一个元素与作为其标签的另一个元素关联起来。
<div id="alert-message" role="alert" aria-labelledby="alert-heading alert-description">
  <h3 id="alert-heading">Important Info!</h3>
  <p id="alert-description">Please be aware of the upcoming changes.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

该属性的值对应于为警报消息提供标签和描述的标题和段落元素"alert-heading alert-description,"的 ID 。(<h3>)(<p>)

通过使用aria-labelledby，您可以在元素与带标签的标题和描述之间建立关联<div>。屏幕阅读器将读取这些元素内的全部文本。

  • aria-scribeby：将一个元素与描述其用途的另一个元素关联起来。
<label for="username">Username:</label>
<input type="text" id="username" aria-describedby="username-description">
<p id="username-description">Please enter a unique username consisting of letters and numbers.</p>
Enter fullscreen mode Exit fullscreen mode

一种常见的情况是在输入用户名、电子邮件和密码等时提供额外信息，用户必须使用一组特定的字符。

  • aria-expanded：指示可折叠元素当前是展开还是折叠。
<button id="toggle-button" aria-expanded="false" onclick="toggleContent()">
  Toggle Content
</button>
Enter fullscreen mode Exit fullscreen mode

通过根据内容的状态动态更新aria-expanded属性，屏幕阅读可以向用户宣布当前状态。

<button aria-disabled="true">Submit</button>
Enter fullscreen mode Exit fullscreen mode
  • aria-live：表示元素内的内容应动态地向屏幕阅读器显示。我们经常使用它来通知用户表单错误。
<div aria-live="polite" id="status-message">
  New message received: You have 1 unread notification.
</div>
Enter fullscreen mode Exit fullscreen mode

带有显示错误的警告的表单

  • 角色：用于定义网页上元素的用途或类型。

role 属性可应用于各种 HTML 元素，例如<div>、<span>、<button>、<nav>等等。一些常见的 role 值包括“按钮”、“链接”、“导航”、“标题”、“列表”、“表单”和“横幅”等。每个 role 值都向辅助技术传达特定的含义和功能。

<div role="alert" aria-live="assertive">
  <p>This is an important alert message!</p>
</div>
Enter fullscreen mode Exit fullscreen mode

如果需要创建具有特定角色的组件，可以参考W3C的模式网站。

3 - 使用语义HTML

语义化 HTML 就像使用特殊标签来赋予网页内容意义和结构。与其简单地随意添加旧标签，不如使用<header>、<nav>、<article>和 等标签<footer>来展现页面不同部分的结构和用途。

例如，<div>您可以将标签用作网站导航菜单，而不是使用<nav>。这会告诉用户、搜索引擎和屏幕阅读器，其中的内容代表网站的导航。

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

HTML 标签语义用法的示例

这些都是您必须使用
适当标签的重要情况。

  • <header>：代表页面的介绍部分或顶部部分。
<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <!-- Navigation menu -->
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode
  • <main>：代表文档的主要内容。
<main>
  <h2>About Me</h2>
  <p>I'm passionate about web development, ...</p>
</main>
Enter fullscreen mode Exit fullscreen mode
  • <article>：代表一个独立的作品，例如博客文章、新闻文章或论坛帖子。
<article>
  <h3>Post title</h3>
  <p>Recently, I went on an amazing trip...</p>
</article>
Enter fullscreen mode Exit fullscreen mode
  • <section>：代表文档内的独立部分。
<section>
  <h2>Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Front-end Development</li>
  </ul>
</section>
Enter fullscreen mode Exit fullscreen mode
  • <footer>：代表文档或章节的底部。
<footer>
  <p>&copy; 2023 MyWebsite. All rights reserved.</p>
  <nav>
    <!-- Footer navigation goes here -->
  </nav>
</footer>
Enter fullscreen mode Exit fullscreen mode
  • <fieldset>：用于将联系信息字段分组在一起。
<form>
  <fieldset>
    <legend>Contact Information</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </fieldset>

  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

语义 HTML 的主要优点

语义化的 HTML 元素有助于形成逻辑清晰、条理清晰的 Tab 键顺序。纯键盘用户非常依赖 Tab 键来浏览网页上的交互元素。

通过使用适当的语义元素（如<button>、<a>和表单元素）并加上适当的标签，您可以确保键盘用户可以有效地浏览和与您的网站互动。

不带语义 HTML

<section>
  <h2>Welcome!</h2>
  <p>Some paragraph</p>

  <div class="button-container">
    <div class="button">Register</div>
  </div>

  <p>Or, if you have any questions, feel free to <span class="link"><a href="/contact">contact us</a></span>.</p>
</section>
Enter fullscreen mode Exit fullscreen mode

使用语义 HTML

<section>
  <h2>Welcome!</h2>
  <p>Some paragraph</p>

  <button>Register</button>

  <p>Or, if you have any questions, feel free to <a href="/contact">contact us</a>.</p>
</section>
Enter fullscreen mode Exit fullscreen mode

对于无法使用鼠标的行动障碍人士来说，这种考虑至关重要。

所以，继续吧，拥抱语义 HTML并享受旅程！

两种形式，左边仅使用 div，右边使用适当的标签

基本概念

4 - 使用 tabindex，但要谨慎

Tabindex 是一个可以添加到 HTML 元素的属性，用于控制其键盘导航顺序。它允许您确定当用户使用Tab键浏览网页时，哪些元素会获得焦点。

通过设置tabindex值，您可以自定义顺序并使您的网站更易于所有用户访问，尤其是那些依靠键盘进行导航的用户。

四个按钮显示了 Tab 键顺序如何工作，因为第二个按钮具有焦点

tabindex 的最佳实践

仅在必要时修改 tabindex 值。大多数交互元素会按照默认 Tab 顺序自动获得焦点，因此仅在能够提升整体用户体验时才进行干预。

  • 可能的值：建议的两个可能值是“0”和“-1”。

如果tabindex="0"使用 使元素可聚焦，则该元素的键盘交互必须正确且直观。这意味着，例如，以按钮形式呈现的元素必须同时响应 Enter 键和空格键的按下。

通过将这些元素的 tabindex 值设置为 0，可以确保它们能够接收键盘焦点，并可使用 Tab 键轻松访问。这就像为键盘用户打开了一扇大门，让他们能够与这些通常不可点击的元素进行交互。

当您设置时tabindex="-1"，它会将元素从常规导航流中取出。

但是，需要注意的是，您不应该将值“-1”分配给需要通过键盘访问的元素，例如视力正常的用户可以轻松用鼠标点击的链接或按钮。

一般来说，除非有特殊原因，否则建议避免使用 tabindex="-1" 。

  • 保持逻辑流畅：按符合逻辑的顺序排列 tabindex 值，以反映内容的视觉和阅读流程。用户应该能够自然地浏览您的网站，而不会遇到意外跳转或跳过重要元素。

  • 跳过非交互元素：避免将 tabindex 分配给非交互元素，例如文本段落或图像。这有助于用户专注于需要操作或输入的交互元素。

5 - 创建适当的轮廓

轮廓就像视觉拥抱，当您与按钮、链接和表单字段等交互元素交互时，它会包围它们。

.focus-outline {
   outline: 2px solid blue;
   outline-offset: 2px;
}
Enter fullscreen mode Exit fullscreen mode

它们提供清晰的视觉指示（通常是边框或高亮），以显示当前焦点所在的元素。无论您使用键盘还是鼠标，这些轮廓都能确保您轻松识别网页上的相应元素并进行交互。

轮廓表示

大纲的最佳实践

  1. 可见性：轮廓应清晰可见，确保其与周围内容区分开来。务必选择对比度充足的颜色和样式，并避免可能造成混淆或分散用户对主要内容注意力的设计。

  2. 避免移除轮廓：除非您已使用合适且易于访问的替代方案替换轮廓，否则切勿移除或禁用轮廓。彻底移除轮廓可能会使用户感到迷惑和困惑，尤其是那些依赖键盘导航的用户。遗憾的是，一些开发者偶尔会选择移除轮廓。但是，强烈建议不要这样做。

  3. 设计一致性：在整个网站上寻求一致的轮廓样式。这有助于用户熟悉视觉提示，从而获得流畅直观的浏览体验。

如果您是设计师，请阅读本系列的第二部分。

6 - 允许在整个网站内进行键盘导航

键盘导航是网络可访问性最重要的部分之一。

使用盲文键盘的人

首先，你必须知道它与语义HTML和原生元素密切相关。当你将这两者结合起来时，就会发生一些令人惊奇的事情——用户只需使用键盘就能轻松浏览网站的大部分内容，而无需任何特殊的调整或技巧。

因此，我们在创建新组件和开发新功能时遵循的原则之一是尽可能使用原生元素。

我将使用对话框元素来举例。您无需创建自己的模态框，而应该使用原生组件，因为它实现了所有必要的功能，例如退出、陷阱焦点、关闭按钮等。

<dialog open>
  <p>This is a simple dialog!</p>
  <form method="dialog">
    <button>nice! ok!</button>
  </form>
</dialog>
Enter fullscreen mode Exit fullscreen mode

最后一条建议是接受#nomouse 挑战！尝试使用键盘上的 Tab 键浏览网页并控制所有功能；不要触摸鼠标。这个简单的测试通常可以很好地反映网页的可访问性。更多信息，请访问nomouse.org。

7 - 识别语言

您需要提供有关网页所基于的语言以及使用不同语言的特定段落或组件的上下文。

属性lang​

在 HTML 标签中设置此lang属性可以声明网页的语言。这有助于屏幕阅读器和其他辅助技术正确识别和呈现内容。

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

请记住，如果有一个段落使用不同的语言，则必须像这样指定其语言：

<body>
  <!-- English (US) content -->
  <p lang="en-US">Explore and enjoy our diverse content.</p>

  <!-- Hindi content -->
  <p lang="hi">हमारी विविधतापूर्ण सामग्री का अन्वेषण और आनंद लें।</p>
</body>
Enter fullscreen mode Exit fullscreen mode

无论如何，还是有一些例外，例如引号、专有术语、技术术语、外来词（例如“寿司”）或语言选择器：

亚马逊网站上显示不同语言的语言选择器

8 - 确保 ARIA 属性使用正确的语言

如果您的网页主要以英文呈现，则务必确保 aria 属性也是英文的。

但是，如果用户切换到其他语言，aria 属性也应相应更改。建议尽量避免混合使用多种语言，以保持整个用户体验的一致性和清晰度。

9 - 文本必须可调整大小

为了使您的网站更加用户友好且易于访问，确保文本可调整大小至关重要。

理想情况下，用户应该能够将字体大小增加多达 200%，而不会切断任何内容或丢失任何功能。

一般来说，您应该使用字体大小的em单位。

div.a {
  font-size: 14px; // :(
}

div.b {
  font-size: 1rem; // :)
}

div.c {
  font-size: 1.2em; // :)
}
Enter fullscreen mode Exit fullscreen mode

通过使用诸如em和之类的可扩展单位rem，我们使用户能够控制站点的规模，从而为我们提供所需的可访问性。

如果您正在考虑使用rem，请记住，准确地放大和缩小对于所有文本元素的正确调整来说可能是一个挑战。

但一定要避免px在字体大小上使用单位。它们根本无法缩放。

10 - 按正确顺序使用标题

在构建内容时，使用具有逻辑层次结构的标题至关重要。

<h1>以页面标题或主要部分的主标题（通常）开始，然后是<h2>主要子部分的副标题（），依此类推。

这种层次结构有助于用户了解内容的组织，并允许屏幕阅读器更有效地浏览页面。

<h1>Best practices for Web Accessibility!</h1>
<h2>Basic concepts</h2>
<h3>Headings</h3>
<h4>Best practices for headings</h4>
....
<h2>Advanced concepts</h2>
<h3>Creating an accessible component library</h3>
Enter fullscreen mode Exit fullscreen mode

务必遵循一致的标题顺序，不要跳过任何级别。例如，不要直接从 跳到<h2>。<h4>跳过级别可能会使屏幕阅读器感到困惑，并使用户更难理解内容的结构。

作为本节的最后一条提示，我建议您将重要的交互元素放在网页的更高位置。

不同的标题都有正确的顺序

基础组件中的可访问性

11 - 使图像可访问

让我们探索易于实施的技术来优化您的图像以实现网络可访问性。

  • 提供描述性替代文本：确保使用简洁的描述性语言来描述图像的内容和目的。
<img src="example.jpg" alt="A group of friends enjoying a picnic in the park">
Enter fullscreen mode Exit fullscreen mode
  • 装饰性 alt 文本：在某些情况下，您可能会添加一些装饰性图片，但它们不会为您的内容添加任何重要信息。对于此类图片，最好提供空的 alt 文本或使用 aria-hidden属性，以便屏幕阅读器跳过它们。
<img src="decoration.jpg" alt="" aria-hidden="true">
Enter fullscreen mode Exit fullscreen mode
  • 提供标题和图像描述：对于复杂的图像、图表或信息图，通过标题或详细的图像描述提供额外的背景信息会很有帮助。
<figure>
  <img src="infographic.jpg" alt="Data visualization of population growth">
  <figcaption>Data visualization of population growth in the last decade</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

  • 文件格式：常规图片请使用广泛支持的格式，例如 JPEG、PNG 或 GIF。如果您有复杂的图形或带有透明度的图片，请考虑使用 SVG。这些格式可确保与各种浏览器和辅助技术兼容。

  • 实现响应式图像：使用srcset属性提供多个不同大小的图像源。

<img srcset="small.jpg 320w,
              medium.jpg 768w,
              large.jpg 1200w"
     sizes="(max-width: 768px) 100vw,
            50vw"
     src="large.jpg" alt="A responsive image">
Enter fullscreen mode Exit fullscreen mode

决策图内的上述摘要

12 - 为每个人创建图标

不要仅仅将图标用作装饰元素，而要考虑实现语义 HTML 元素（如<span>或）<i>并提供适当的文本替代。

<span class="icon" aria-hidden="true">📞</span>
<span class="sr-only">Phone</span>
Enter fullscreen mode Exit fullscreen mode

此外，为了提高可访问性，我们强烈推荐使用图标字体和 SVG 。它们允许在不损失质量的情况下调整图标大小，并确保在各种设备和浏览器上的兼容性。

对于复杂的 SVG，请考虑使用title和desc元素以及aria-labelledby如下内容：

<svg 
   role="img"
   aria-labelledby="svg-title svg-description"
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px"
   y="0px"
   viewBox="0 0 48 48"
   xml:space="preserve">
      <title id="svg-title">A short title to resume the purpose of the svg!</title>
      <desc id="svg-description">A description with more details.</desc>
      <path d="..."/>
</svg>
Enter fullscreen mode Exit fullscreen mode

13 - 不要忘记按钮的状态

按钮是网页设计的基本元素，提供交互功能并作为重要的号召性用语组件。

除了使用语义 html 标签<button>并提供“发送消息”等描述性文本之外，您还应该使用:focus和:hover状态提供视觉反馈。

<button class="primary-button">Save Changes</button>
Enter fullscreen mode Exit fullscreen mode 
.primary-button:hover {
  background-color: #42b983;
  color: white;
}

.primary-button:focus {
  background-color: #342455;
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

还有禁用状态，需要您aria-disabled在可聚焦的情况下使用：

<button aria-disabled="true">
  Continue
</button>
Enter fullscreen mode Exit fullscreen mode

如果按钮完全禁用，则：

<button disabled>
  Continue
</button>
Enter fullscreen mode Exit fullscreen mode

对于切换按钮，您应该使用aria-pressed="true/false"属性，对于菜单，您可以使用aria-expanded="true/false"。

3 个按钮示例，其中两个带有图标

14 - 创建描述性链接

有时，决定使用按钮还是链接可能很困难。我们的决策原则是，如果用户被重定向到另一个页面或位置，则应该使用链接。

即使链接看起来像一个闪亮的大按钮，<a>在编码时使用该元素也是至关重要的。

记住，这是我们在本系列第二部分中介绍过的设计技巧。务必避免使用“点击此处”或“阅读更多”之类的通用链接标签。

注意：链接不应仅由 URL 组成，除非用于打印目的，例如 Word 文档。此外，如果链接在新窗口中打开，请务必向用户说明。

示例：关于 Web 可访问性的文章（在新标签页中打开）

谷歌中 w3c 链接的示例

15 - 确保表格易于访问

在这里，我们遇到了网络可访问性最具挑战性的方面之一。

表单可以由多种组件组成，例如组合框、数字或日期等各种类型的输入、文本区域等等。

确保每个表单组件的可访问性至关重要，但详细讨论每个组件就太疯狂了。因此，我将为您提供一些更通用但同样重要的提示：

  • 语义 HTML（是的，再次）：在构建表单时，使用语义 HTML 元素（如<form>、、<fieldset>和）<legend>来提供清晰、有条理的结构。
<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode

这使得屏幕阅读器能够提供有关用户必须填写的字段的上下文。

  • 使用标签：确保每个表单字段都关联一个描述性标签。使用标签<label>元素，并通过“for”属性或将输入元素嵌套在标签中，将其与相应的表单字段关联。
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Enter fullscreen mode Exit fullscreen mode
  • 清晰的说明：提供清晰简洁的说明，引导用户完成表单填写流程。将说明放置在相关表单字段附近，并使用附加文本或元素（例如<p>或<span>）。
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<p class="instructions">Please enter a valid email address.</p>
Enter fullscreen mode Exit fullscreen mode
  • 提供错误验证和反馈：使用 ARIA 属性将错误消息与各自的表单字段关联起来，并使用视觉上不同的样式或警告框通知用户错误，同时保持颜色对比度以提高可读性。

以下是一个例子，但由于这是一个复杂的话题，我推荐你阅读Sandrina关于无障碍表单验证的文章。简直太棒了！

<input
  id="address"
  type="text"
  required="required"
  aria-invalid="true"
  aria-describedby="addressError addressHint"
/>
<span>
  <p id="addressError">Address cannot be empty.</p>
  <p id="addressHint">Remember to include the door and apartment.</p>
</span>
Enter fullscreen mode Exit fullscreen mode

16 - 为视频添加字幕

这不像表格那么常见，但另一方面，它通常更容易被访问。

首先，您需要提供标题：

<video>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" label="English" srclang="en" default>
</video>
Enter fullscreen mode Exit fullscreen mode

其次，始终为键盘用户提供可用的控件：

<video controls tabindex="0">
  <source src="video.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

其他一些提示如下：

  • 避免使用可能引发癫痫的闪光或闪烁内容。

  • 避免使用可能造成干扰的自动播放媒体或动画。

  • 从字幕到图形元素，色彩在视频中都扮演着重要的角色。确保文本和背景之间的颜色对比度正确。

  • 选择可访问的视频媒体播放器

17 - 提供音频内容的文字记录或音频描述

在这种情况下，我们可以提供如下记录：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<p><a href="audio-transcript.txt">Read the audio transcript</a></p>
Enter fullscreen mode Exit fullscreen mode

验证音频内容、文字记录、字幕和音频描述是否被正确解释。

注意：音频描述应提供视频中发生的视觉元素和动作的详细而简洁的叙述。

聋人

18 - 使用标题并使 iframe 响应

iframe 是一款功能强大的工具，能够将外部内容无缝嵌入到您的网站。然而，为了增强其可访问性，我们仍需要进行一些改进。

使用描述性标题

使用 iframe 时，提供描述性标题来传达嵌入页面的目的和内容。

<iframe src="external-page.html" title="Weather Forecast"></iframe>
Enter fullscreen mode Exit fullscreen mode

让他们积极响应

确保 iframe 具有响应能力并能很好地适应不同的屏幕尺寸和分辨率。

<div class="wrapper">
  <iframe src='some url' frameborder="0" allowfullscreen></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode 
.wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

提供后备选项

在某些情况下，某些用户或设备可能不支持或无法访问 iframe。为了确保所有用户都能访问必要的信息，请提供后备选项。

<iframe src="external-page.html">
  <img src="fallback-image.jpg" alt="Fallback Image: Content Not Available">
  <p>If you are unable to view the content, please try accessing it directly using the <a href="external-page.html">fallback link</a>.</p>
</iframe>
Enter fullscreen mode Exit fullscreen mode

其他改进

19 - 使下载内容更具描述性

让我简单谈谈这个话题，因为我们偶尔会遇到一些可能让用户感到困惑的棘手情况。

这个提示基本上是使用描述性链接文本，提供文件扩展名和文件大小（如果可能）。

<a href="document.pdf">Download the User Manual (PDF, 2.5MB)</a>
Enter fullscreen mode Exit fullscreen mode

20 - 创建链接以绕过阻止

绕过阻止对于网页可访问性至关重要。它们允许用户跳过重复或不必要的内容，直接导航到网页的主要内容。

一个例子：

<a href="#main-content" class="skip-link">Skip to Main Content</a>
Enter fullscreen mode Exit fullscreen mode 
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
}

.skip-link:not(:focus):not(:active) {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.skip-link:focus {
  top: 5px;
  left: 5px;
  background-color: #0066cc;
}
Enter fullscreen mode Exit fullscreen mode

跳过链接已定位fixed并初始可见。但是，我使用了选择器，因此对于鼠标用户来说，:not(:focus):not(:active)它是隐藏的。(position: absolute; top: -9999px; left: -9999px;)

它仅在获得焦点或处于活动状态时才可见，并遵循选择器中定义的样式:focus。

这样，鼠标用户就可以访问和隐藏跳过链接，而键盘用户则可以看到并可以使用跳过链接。

您可以在 dev.to 上亲自测试一下 :)

dev.to 内的“跳至内容”按钮

最后的话

好了！我们已经涵盖了我认为的 20 个 Web 无障碍设计必备技巧。特别感谢@pablo_medina和@juanpabloamador的反馈！

本系列的下一篇文章将探讨“我们团队面临的常见无障碍挑战”。敬请期待！

请记住，让您的网站易于访问不仅是一种好的做法，而且是正确的做法。

两只手伸出来互相帮助

这篇文章可能很长，但我希望你能从中学到一些新东西。如果你觉得这篇文章能帮助到其他人，请点赞，让更多人看到。❤️

如果您有任何想法或疑问，请随时发表评论！

文章来源：https://dev.to/this-is-learning/top-20-must-know-tips-for-web-accessibility-452
Devto 翻译
PREV
理解过渡 JavaScript 应用
NEXT
使用 Visual Studio Code Dev Containers 整理你的机器