无障碍功能

为确保您的网站可供尽可能多的用户访问，让网页适应不同屏幕尺寸只是其中一种方式。下面列出了一些您应该注意的其他因素。

色觉缺陷

不同的人感知颜色的方式不尽相同。红色盲的人不会将红色视为一种独特的颜色。绿色盲代表绿色盲。对于蓝色盲的人，蓝色为蓝色。

一些工具可以让你大致了解你的配色方案如何呈现给具有不同色觉的用户。

Firefox 的“无障碍”标签页包含一个标有模拟的下拉菜单和一列选项。

查看包含不同色觉视觉模拟的网站。

在 Chrome 开发者工具中，您可以通过“渲染”标签页模拟视觉缺陷。

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

在 Mac 上，转到：

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

选择其中一个选项。

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

错误做法

a {
  color: red;
}

正确做法

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

色彩对比度

某些颜色组合可能会导致问题。如果前景色和背景色之间的反差不够大，文本就会难以阅读。色彩对比度低是网络上最常见的无障碍功能问题之一，但幸运的是，您可以在设计过程的早期发现该问题。

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

• tota11y 是一个可添加到浏览器工具栏中的小书签。
• 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。您可以使用这些信息来调整网站的调色板。

浏览器支持

• 96
• 96
• 101
• 14.1

来源

注意 ：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。 SS 过渡或动画的任何位置包含它。

浏览器支持

• 74
• 79
• 63
• 10.1

来源

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 元素：轮播界面、标签页、手风琴等。这些广告素材需要结合使用 HTML、CSS、JavaScript 和 ARIA 从头开始构建。

ARIA 的全称是“Accessible Rich Internet Application”（可访问的富互联网应用）。借助其词汇，您可以在没有合适的 HTML 元素可用时提供语义信息。

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

使用 JavaScript 添加的定制化功能越多，您就越需要了解 ARIA。如果您坚持使用原生 HTML 元素，则可能不需要任何 ARIA。

如果可以的话，请通过屏幕阅读器的真实用户进行测试。这不仅能让您更好地了解用户浏览网页的方式，还能在设计无障碍功能时避免凭空猜测。

让真人进行测试是揭示您可能做出的任何假设的绝佳方式。在下一单元中，您将了解用户与网站互动的不同方式，在这一方面，人们也很容易做出假设。

检查您的掌握程度

测试您对无障碍功能知识的掌握情况

借助 CSS，开发者可以覆盖字体大小等用户偏好设置，最坏的情况是：

True

只需使用 body { font-size: 12px; } 就足够了。

False

用户偏好有较大影响，但无法完全控制。

为避免覆盖用户的字体大小偏好设置，可以使用?

绝对单位，例如 px。

使用这些功能时，不会考虑用户的字体大小偏好设置。

相对单位，例如 rem。

这些库允许开发者使用包含用户字体大小偏好的长度构建内容。

世界上每个人都会使用鼠标。

True

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

False

有许多常用鼠标的替代方案。

alt 属性为空的图片有什么作用？

浏览器会自动为用户添加这些网址。

不是任何浏览器所具有的功能。

图片仅作展示之用。

系统假定图片对于消耗内容并不重要。

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

不会发生上述情况。

Nothing

肯定会发生的事情。