辅助功能和标题：为视障用户设计

一个小细节，比如你如何在你的网站或应用程序上使用标题，可能会让你的潜在客户或销售人员付出代价。 继续阅读以了解为什么您的网站应该可以访问，如果不能访问会发生什么，以及有关如何使用标题引导用户正确浏览页面的一些最佳实践。

可访问性案例

在设计新网站或更新旧网站时，标题很容易被忽略。 营销人员倾向于更多地关注设计的美学方面，而不是实用方面。 的确，视觉元素在网站的用户体验 (UX) 中发挥着重要作用，但是让视力障碍用户更容易访问它可以增加转换的访问者数量。

统计数据加强了我们对可访问性的支持：

• 全世界约有2.53 亿人患有视力障碍
• 在英国，每天有250 人开始失明
• 在英国，有超过200 万人因视力丧失而对其日常生活产生重大影响，例如无法驾驶
• 与年龄相关的退化是成年人失明的主要原因。

预计到 2050 年，英国将有410 万人受到视力丧失的影响，企业不能不调整其网站以适应所有受众。 如果他们的目标市场是更可能出现视力问题的老年人群，这一点尤其重要。

像正确使用标题这样的简单方面可以产生巨大的不同，而且应用起来并不难。 它还可以为您节省诉讼费用。

多米诺骨牌

Domino's Pizza 就是一个很好的例子，说明忽视视障用户的可访问性可能会导致代价高昂。

2016 年，一位美国盲人顾客在难以选择配料、使用折扣代码甚至在餐厅的 iPhone 应用程序上完成订单后提出了投诉。 问题是该应用程序没有与手机的屏幕阅读软件集成，该软件根据正确使用的文本和用文本标记的图像来发声内容。 该公司的应用程序和网站缺少允许 iPhone 读出选项的正确代码。

虽然法官最初站在多米诺的一边，但上诉法院就在上周作出了对客户有利的裁决，理由是“多米诺网站和应用程序的所谓不可访问性阻碍了其实体比萨特许经营店的商品和服务的访问——这是公共场所住宿”。

在英国，皇家国家盲人研究所也对BCC的裁决表示欢迎：“根据2010 年平等法案，所有组织都有责任确保他们的网站和应用程序可供盲人和弱视者使用，包括那些谁使用屏幕阅读器”。

企业可以通过不同的方式使他们的网站更易于访问，并且正确使用标题标签对于帮助用户浏览页面大有帮助。

可访问性的标题最佳实践

标题存在相当多的混淆和误用，部分原因是开发人员过于密切地遵循设计或设计人员不知道使用标题的正确方法。

如果您不确定标题是什么，那么 W3C 有一个很好的定义，Yoast 解释了它的 SEO 用途。

W3C 将正确用法定义为：

“六个标题元素，H1 到 H6，表示章节标题。 尽管标题的顺序和出现不受 HTML DTD 的限制，但文档不应跳过级别（例如，从 H1 到 H3），因为将此类文档转换为其他表示形式通常是有问题的。”

标题的正确使用不仅会影响人们和 Google 阅读您页面的方式，还会对屏幕阅读器向用户呈现您的内容的方式产生巨大影响。 使用辅助功能工具的人可以通过您的标题导航页面，因此如果您有重要的事情要说，那么它应该按照您的意图在结构和视觉上进行布局。

创建页面时，无需额外工作即可访问标题。 如果您遵循正确的用法，那么将满足可访问性标准。 W3c 标题的可访问性建议很好地解释了这一点，正如您所看到的，它不仅对可访问性有意义，而且在结构和视觉上也有意义。

我如何检查标题？

如果您的开发人员或主题遵循标题的正确使用，那么您应该能够简单地添加您的内容并通过您的编辑器/CMS 以正确的方式添加您的标题。

作为旁注，您不需要在任何地方添加标题，一个简单的 H1（通常是页面标题）后跟一个 H2 就足够了——但是假设您想正确构建一个特别长的页面，或者您正在检查其他人的工作？ 尝试为您喜欢的浏览器使用以下插件之一：

• Chrome 的标题地图
• Firefox 的标题映射

安装后，它们非常易于使用，当您单击插件按钮时，任何不正确的标题都会在侧边栏中以红色突出显示。 此功能也将成为 WordPress 5.0 版本中古腾堡编辑器的默认选项，并在此站点上进行了说明。

标题的正确使用方法：

使用标题的错误方法：

下图显示了用于样式而不是结构的标题。 这将导致标记错误并且在语义上是不正确的——避免像这样使用它们！

希望这篇文章现在可以帮助您为每个人正确构建您的网页。

如果您在 Web 开发方面需要帮助，请随时与我们联系。