网站可访问性考虑了用户在如何以各种身份体验网站方面的需求。例如，在开发更易于访问的网站时，考虑用户将如何仅使用屏幕阅读器与网站进行交互，或者行动不便的用户如何导航网站都是需要考虑的场景。不太可能每个网站建设者都可以选择与真实用户测试其网站的可访问性。幸运的是，设计人员和开发人员可以遵循一些网站可访问性指南，以确保他们创造的用户体验不仅令人愉悦，而且可供更多人使用。 

本文介绍关于如何创建更易于访问的网站。

为什么可访问性很重要？

残疾不应阻止一个人使用网站，网站不应成为任何人使用的负担。拥有可访问的网站意味着所有用户，尤其是残障用户，都将拥有公平的体验，能够轻松完成任务并访问所需的信息。设计人员和开发人员有责任在考虑所有潜在用户的情况下创建这些数字产品。 

残疾与情境和临时限制

为残障人士提供无障碍设施通常会以意想不到的方式使非残障人士受益。虽然暂时性或情境/环境限制与残疾不同，但人们经常会意外地尝试以通常不是为他们设计的方式导航空间、产品或工具。情境或环境限制，例如父母在抱着婴儿时试图用一只手使用手机，或暂时限制，例如某人因喉炎而无法说话，可能不如认识到患有自闭症的人的生活经历那么重要。残障人士每天都要面对。然而，认识到这些不同的体验可能有助于进一步理解为什么拥有可访问的网站、产品和应用程序应该是设计策略的重要组成部分，而不是事后的想法。 

为可访问性设计不是为小众用户群设计；它在设计时考虑了各种潜在用户，甚至是您可能没有预料到的用户。

Web 可访问性的基础知识

可访问性指南：WCAG 2.1 合规性

行业标准的 Web 可访问性指南缩写为 WCAG（Web 内容可访问性指南）。只要有新信息可用，这些指南就会更新，最新的指南随后会发布在W3C（万维网联盟）网站上。W3C 是一个国际社区，它“开发开放标准以确保 Web 的长期发展”，并致力于让每个人都尽可能地访问互联网和其他数字产品。 

他们指南的最新版本是WCAG 2.1，其中仅包含对 WCAG 2.0 的补充。可访问性合规性分为三个级别（A、AA 和 AAA）。每个级别都比前一个级别更易于访问，其中级别 A 是必要的最低要求（但不是完全可访问），而 AAA 是最优化的可访问性级别。 

例如，为了确保用户能够在网站上导航并找到他们正在寻找的内容，页面必须具有的要求之一（除其他外）是描述页面内容以满足 A 级要求的标题标准。进入 AA 级标准，其中一项要求是页面必须包含标题和标签来描述主题或目的。进一步进入 AAA 级标准，其中一项要求是页面必须使用部分标题来组织页面内容。 

有很多指南可以满足所有 WCAG 标准，但是，随着更多的实践，它将成为第二天性。

8 个 Web 辅助功能提示 

满足可访问性指南需要满足许多要求，但请牢记以下提示，以确保您满足网站上不同元素的基本要求。

1. 标题结构

Web 可访问性最重要的部分之一是将用户定向到网站和他们与之交互的内容。这是合并标题结构至关重要的地方。 

虽然通过更改字体大小在网站上直观地制作标题很容易，但如果这些标题没有标记为这样，则屏幕阅读器将无法特别识别网站的结构。没有确定的标题结构也会使您面临网站各个页面不一致的风险。为避免遇到这些问题，请为您的网站设置一个结构，以便标题的层次结构清晰。这看起来像是有一个专门的 H1、H2、H3 等等，不仅在视觉上反映，而且还嵌入到网站的代码中。这不仅对使用屏幕阅读器的用户有帮助，而且还可以确保整个网站的一致性，为每个人提供更好的体验。

作为奖励，拥有专用的标题结构可以让搜索引擎更好地扫描您的网站，从而获得更好的 SEO。明确建立了文本层次结构（例如 H1、H2 等）

2. 链接

用户对他们在数字空间中所看到和交互的内容有着明确的期望，而链接是多年来一直以相同方式运作的事物之一。例如，在阅读正文时，可以安全地假设链接的文本带有下划线并且可能与其他文本的颜色不同。因为这是用户的期望，开发人员和设计人员应该接受它，而不是出于风格原因而背离它。下划线文本的视觉指示器为用户提供了决定是否与元素交互的提示，并确保他们不会错过信息。

此外，链接文本在具有描述性时更易于访问。像“了解更多”和“点击这里”这样的短语并没有让用户清楚地知道他们将通过链接遇到什么。但是，使用诸如“查看我们的 UX 资源”之类的链接文本可以让用户更好地了解单击链接时会发生什么。

链接的行内文本可以从正文中清楚地识别出来

所有超链接都清楚地说明了链接指向的用户

3. 图像

在您的网站上包含图像时，要记住的一件重要事情是如何标记图像。Alt 文本（也称为 alt 标签和 alt 描述）用于描述网页代码中的图像，以便用户无需实际查看图像即可了解图像中的内容。（如果您曾经访问过某个网站并且图像未加载但其位置有文本，那么这就是替代文本。）替代文本对于通过屏幕阅读器与网站交互的用户特别有用，因为他们能够了解图像传达的内容。请记住要注意这些替代文本描述中的详细信息量。如果图像主要用于装饰用途，简短而简单的描述是合适的，而不是可能用于页面更重要图像的稍长描述。

所有图片都附有替代文字

替代文本对图像类型进行了适当的描述

4. 音频和视频

W3C 有很多关于如何使音频和视频更易于访问的指南。要记住的重要一点是，应该始终有一个可用的文本选项。包括字幕或附有所有音频和视频文件的文字记录对于可访问性至关重要。失聪、听力障碍或什至只是在无法收听音频的环境中（例如，在没有耳机的嘈杂地铁车上）的用户将感谢他们能够轻松地使用您的内容。 

将创建隐藏式字幕作为视频创作过程中的常规步骤。更好的是，将字幕嵌入到您的视频中，这样无论视频最终出现在哪个平台上，用户都可以阅读它们而无需打开或关闭字幕。在音频文件中包含转录本也是一个好主意。虽然这些确实需要时间来开发，但让您的用户可以使用抄本为他们提供了另一种以最适合他们的方式使用您的内容的途径。例如，在 NPR 的网站上，他们的许多节目都附有文字记录，供用户在无法收听时阅读。

所有视频都包含字幕

用户可以轻松获得音频内容的抄本

5. 颜色

颜色可用于向数字世界中的用户传达多种信息。例如，红色通常与危险或错误相关，而绿色则与好事相关，或者意味着任务已经完成。但是如果用户有色觉缺陷怎么办？如何在颜色之外有效地传达相同的信息？在这些情况下，包括其他沟通内容，如明文和图标，可以确保用户理解您的信息，而不仅仅是依靠颜色。您还应该考虑添加图案或纹理以指示视觉差异，例如 Trello 已在其平台中实施。

同样，确保整个网站的元素和背景之间的强烈色彩对比是可访问性的关键组成部分。强烈的对比度可以让视力有缺陷的用户更好地看到屏幕上的内容。有许多工具可以通过提供对没有色觉缺陷的人来说不太明显的对比度来确定颜色组合是否符合 WCAG（例如这个在线对比度检查器）。在提交之前检查颜色组合始终是一个很好的经验法则，以确保用户能够有效地与您的网站进行交互。

颜色并没有单独用于向用户传达重要信息

图案或纹理用于指示图表、图形等的视觉差异。

元素具有符合 WCAG 的强烈色彩对比。

6. 排版

开始创建或更新网站设计时要考虑的一个基本要素是排版。网站排版应该能够以清晰易懂的方式为用户提供他们需要的信息。对于仍能看到屏幕但可能无法在网页上清楚地看到所有细节的弱视用户来说，易读性尤其重要。

选择易于使用的字体包括特别注意字符是否相互区分以及字体是否有足够的字母间距。无障碍设计的一些额外排版最佳实践包括将文本左对齐（对于从左到右阅读的语言），确保文本可以轻松调整大小，并确保每行的行长度约为 66 个字符（文本除外）有更多空间）。 

为了帮助解决难以访问的排版问题，一些组织开发了更易于访问的字体，例如来自盲文研究所的这种字体，使设计师可以更轻松地使他们的网站易于访问。还建议设计师选择更大的字体大小，以使文本更易于阅读和字符更易于区分。 

字体清晰易读，字符之间具有明显的特征

大文本体左对齐

文本可以轻松调整大小，网页仍然按预期运行

7. 导航和站点结构

有很多关于如何正确开发网站的信息，以便用户使用键盘导航而不是一只鼠标。但是，设计人员在设计阶段也需要注意这些用户。这在设计网站导航时尤为重要。使用鼠标的人通常会用眼睛扫描网站，然后单击导航项，而使用键盘进行导航的人通常会使用“tab”键进行导航，以便在使用页面之前了解页面上的内容。如果一个网站的导航很长，那么键盘用户很容易对大量的选项感到沮丧，以便找到他们想要访问的信息。为避免这种情况，请确保您的网站导航仅包含将用户带到他们想去的地方的必要项目。此外，请确保网站的代码遵循导航最佳实践 让人们轻松地在网站上使用键盘，而无需浏览不必要的项目。

8. 表格

表单似乎是一种不需要太多指导的简单设计模式。然而，最近出现了采用极简主义方法的表单，一旦用户开始打字，就没有明确定义的边界或标签。这使得看似简单的表单对于许多用户来说不必要地难以交互。与其删除关键边界和边框来简化表单设计，不如记住保留基本元素。他们工作是有原因的！ 

表单字段具有明确定义的边界和边框

表单字段有清晰的标签