网站上最常见的 6 种可访问性错误类型及其修复方法
Posted: Sun Feb 16, 2025 9:45 am
了解和改善网站可访问性的关键之一是了解最常见的可访问性错误以及如何修复它们。自 2019 年以来，WebAIM每年都会对排名前 100 万的网站进行可访问性审查，并制作一份调查报告。审查会测试每个网站的主页，并扫描其中是否存在可访问性错误。
受评网站分为教育等类别。值得注意的是，虽然所有网站的平均错误数为 56.8，但教育网站表现更好，平均错误数仅为 26.0。令人鼓舞的是，教育行业的表现远远优于总体平均水平；然而，仍有改进空间。
WebAIM 报告列出了六种最常见 泰国电报数据 的错误类型。这些类型的错误占其审查中发现的所有错误的 96%，这真是令人震惊。如果您的学院或大学专注于解决这些类型的错误，您的网站的整体可访问性将得到显著改善。最常见的错误类型是：
低对比度文本
对于色盲和视力低下的用户来说，网页文本内容与背景之间保持适当的对比度至关重要。良好的对比度还可以提高所有用户的可用性。WCAG指南规定，文本的颜色对比度应为 4.5:1。低对比度文本出现的一些常见方式是将文本置于背景图像上，以及在页面上同时使用低对比度的机构品牌颜色。
测试颜色对比度相对容易，并且有许多免费工具可以帮助您找到此类错误。
WebAIM 的 WAVE
颜色对比度检查器
一旦确定了颜色对比度问题的位置，您就可以通过调整或更改文本或背景的颜色来开始纠正它们。
缺少替代文本
WCAG 指南要求大多数图像都应有替代文本。此替代 (alt) 文本为使用辅助技术的用户提供了重要的上下文和功能信息。在大多数 CMS 系统中，向图像添加替代文本是一个简单而直接的过程。我建议使用上面提到的 WAVE by WebAIM 浏览器扩展来测试缺少的替代文本。
W3C 提供了有关不同类型图像的替代文本要求的更多信息，以及一个决策树，可帮助您确定如何在各种图像场景中使用替代文本。首先优先考虑您的主页和其他高流量页面，然后您可以逐个部分地检查您学校的网站，以完成对缺失替代文本的补救。
空链接
空链接是没有任何关联内容的超链接，这意味着没有文字向用户解释点击链接后会发生什么。当链接为空时，使用辅助技术的用户几乎不可能了解点击链接后会发生什么。
WAVE 网络可访问性评估工具界面显示已识别出六个错误，均为空链接。
大多数自动化辅助功能工具都会检查空链接。它们还会查找其他常见的超链接问题，例如冗余链接文本和断开的链接。您可以使用上面列出的 WAVE by WebAIM 工具，也可以尝试Siteimprove 浏览器扩展程序之一。
一旦您确定了空链接，您可以选择添加必要的关联内容（链接文本或替代文本）或删除不再需要的空链接。
了解有关 SEO 优化锚文本和链接策略的更多信息。
标签缺失
表单在高校收集潜在学生信息方面发挥着重要作用。为了满足可访问性要求，您必须提供标签来标识所有表单控件，包括文本字段、复选框、单选按钮和下拉菜单。这些标签需要描述相关表单控件的用途。
再次，您可以使用自动化可访问性测试工具扫描您的网站以查找缺失的表单标签。根据您用于生成表单的平台，您可能能够直接编辑表单以添加任何缺失的标签。在其他情况下，可能需要让开发人员或内容管理系统管理员添加必要的标签以使您的表单可访问。
空按钮
按钮是现代网站的关键视觉和功能元素。需要注意的是，并非所有在视觉上看起来像按钮的东西在代码和功能上都是按钮。真正的按钮使用按钮 HTML 标签，其功能与被设计成按钮样式的链接不同。
在 HTML 中，按钮是一种表示可触发操作（例如下载文件、提交表单或打开或关闭页面上的某些内容）的元素。按钮通常使用 JavaScript 代码为元素添加功能 - 这意味着没有超链接中的 href 属性，如果没有 JavaScript，按钮就不会执行任何操作。
如果按钮标记为空，则表示它不包含描述其功能的文本。要纠正此问题，您需要在按钮标签内添加文本，以清楚地表明按钮的用途。如果按钮包含图像而不是文本，则需要为图像添加描述性替代文本。我鼓励尽可能使用基于文本的按钮，因为它们总体上更容易访问。
缺少语言
所有 HTML 文档都需要具有语言属性。用户在配置屏幕阅读器时选择默认语言。如果未指定网页的语言，屏幕阅读器将假定网页是用户设置的默认语言。对于会说多种语言并使用多种语言访问网站的用户来说，语言设置可能是一个问题。指定一种语言并确保其有效至关重要，这样屏幕阅读器才能正确发音网站文本。
如果您的高等教育网站因缺少语言属性而被标记，您可能需要开发人员的帮助将该属性添加到您的 HTML 代码中。许多学院和大学网站现在提供多种语言的网页内容。如果您的机构是这种情况，则为每个页面设置正确的语言非常重要。
如何开始修复高等教育网站上的可访问性问题
现在您已经熟悉了这六种常见的可访问性错误，您可以开始检查学校的网站。如果您还没有可访问性检查工具，我们建议您下载并开始使用 WebAIM 的 WAVE。在开始可访问性检查之前，花点时间分析您的网络流量。根据过去一年的流量，将初步检查重点放在您网页的前 10 到 20 个页面上。一旦您确定并修复了这些顶级页面上的任何问题，您就可以开始对整个网站进行更系统的审查。
您可能会发现，您发现的错误分为两类：内容/页面特定错误和全局/代码错误。修复全局错误将对您的整体可访问性产生重大影响，因为解决这些错误将解决您网站上多个页面的问题。但是，这种类型的错误可能需要开发人员的帮助才能修复。
与内容相关的错误通常与页面有关。CMS 中的内容编辑器通常可以解决这些错误。但是，这确实需要逐页检查和修复这些错误，这可能需要相当长的时间。最终，所有这些努力都是值得的，因为您将提高用户体验的质量并增加网站访问者的联系和参与度。
网站可访问性旨在确保每个人都能很好地使用您的网站。这很重要的原因有很多，但最重要的原因是因为这是正确的做法。
可访问性错误可能会导致某些网站访问者无法找到他们需要的信息，或者无法完成所需的任务。
提高网站的可访问性可以提高所有网站访问者的可用性。
请查看我们的博客《高等教育的 Web 可访问性 101》，了解更多有关确保您的学院或大学网站可供所有用户访问的重要性的信息。
请继续关注卡内基博客，获取有关提高高等教育网站可访问性的更多信息和提示。如果您需要帮助，我们的网站设计和开发团队将随时为您提供帮助。
受评网站分为教育等类别。值得注意的是，虽然所有网站的平均错误数为 56.8，但教育网站表现更好，平均错误数仅为 26.0。令人鼓舞的是，教育行业的表现远远优于总体平均水平；然而，仍有改进空间。
WebAIM 报告列出了六种最常见 泰国电报数据 的错误类型。这些类型的错误占其审查中发现的所有错误的 96%，这真是令人震惊。如果您的学院或大学专注于解决这些类型的错误，您的网站的整体可访问性将得到显著改善。最常见的错误类型是：
低对比度文本
对于色盲和视力低下的用户来说，网页文本内容与背景之间保持适当的对比度至关重要。良好的对比度还可以提高所有用户的可用性。WCAG指南规定，文本的颜色对比度应为 4.5:1。低对比度文本出现的一些常见方式是将文本置于背景图像上，以及在页面上同时使用低对比度的机构品牌颜色。
测试颜色对比度相对容易，并且有许多免费工具可以帮助您找到此类错误。
WebAIM 的 WAVE
颜色对比度检查器
一旦确定了颜色对比度问题的位置，您就可以通过调整或更改文本或背景的颜色来开始纠正它们。
缺少替代文本
WCAG 指南要求大多数图像都应有替代文本。此替代 (alt) 文本为使用辅助技术的用户提供了重要的上下文和功能信息。在大多数 CMS 系统中，向图像添加替代文本是一个简单而直接的过程。我建议使用上面提到的 WAVE by WebAIM 浏览器扩展来测试缺少的替代文本。
W3C 提供了有关不同类型图像的替代文本要求的更多信息，以及一个决策树，可帮助您确定如何在各种图像场景中使用替代文本。首先优先考虑您的主页和其他高流量页面，然后您可以逐个部分地检查您学校的网站，以完成对缺失替代文本的补救。
空链接
空链接是没有任何关联内容的超链接，这意味着没有文字向用户解释点击链接后会发生什么。当链接为空时，使用辅助技术的用户几乎不可能了解点击链接后会发生什么。
WAVE 网络可访问性评估工具界面显示已识别出六个错误，均为空链接。
大多数自动化辅助功能工具都会检查空链接。它们还会查找其他常见的超链接问题，例如冗余链接文本和断开的链接。您可以使用上面列出的 WAVE by WebAIM 工具，也可以尝试Siteimprove 浏览器扩展程序之一。
一旦您确定了空链接，您可以选择添加必要的关联内容（链接文本或替代文本）或删除不再需要的空链接。
了解有关 SEO 优化锚文本和链接策略的更多信息。
标签缺失
表单在高校收集潜在学生信息方面发挥着重要作用。为了满足可访问性要求，您必须提供标签来标识所有表单控件，包括文本字段、复选框、单选按钮和下拉菜单。这些标签需要描述相关表单控件的用途。
再次，您可以使用自动化可访问性测试工具扫描您的网站以查找缺失的表单标签。根据您用于生成表单的平台，您可能能够直接编辑表单以添加任何缺失的标签。在其他情况下，可能需要让开发人员或内容管理系统管理员添加必要的标签以使您的表单可访问。
空按钮
按钮是现代网站的关键视觉和功能元素。需要注意的是，并非所有在视觉上看起来像按钮的东西在代码和功能上都是按钮。真正的按钮使用按钮 HTML 标签，其功能与被设计成按钮样式的链接不同。
在 HTML 中，按钮是一种表示可触发操作（例如下载文件、提交表单或打开或关闭页面上的某些内容）的元素。按钮通常使用 JavaScript 代码为元素添加功能 - 这意味着没有超链接中的 href 属性，如果没有 JavaScript，按钮就不会执行任何操作。
如果按钮标记为空，则表示它不包含描述其功能的文本。要纠正此问题，您需要在按钮标签内添加文本，以清楚地表明按钮的用途。如果按钮包含图像而不是文本，则需要为图像添加描述性替代文本。我鼓励尽可能使用基于文本的按钮，因为它们总体上更容易访问。
缺少语言
所有 HTML 文档都需要具有语言属性。用户在配置屏幕阅读器时选择默认语言。如果未指定网页的语言，屏幕阅读器将假定网页是用户设置的默认语言。对于会说多种语言并使用多种语言访问网站的用户来说，语言设置可能是一个问题。指定一种语言并确保其有效至关重要，这样屏幕阅读器才能正确发音网站文本。
如果您的高等教育网站因缺少语言属性而被标记，您可能需要开发人员的帮助将该属性添加到您的 HTML 代码中。许多学院和大学网站现在提供多种语言的网页内容。如果您的机构是这种情况，则为每个页面设置正确的语言非常重要。
如何开始修复高等教育网站上的可访问性问题
现在您已经熟悉了这六种常见的可访问性错误，您可以开始检查学校的网站。如果您还没有可访问性检查工具，我们建议您下载并开始使用 WebAIM 的 WAVE。在开始可访问性检查之前，花点时间分析您的网络流量。根据过去一年的流量，将初步检查重点放在您网页的前 10 到 20 个页面上。一旦您确定并修复了这些顶级页面上的任何问题，您就可以开始对整个网站进行更系统的审查。
您可能会发现，您发现的错误分为两类：内容/页面特定错误和全局/代码错误。修复全局错误将对您的整体可访问性产生重大影响，因为解决这些错误将解决您网站上多个页面的问题。但是，这种类型的错误可能需要开发人员的帮助才能修复。
与内容相关的错误通常与页面有关。CMS 中的内容编辑器通常可以解决这些错误。但是，这确实需要逐页检查和修复这些错误，这可能需要相当长的时间。最终，所有这些努力都是值得的，因为您将提高用户体验的质量并增加网站访问者的联系和参与度。
网站可访问性旨在确保每个人都能很好地使用您的网站。这很重要的原因有很多，但最重要的原因是因为这是正确的做法。
可访问性错误可能会导致某些网站访问者无法找到他们需要的信息，或者无法完成所需的任务。
提高网站的可访问性可以提高所有网站访问者的可用性。
请查看我们的博客《高等教育的 Web 可访问性 101》，了解更多有关确保您的学院或大学网站可供所有用户访问的重要性的信息。
请继续关注卡内基博客，获取有关提高高等教育网站可访问性的更多信息和提示。如果您需要帮助，我们的网站设计和开发团队将随时为您提供帮助。