无障碍

让网页能够适应不同的屏幕尺寸只是确保尽可能多的用户可以访问您的网站的一种方式。请考虑以下其他需要注意的因素。

色觉缺陷

不同的人对色彩的感知不同。红色盲患者无法将红色视为一种独特的颜色。对于绿色盲患者，绿色是缺失的。对于蓝色盲人士，它是蓝色。

有些工具可以大致显示您的配色方案在不同色觉的人眼中是什么样的。

Firefox 的“无障碍”标签页包含一个名为模拟的下拉菜单，其中列出了各种选项。

查看网站，其中包含不同类型色觉的模拟效果。

在 Chrome 开发者工具中，“渲染”标签页可让您模拟视力障碍。

这些是特定于浏览器的工具。还可以在操作系统级别模拟不同的视觉类型。

在 Mac 上，依次前往：

1. 系统偏好设置
2. 无障碍
3. 显示
4. 颜色滤镜
5. 启用颜色滤镜

选择其中一个选项。

一般来说，仅依靠颜色来区分不同元素并不是一个好主意。例如，您可以（也应该）将链接的颜色设置为与周围文本不同的颜色。不过，您还应应用一些其他样式指示器，例如为链接添加下划线或将链接设为粗体。

错误做法

a {
  color: red;
}

正确做法

a {
  color: red;
  font-weight: bold;
}

色彩对比度

某些颜色组合可能会导致问题。如果前景色和背景色之间的对比度不够高，文字就会难以阅读。色彩对比度不佳是 Web 上最常见的无障碍功能问题之一，但幸运的是，您可以在设计流程的早期发现并解决此问题。

您可以使用以下工具来测试文字和背景颜色的对比度：

• VisBug 是一款浏览器扩展程序，适用于所有主流桌面浏览器。
• Firefox 的无障碍功能检查器可以检查视觉对比度方面的问题。
• 您还可以使用 Chrome 开发者工具发现并修复低对比度文本。
• 在 Microsoft Edge 浏览器中，您可以使用颜色选择器测试文字颜色对比度。

建议您始终在 CSS 中同时声明 color 和 background-color。请勿假定背景颜色将为浏览器默认颜色。用户可以更改浏览器使用的颜色，并且确实会这样做。

错误做法

body {
  color: black;
}

正确做法

body {
  color: black;
  background-color: white;
}

高对比度

有些人会将操作系统设置为使用高对比度模式。您可以在操作系统上尝试此操作。

在 Mac 上，依次前往：

1. 系统偏好设置
2. 无障碍
3. 显示

选择用于提高对比度的选项。

有一种媒体功能可以检测用户是否已启用高对比度模式。可以查询 prefers-contrast 媒体功能的三个值：no-preference、less 和 more。您可以根据这些信息调整网站的调色板。

Browser Support

• 96
• 96
• 101
• 14.1

Source

注意 ：CSS 自定义属性是分组颜色声明的好方法。使用 prefers-contrast 媒体功能更新自定义属性值。

用户还可以在操作系统中设置使用反转颜色。

在 Mac 上，依次前往：

1. 系统偏好设置
2. 无障碍
3. 显示

选择用于反转颜色的选项。

确保您的网站对于使用反色浏览的用户而言仍然有意义。注意盒子阴影 - 颜色反转时可能需要调整。

字号

颜色并不是用户可以在浏览器中调整的唯一内容，他们还可以调整默认字号。随着视力下降，他们可能会调整浏览器或操作系统中的默认字体大小，随着年龄的增长，字体大小也会随之增大。

您可以使用相对字体大小来响应这些设置。避免使用 px 等单位。请改用 rem 或 ch 等相对单位。

尝试更改浏览器中的默认文字大小设置。您可以在浏览器偏好设置中完成此操作。或者，您也可以在访问网页时通过放大来完成此操作。如果默认字号增大 200%，您的网站是否仍能正常运行？400% 怎么样？

如果用户在桌面设备上访问您的网站时将字体大小调高到 400%，那么他们看到的布局应与在小屏幕设备上访问您网站的用户看到的布局相同。

在桌面设备和移动设备上查看的同一网站。桌面版浏览器的字体大小已增大到 400%。

键盘导航

并非所有人都会使用鼠标或触控板来浏览网页。键盘是浏览网页的另一种方式，其中 tab 键特别有用。用户可以快速从一个链接或表单字段移到下一个链接或表单字段。

使用 :hover 和 :focus 伪类设置样式的链接将显示这些样式，无论用户使用的是鼠标、触控板还是键盘。使用 :focus-visible 伪类仅为键盘导航设置链接样式。您可以让这些样式更加显眼。

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

当用户从一个链接或表单字段切换到另一个链接或表单字段时，这些元素将按其在文档结构中的显示顺序获得焦点。此顺序还应与视觉顺序一致。

请谨慎使用 CSS order 属性。您可以将此属性与 flexbox 和网格结合使用，以使元素的视觉顺序与 HTML 中的顺序不同。这是一项强大的功能，但可能会让使用键盘浏览网页的用户感到困惑。

使用键盘上的 tab 键测试网页，确保 Tab 键顺序合理。

在 Firefox 浏览器开发者工具的无障碍面板中，有一个用于显示 Tab 键顺序的选项。启用此功能后，系统会在每个可聚焦的元素上叠加显示数字。

注意 ：详细了解内容重新排序导致的问题。

减少动画效果

动画和动态效果是让网页设计栩栩如生的绝佳方式。但对于某些人来说，这些运动可能会让他们感到非常迷失方向，甚至引起恶心。

有一个功能查询可以传达用户是否偏好减少动态效果。它被称为 prefers-reduced-motion。在您使用 CSS 过渡或动画的任何位置添加此属性。

Browser Support

• 74
• 79
• 63
• 10.1

Source

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion 媒体查询专门用于屏幕上的移动。如果您在元素的颜色上使用过渡效果，而该颜色不应受到 prefers-reduced-motion 的影响。也可以过渡不透明度和交叉淡入淡出。减少动画效果并不意味着完全没有动画。

语音

用户浏览网页的方式各不相同。并非所有人都通过屏幕访问您的网站。屏幕阅读器等辅助技术会将输出到屏幕上的信息转换为语音。

屏幕阅读器可与各种应用（包括网络浏览器）搭配使用。为了让网络浏览器能够与屏幕阅读器进行有用的通信，所访问的网页中需要包含有用的语义信息。

之前，您学习了仅包含图标的按钮需要包含一个属性，以向视障用户说明按钮的用途。这只是一个示例，说明了扎实的 HTML 基础知识有多么重要。

标题

合理使用 <h1>、<h2>、<h3> 等标题。屏幕阅读器会使用这些标题生成文档的大纲，您可以使用键盘快捷键浏览该大纲。

错误做法

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

正确做法

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

结构

使用 <main>、<nav>、<aside>、<header> 和 <footer> 等地标元素来构建网页内容。然后，屏幕阅读器用户可以直接跳转到这些地标。

错误做法

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

正确做法

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

表单

确保每个表单字段都有关联的 <label> 元素。您可以使用 <label> 元素上的 for 属性和表单字段上对应的 id 属性将标签与表单字段相关联。

错误做法

<span class="formlabel">Your name</span>
<input type="text">

正确做法

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

注意： 如需详细了解无障碍功能和表单，请参阅“学习表单”课程中的“无障碍功能”模块。

图片

请务必使用 alt 属性提供图片的文字说明。

错误做法

<img src="dog.jpg">

正确做法

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

如果图片仅用于展示，您仍应添加 alt 属性，但可以为其指定空值。

错误做法

<img src="texture.png">

正确做法

<img src="texture.png" alt="">

Jake Archibald 发表了一篇关于撰写优质 alt 文字的文章。

链接

尝试在链接中提供描述性文字。避免使用“点击此处”或“更多”等短语。

错误做法

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

正确做法

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

使用合理的语义 HTML 可让您的网页更方便地供屏幕阅读器等辅助技术以及语音助理等其他音频输出设备使用。

一些没有相应 HTML 元素的界面 widget，包括轮播界面、标签页和手风琴界面。这些元素需要使用 HTML、CSS、JavaScript 和 ARIA 组合从头开始构建。

ARIA 是 Accessible Rich Internet Applications（具有无障碍功能的丰富互联网应用）的缩写。借助其词汇，您可以在没有合适的 HTML 元素时提供语义信息。

如果您需要创建尚未作为 HTML 元素提供的界面元素，请熟悉 ARIA。

您使用 JavaScript 添加的自定义功能越多，就越需要了解 ARIA。如果您坚持使用标准 HTML 元素，可能不需要任何 ARIA。

如果可以，请让屏幕阅读器的真实用户参与测试。这不仅能让您更好地了解他们浏览网页的方式，还能让您在设计时无需猜测如何才能兼顾无障碍功能。

与真实用户进行测试是揭示您可能做出的任何假设的好方法。在下一个模块中，您将了解用户与网站互动的方式，这是另一个很容易做出假设的领域。

检查掌握情况

测试您的无障碍功能知识

使用 CSS，开发者可以覆盖用户偏好设置（例如字体大小），这是否会带来负面影响？

True

只需使用 body { font-size: 12px; } 即可。

错误

用户偏好设置具有很大影响，但无法提供完全控制权。

为避免覆盖用户的字体大小偏好设置，请使用？

绝对单位，例如 px。

使用这些单位时，系统不会考虑用户的字体大小偏好设置。

相对单位，例如 rem。

这样，开发者就可以构建包含用户字体大小偏好的长度。

全世界的人都在使用鼠标。

True

有些用户会使用语音、键盘、游戏手柄、屏幕阅读器或其他方式进行互动。

错误

除了常用的鼠标之外，还有许多替代方案。

具有空 alt 属性的图片会执行什么操作？

浏览器会自动为用户添加这些信息。

任何浏览器都不具备此功能。

图片被视为展示性图片。

系统会假定图片对内容消费并不重要。

向屏幕阅读器读出“空字符串”

事实并非如此。

Nothing

肯定会发生一些事情。