让我们面对现实：构建 AA 或 AAA 可访问的产品可能非常令人生畏。幸运的是，拥有可访问的产品并非非此即彼。即使看似很小的改进也会为许多人带来良好的生活质量效益。
本着这种精神，这里有五个您可以今天实施的无障碍快速胜利。
快速胜利 1：指示当前页面
可以肯定地说，不同的样式是最常见的用于传达网站或应用程序当前页面的方法。但是，即使这些样式清晰且具有出色的对比度，它们仍然只是视觉提示。
那么，如果视力受限的人无法看到这种分离，会发生什么？他们将如何知道自己身处哪个页面？
创建可访问的产品是为了确保其标记与设计一样清晰地传达信息。
将aria-current="page"添加到活动导航元素是确保标记和设计在使用或不使用辅助技术的情况下传达相同信息的其中一种方法。
<a aria-current="page" href="/">Home</a>🎉 附加内容
使用 CSS 属性选择器来设置aria-current="page"元素的样式，以保持视觉和标记提示之间的链接。
[aria-current="page"] {
/* Active element styles */
}快速胜利 2：文档语言
虽然有些人可以访问网站并确定其内容的语言或区域设置，但并非所有用户都能做到这一点。同样，标记必须传达与视觉设计相同的信息——即使这些信息可能看起来是暗示的。
将lang属性添加到<html>标记中，不仅可以传达文档的语言，还可以传达其区域设置。这将有助于屏幕阅读器等辅助技术理解和传达内容。即使应用程序只支持一种语言，这也可能对许多人来说是一项不错的提高生活质量的改进。
<html lang="en-US">对于支持多种语言的应用程序，<html>元素可能不是唯一需要定义其lang值的元素。将lang属性用于语言与文档其余部分不同的特定元素，例如语言切换菜单中的链接。在这种情况下，将lang的使用与hreflang属性配对，不仅可以传达链接本身的语言，还可以传达其目标的语言。
<a lang="fi" hreflang="fi" href="/" title="Suomeksi">
<bdi>Suomeksi</bdi>
</a>快速胜利 3：使用prefers-reduced-motion
无论是吸引人们注意动作或更新，还是营造一种生机勃勃的感觉，在应用程序中添加运动都可以真正提升其体验。但是，有些人可能会发现这种体验令人反感。
Windows 和 MacOS 都在操作系统级别提供了一种设置，允许人们在使用系统时大幅减少运动量。prefers-reduced-motion
好吧，有了 CSS 媒体查询，他们可以。
prefers-reduced-motion媒体查询可用于在系统设置启用时大幅减少或从应用程序中删除所有运动。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}此处显示的毯式方法阻止了所有运动，但这可能会给细微差别留下很少的空间。最好回顾一下使用该产品的人员的需求，但也要考虑以下其他选项。
一种方法可能是只在prefers-reduced-motion设置中一次动画一个属性。因此，考虑一个使用opacity和transform淡入淡出并缩放显示的<Modal />。在运动减少的环境中，只有opacity会过渡。缩放效果将被删除，因为它们通常比淡出更有问题。
另一种选择可能是更字面地看待prefers-reduced-motion环境并删除所有运动。这将消除我们缩放的模态框、滑动抽屉和弹跳通知，但仍然可以为链接和按钮上的颜色过渡留出空间。
快速胜利 4：指示数据排序状态
所有这些技巧中一个共同的主题是确保应用程序的视觉设计和标记传达相同的信息。因此，当设计使用箭头来指示表格列的排序方向时，如何在标记中传达这一点？
将aria-sort属性设置为ascending /descending，用于主动排序列的标题，使标记能够传达与 UI 中的视觉指示器相同的内容结构。
这将有助于确保使用辅助技术的人和不使用辅助技术的人能够以相同的方式理解内容。
<thead>
<tr>
<th>First Name</th>
<th aria-sort="ascending">Last Name</th>
</tr>
</thead>快速胜利 5：懒加载列表
无论是在无尽的推文中滚动，还是在难以决定的产品列表中滚动，网络都已完全拥抱懒加载长列表数据（以及双关语，显然）。
这时，aria-setsize和aria-posinset属性变得非常有价值。虽然用户在列表中的进度可以通过多种不同的方式在视觉上传达，但这些属性用于将相同的进度传达给许多辅助技术。
作为开发人员，我们可能可以访问整个列表的长度以及当前显示的项目的索引。有了这些，aria-setsize属性将定义列表的总长度，而aria-posinset属性将定义项目在该列表中的特定位置（或索引）。
如果列表的总长度未知，则aria-setsize应设置为-1。
有了这些属性，辅助技术可以更好地解释列表，用户可以更好地理解自己在列表中的位置。
<h2 id="top-artists-title">Top Artists of 2021</h2>
<ul role="listbox" aria-labelledby="top-artists-title">
<li role="option" aria-setsize="20" aria-posinset="5">Bloodbound</li>
<li role="option" aria-setsize="20" aria-posinset="6">Manimal</li>
<li role="option" aria-setsize="20" aria-posinset="7">Powerwolf</li>
</ul>试听一下这些属性是如何使用 MacOS VoiceOver 宣布的。
🎉 附加胜利：Axe-DevTools 扩展
实施这五个无障碍快速胜利是一个良好的开端，但它正是如此——一个开始。有大量辅助技术和用户可能拥有的能力集，独自探索它们可能让人感到不知所措。
幸运的是，有很多工具可以帮助审核产品的可访问性，从而使旅程更易于管理。我个人最喜欢的——我可靠的无障碍指南——是Axe-DevTools 浏览器扩展。
运行 Axe-DevTools 无障碍扫描器可以返回大量有价值的信息。它不仅会显示在页面上找到的所有问题和警告，还会按大致严重程度对它们进行分组。它还可以突出显示页面上或元素选项卡中的元素，并提供链接以详细了解特定问题。
但是，最重要的是，它会提供清晰简洁的方法来解决特定问题。
总结
产品不会在一夜之间变得无障碍；产品无障碍工作也永远不会真正完成。就像网络上的任何其他事物一样，无障碍性会不断发展，需要维护。但是，即使是看似很小的添加也会对产品的无障碍性和用户的整体体验产生影响。
进入新的代码库后，这些通常是我首先要考虑的事情——无障碍性的“低垂的果实”，如果你愿意的话。
达到 AAA 甚至 AA 符合性感觉就像攀登一座 8000 米的山峰。这些步骤不会带你到达顶峰，但探险永远不会一步完成。
但需要注意的是，对于某些人来说，颜色和元素的快速变化可能是一个巨大的问题。在这种情况下，
@prefers-reduced-motion可以自然地转换为animation-duration的更高值。还有一个问题——如果网站允许用户选择界面语言，以便界面语言可能与页面中主要内容的语言不同，那么
<html>元素的lang属性应该反映哪一种？您可以将
lang属性添加到包裹页面上内容的任何元素中，即使是嵌套的元素。它是全局的。因此在这种情况下，我会将 html lang 属性设置为在该深度（通常是界面语言）中首先出现或最常出现的语言，并添加 lang 属性来包裹与其不同的内容。
只要最靠近的包裹元素或父元素具有正确的 lang 属性，你就没问题。
我想看到更多关于在
<a>元素上使用hreflang的好处的文档。链接的页面只谈论<link>元素以及该属性。快速胜利 0：停止使用 font-weight: 300。
快速胜利 -1：停止使用灰色文本。