在线可访问性：为什么它如此重要以及您应该检查的 6 个方面
Posted: Tue Dec 03, 2024 3:36 am
我们写这篇文章是为了帮助您在这个重要但经常被忽视的领域迈出第一步。
既然互联网是为所有人服务的，那么这是每个人的任务。
目录
网页无障碍简介
网络可访问性意味着什么？
为什么它很重要？
它有什么优点呢？
从哪里开始？
低对比度文本
使用图像时提供替代文本
没有内容的链接
表单控件的书签
没有文字的按钮
指明文档的语言
后续步骤
有关辅助功能的其他有用资源
结论
网页无障碍简介
网络可访问性意味着什么？
网络可访问性是允许所有个人（无论能力或残疾）使用网页并从中受益的 包容性做法。
«网络的潜力在于其普遍性。每个人的可用性，无论其残疾程度如何，都是一个基本方面。”
蒂姆·伯纳斯·李，万维网 (WWW) 的创始人
为什么它很重要？
根据
WHO（世界卫生组织）约有 10 亿人（约占世界人口的 15%）患有某种类型的残疾。这意味着他们在与不考虑这一方面的网页交互时很可能会遇到一些困难。
最常见的残疾是视觉、听觉、运动和认知。最常见的残疾是视觉、听觉、运动和认知。
残疾因人而异，因此呈现出多种多样的形式。然而，我们可以识别的一些最常见的问题是：
视力障碍：如失明、视力下降、色盲……
听力障碍：耳聋或听力水平较低的人。
与行动能力相关的运动障碍，可能导致纯粹的身体问题或神经/遗传疾病。相当多的人面临行动困难，特别是由于年老。
认知障碍，可以表现为智力能力更有限，但也与记忆问题、精神障碍或学习困难有关，如阅读障碍、注意力缺陷多动症……
残疾有多种类型和级别。关键是要超越您的计算机和您使用网络的方式来考虑，开始了解其他人如何使用它。
你不是你的用户。
此外，许多国家/地区已经制定了立法，要求特别是公共管理网站遵守可访问性方面的最低水平要求。
如果您想了解更多有关西班牙立法状况的信息，请参阅Olga Carreras（独立顾问和网络可访问性方面的真正专家）撰写的这篇文章
它提供什么好处？
努力为所有类型的用户提供平等的机会和访问我们网站的机会是道德和社会责任。努力改善网络可访问性对残疾人产生了深远的影响，但他们并不是唯一受益的人。它还具有其他额外的好处。例如：
连接速度慢或计算机设备较旧的用户也会喜欢我们的网站符合可访问性标准。
更多用户意味着更多销量。扩大可以与我们网站互动的用户数量将增加可以购买我们产品或服务的潜在客户数量。
更好的性能和更高的转化率——符合网络标准的网站可以兼容更多的设备，结构更好，效率更高。
在页面加载时间方面有效。可访问性是必须优化的转换中的首要任务之一（仅次于功能）。如果一个网站的可访问性不够，您将面临严重的转换问题。
提高搜索引擎排名 (SEO)：48% 的可访问性标准与改进搜索引擎索引的建议一致。在某些方面，这些引擎也是“盲目的”，因为它们无法“看到”图像、视频或 JavaScript。因此，允许您的内容被机械地解释和表示对于搜索引擎和辅助技术的用户来说都是有利的。
如果您希望提高排名，请务必查看我们所有与 SEO 相关的内容。
如何开始？
审查网站的可访问性可能是一项艰巨的任务。必须考 摩洛哥电话号码库 虑很多方面。但谁制定指导方针呢？
万维网联盟(W3C)通过其倡议WAI（Web 可访问性倡议）提供了一份名为WCAG 2.1（Web 内容可访问性指南）的详细列表，该列表已被全球接受并作为大多数其他标准的基础。 WCAG 相当复杂，不容易概括它们，但有趣的是，它们建立了三个符合性或充分性级别（从最低到最高要求）：A 级、AA 级和 AAA 级。通常需要 AA 级，因为 WAI 本身认识到，由于许多 Web 内容难以适应，因此不建议使用最高级别 AAA。
那么，如果你不是该领域的专家，你能做什么呢？从哪里开始？
一个有用的建议是首先确定有关可访问性的最常见错误。以下是最常见的 6 种：
最常见的可访问性错误图表最常见的可访问性错误图表
100 万个主页上最常见的可访问性错误
对比度较差的文本
如果文本的颜色与背景之间没有足够的对比度，例如白色背景上的浅灰色，有些人将无法阅读文本。
另一方面，其他有阅读障碍等问题的用户发现很难阅读太亮（高亮度）的颜色。
有什么解决办法吗？
仔细检查您网站上的所有文本，或者至少检查可能出现此问题的文本。大多数浏览器都有有用的工具来完成此任务，例如工具中的元素选择器。
Chrome 的开发者工具允许您专门检查某个元素并提供有关对比度级别的详细信息。
根据文本与背景的对比度比较文本的可读性
根据文本与背景的对比度比较文本的可读性
使用 Chrome 开发者工具检查器，您可以分析文本的对比度
为了确保您选择的颜色符合辅助功能指南，您可以使用众多可用的在线工具之一。这里我们提出两种选择：
使用图像时提供替代文本
检查网站上的插图（从主页或访问量最大的页面开始），并确保它们具有描述性标签(alt=””) 和必要时的替代文本。并非所有图像都可能需要替代文本，例如，如果它们是装饰性的并且不会向内容添加附加信息（但是，它们应该始终具有描述性标签，在这些情况下该标签将为空）。但是，如果图像提供了原本无法获得的信息，则必须在替代文本中包含该信息。
要了解在线商店图像应涵盖的所有基本方面，请不要错过：来自电子商务摄影的 Montse Labiaga 的采访
空锚
即使在其环境之外，链接也必须能够被解释。因此，使用诸如“阅读更多”、“单击此处”、“继续”等链接的通用文本会带来相当多的不便，并导致使用辅助技术浏览网络的用户点击次数减少。
目标是能够单独从链接文本或从文本以及链接上下文确定每个链接的用途。
表单元素的标签
标签用于识别表单的元素。始终包含标签非常重要（尽管有时它可能会被隐藏，以便只有屏幕阅读器才能访问）。
使用label元素将标签与表单控件关联起来，并使用具有相同值的for和id属性。
显示表单上名称字段示例的照片显示表单上名称字段示例的照片
没有文字的按钮
首先，如果您不了解按钮和链接之间的区别以及它们对可用性的影响，那么阅读以下文章将会有所帮助：
有时它可能会令人困惑，因为在许多网页上，链接都有按钮外观。一般来说，链接用于从一个 URL 移动到另一个 URL或转到同一页面上的另一个部分（在 HTML 中，使用 <a> 标签来引用它们）。现在，按钮是一个引发操作的元素，例如下载文件、提交表单或打开/关闭页面上的某些内容。通常按钮需要 JavaScript 代码来激活功能（在 HTML 中，它们通过标签<button>或<input>指定类型来指示（例如：<input type=”submit” value=”Enviar formulario”>）。
从可访问性的角度来看，按钮文本或标签值 向用户表达要执行的操作至关重要。如果这些文本没有描述按钮的功能，则使用屏幕阅读器等的用户将无法理解按钮的用处，并且将无法使用它。
既然互联网是为所有人服务的，那么这是每个人的任务。
目录
网页无障碍简介
网络可访问性意味着什么？
为什么它很重要？
它有什么优点呢？
从哪里开始？
低对比度文本
使用图像时提供替代文本
没有内容的链接
表单控件的书签
没有文字的按钮
指明文档的语言
后续步骤
有关辅助功能的其他有用资源
结论
网页无障碍简介
网络可访问性意味着什么？
网络可访问性是允许所有个人（无论能力或残疾）使用网页并从中受益的 包容性做法。
«网络的潜力在于其普遍性。每个人的可用性，无论其残疾程度如何，都是一个基本方面。”
蒂姆·伯纳斯·李，万维网 (WWW) 的创始人
为什么它很重要？
根据
WHO（世界卫生组织）约有 10 亿人（约占世界人口的 15%）患有某种类型的残疾。这意味着他们在与不考虑这一方面的网页交互时很可能会遇到一些困难。
最常见的残疾是视觉、听觉、运动和认知。最常见的残疾是视觉、听觉、运动和认知。
残疾因人而异，因此呈现出多种多样的形式。然而，我们可以识别的一些最常见的问题是：
视力障碍：如失明、视力下降、色盲……
听力障碍：耳聋或听力水平较低的人。
与行动能力相关的运动障碍，可能导致纯粹的身体问题或神经/遗传疾病。相当多的人面临行动困难，特别是由于年老。
认知障碍，可以表现为智力能力更有限，但也与记忆问题、精神障碍或学习困难有关，如阅读障碍、注意力缺陷多动症……
残疾有多种类型和级别。关键是要超越您的计算机和您使用网络的方式来考虑，开始了解其他人如何使用它。
你不是你的用户。
此外，许多国家/地区已经制定了立法，要求特别是公共管理网站遵守可访问性方面的最低水平要求。
如果您想了解更多有关西班牙立法状况的信息，请参阅Olga Carreras（独立顾问和网络可访问性方面的真正专家）撰写的这篇文章
它提供什么好处？
努力为所有类型的用户提供平等的机会和访问我们网站的机会是道德和社会责任。努力改善网络可访问性对残疾人产生了深远的影响，但他们并不是唯一受益的人。它还具有其他额外的好处。例如：
连接速度慢或计算机设备较旧的用户也会喜欢我们的网站符合可访问性标准。
更多用户意味着更多销量。扩大可以与我们网站互动的用户数量将增加可以购买我们产品或服务的潜在客户数量。
更好的性能和更高的转化率——符合网络标准的网站可以兼容更多的设备，结构更好，效率更高。
在页面加载时间方面有效。可访问性是必须优化的转换中的首要任务之一（仅次于功能）。如果一个网站的可访问性不够，您将面临严重的转换问题。
提高搜索引擎排名 (SEO)：48% 的可访问性标准与改进搜索引擎索引的建议一致。在某些方面，这些引擎也是“盲目的”，因为它们无法“看到”图像、视频或 JavaScript。因此，允许您的内容被机械地解释和表示对于搜索引擎和辅助技术的用户来说都是有利的。
如果您希望提高排名，请务必查看我们所有与 SEO 相关的内容。
如何开始？
审查网站的可访问性可能是一项艰巨的任务。必须考 摩洛哥电话号码库 虑很多方面。但谁制定指导方针呢？
万维网联盟(W3C)通过其倡议WAI（Web 可访问性倡议）提供了一份名为WCAG 2.1（Web 内容可访问性指南）的详细列表，该列表已被全球接受并作为大多数其他标准的基础。 WCAG 相当复杂，不容易概括它们，但有趣的是，它们建立了三个符合性或充分性级别（从最低到最高要求）：A 级、AA 级和 AAA 级。通常需要 AA 级，因为 WAI 本身认识到，由于许多 Web 内容难以适应，因此不建议使用最高级别 AAA。
那么，如果你不是该领域的专家，你能做什么呢？从哪里开始？
一个有用的建议是首先确定有关可访问性的最常见错误。以下是最常见的 6 种：
最常见的可访问性错误图表最常见的可访问性错误图表
100 万个主页上最常见的可访问性错误
对比度较差的文本
如果文本的颜色与背景之间没有足够的对比度，例如白色背景上的浅灰色，有些人将无法阅读文本。
另一方面，其他有阅读障碍等问题的用户发现很难阅读太亮（高亮度）的颜色。
有什么解决办法吗？
仔细检查您网站上的所有文本，或者至少检查可能出现此问题的文本。大多数浏览器都有有用的工具来完成此任务，例如工具中的元素选择器。
Chrome 的开发者工具允许您专门检查某个元素并提供有关对比度级别的详细信息。
根据文本与背景的对比度比较文本的可读性
根据文本与背景的对比度比较文本的可读性
使用 Chrome 开发者工具检查器，您可以分析文本的对比度
为了确保您选择的颜色符合辅助功能指南，您可以使用众多可用的在线工具之一。这里我们提出两种选择：
使用图像时提供替代文本
检查网站上的插图（从主页或访问量最大的页面开始），并确保它们具有描述性标签(alt=””) 和必要时的替代文本。并非所有图像都可能需要替代文本，例如，如果它们是装饰性的并且不会向内容添加附加信息（但是，它们应该始终具有描述性标签，在这些情况下该标签将为空）。但是，如果图像提供了原本无法获得的信息，则必须在替代文本中包含该信息。
要了解在线商店图像应涵盖的所有基本方面，请不要错过：来自电子商务摄影的 Montse Labiaga 的采访
空锚
即使在其环境之外，链接也必须能够被解释。因此，使用诸如“阅读更多”、“单击此处”、“继续”等链接的通用文本会带来相当多的不便，并导致使用辅助技术浏览网络的用户点击次数减少。
目标是能够单独从链接文本或从文本以及链接上下文确定每个链接的用途。
表单元素的标签
标签用于识别表单的元素。始终包含标签非常重要（尽管有时它可能会被隐藏，以便只有屏幕阅读器才能访问）。
使用label元素将标签与表单控件关联起来，并使用具有相同值的for和id属性。
显示表单上名称字段示例的照片显示表单上名称字段示例的照片
没有文字的按钮
首先，如果您不了解按钮和链接之间的区别以及它们对可用性的影响，那么阅读以下文章将会有所帮助：
有时它可能会令人困惑，因为在许多网页上，链接都有按钮外观。一般来说，链接用于从一个 URL 移动到另一个 URL或转到同一页面上的另一个部分（在 HTML 中，使用 <a> 标签来引用它们）。现在，按钮是一个引发操作的元素，例如下载文件、提交表单或打开/关闭页面上的某些内容。通常按钮需要 JavaScript 代码来激活功能（在 HTML 中，它们通过标签<button>或<input>指定类型来指示（例如：<input type=”submit” value=”Enviar formulario”>）。
从可访问性的角度来看，按钮文本或标签值 向用户表达要执行的操作至关重要。如果这些文本没有描述按钮的功能，则使用屏幕阅读器等的用户将无法理解按钮的用处，并且将无法使用它。