创建符合 Web 可访问性标准的 HTML 布局

人们常说网络可访问性是当今万维网的“必须”。“Web 可访问性”一词定义了开发人员需要遵循的一组准则，以使残障人士和 Web 应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该易于访问。在本文中，Logicify团队为 HTML/CSS 开发人员提供了一些实用技巧，使 Web 布局对于人们和辅助设备来说都更易于访问。

保持标记干净
无论您使用什么标记，都要正确、整齐地构建它，避免跳过级别。始终偏爱原生元素（如果有的话）而不是伪造它们。例如，使用元素代替HTML 中的或。

用于

导航、

页面操作。

区分or元素与or 。前两者用于对内容进行语义强调，后两者用于视觉强调。

一些明显的事情已经成为最佳实践：
确保横幅中的公司徽标链接回网站主页。
使用该属性告诉浏览器网站上使用哪种语言。
如果您想在视觉上隐藏内容并对屏幕阅读器隐藏，请使用该hidden属性。
为长页面添加锚链接（跳转链接），以便用户可以跳过不需要的内容并继续进行相关部分。
注意页面语义
用户和机器（屏幕阅读器、盲文显示器）都应该能够识别页面结构。通过使用页面上的分段（

、

、

、 ）和标题元素来创建语义布局。

这有助于定义网页的清晰层次结构并区分主要（主要：

,

,

）和次要（不太重要：

-

,

）内容。

页面布局中语义的示意图。

注意页面布局中的语义

当您在页面中使用标题时，请勿使用格式（字体样式和大小）伪造标题属性 ( ) 的实际标记，因为这不允许辅助技术识别这些是标题。

在适当的情况下在网页上使用 ARIA 地标。ARIA（可访问的富互联网应用程序）是一个全面的技术规范，用于向本来无法访问的元素（特别是使用 JavaScript、AJAX 和 DHTML 开发的元素）添加可访问性信息。借助 ARIA 地标，开发人员可以扩展 HTML 功能并将正确的语义（即属性）应用于 UI 和内容元素，以便辅助技术理解这些内容。

以下示例说明了如何将 HTML 语义元素 (

、

、

、

) 与 ARIA 角色属性（“banner”、“navigation”、“main”、“contentinfo”）相结合，以便残障人士更轻松地使用屏幕阅读器进行网站导航。

页面布局中的 HTML 元素和 ARIA 地标示例。

在页面布局中组合 HTML 元素和 ARIA 地标

尽管大多数 ARIA 功能最近都是在 HTML5 中实现的（您绝对应该喜欢这些！），但并非所有屏幕阅读器和浏览器（例如 IE）都足够复杂到仅依赖于 HTML 语义。适当使用 ARIA 的一些示例包括分配角色来描述某些类型的小部件（“菜单”、“树项目”、“滑块”）、定义描述拖动源和放置目标的拖放属性以及添加警报以通知有关动态页面更改的辅助技术。

支持选项卡导航
使元素的 Tab 顺序（也称为文档对象模型或 DOM 顺序）与视觉顺序一致。从 Tab 键顺序中删除不必要的元素，以免使使用 Tab 或辅助设备导航的用户感到困惑。

使导航元素的焦点可见。您可以为此使用第三方插件或为 选项卡式导航（或其替代方案）时具有焦点的页面元素和链接提供视觉反馈的属性。

使用该属性可以使链接、按钮和表单字段等元素可通过 Enter 键和/或空格键获得焦点和选择。即使具有属性和 0整数值的不可聚焦元素也可以成为可聚焦的，例如

A focusable heading

如果页面上有弹出窗口，导航优先级应允许首先关闭它们。完成此操作后，理想情况下焦点应该跳回到用户被打开的模式窗口中断的网页元素。为此，请将最后一个焦点元素存储在变量中。

为图像添加替代文本
屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。因此，不要忘记为图像和其他图形添加替代文本（ alt 属性）。这不仅可以帮助使用辅助技术“阅读”屏幕的人，还可以帮助互联网连接较差的用户。您的网站还将通过图像替代文本进行 SEO 优化。

图像替代文本应该精确、简洁，并反映添加图像的主要目的。根据上下文，同一个图像可能有不同的替代文本，例如，如果公司徽标放置在标题中并将用户返回到主页，则其准确的替代文本可能是“`

在替代文本中，避免多余的“图像”或“图片”——无论哪种方式，辅助技术都会警告用户存在图像。
以句点结束替代文本。这将使屏幕阅读器在替代文本中的最后一个单词后暂停一下，从而为用户提供更愉快的体验。
具有多个可点击区域的图像的替代文本（例如图像映射）应为这些链接提供完整的描述。此外，每个可点击区域都应该有相应的替代文本来描述其目的或目的地。
避免文字图像；如果您不能没有它们，则替代文本应包含与图像中完全相同的单词。
如果您有多个图像传达一条信息，则组中第一个图像的替代文本应包含整个组的信息。
要熟悉替代文本的普遍接受的标准，您可以随时检查此替代文本决策树。
虽然必须为所有对理解内容很重要的图像添加替代文本，但对于与内容不直接相关的菜单图标或装饰图像（如封面）则不需要这样做。对于此类图像，只需使用空属性即可