提高网站可访问性的11个技巧

您是否熟悉盲人和视力障碍用户一般如何上网？您可能从未想过它，但由于各种技术和工具，他们能够像任何非弱势群体一样阅读消息、回复电子邮件和订购专用服务器。然而，总有一个大问题——网络必须是可访问的，并且在冲浪时不应构成任何不必要的障碍。虽然这并不一定意味着网页必须以黑白设计并且看起来像 90 年代。相反，它只是一个令人愉快和实用的设计，一个合理的网页结构和合适的颜色，每个人都会欣赏。我们让 Web 更易于访问的 11 个技巧部分基于 WCAG 规则，部分根据用户体验设计的一般技巧（即所谓的 UX）进行调整。

1. 书面内容

为了使文本更易于理解，即使对于在捷克人口中占大约 1% 到 2% 的图形不通者来说，遵循几条原则也非常重要。文本应该主要是明确的并且由白话语言书写。所有这些可能成为专家的新词都使文本的易读性及其随后的理解恶化。也应避免使用缩写词，尤其是那些鲜为人知的缩写词。

文本的组织和凝聚力似乎更为重要。合乎逻辑的，不太长的段落，理想情况下不会在行尾完成，而是提供足够长的间隙，应该被认为是理所当然的；因此，读者有一些可以返回的线索和检查点。

当谈到 Web 可访问性时，在 HTML 代码中遵循正确的语义符号也很重要。例如，在插入列表时，需要使用特定的标签 <ul>、<ol>、<li>，并且在特殊文本的情况下，一些适当的标签类型 <strong>、<code>、<abbr> 和 <块引用>。

对于所有用户来说，背景和文字有一个合适的对比度会更令人愉悦。明亮背景上的深色字体是最常见的字体，反之亦然。更清晰的文字既省力又省能源，因为在光线不好的条件下，必须提高显示器的亮度。

2. 标题和标题（H1-H6）

另一个方面是使用标题和标题；它们不仅对更合乎逻辑的文本组织产生巨大影响，而且它们可能有助于盲人更好地导航。大多数阅读设备都提供标题和标题的结构化列表作为文本内容，这显着简化了网站上的文本定位。

此外，它们的使用可能会带来令人愉快的营销奖励，因为由于标题和标题，搜索引擎会找出文章的内容。结果，在搜索时，您可能会在结果中升级，从而增加网络流量。

3. 一个可访问的控件

使用辅助技术浏览网页的残疾人在很多方面受到限制；因此，他们很难控制页面上的一些交互元素。例如，盲人根本不需要使用鼠标，因为几乎不可能指示光标的位置。因此，为了让他们可以访问网络，只使用键盘进行浏览的可能性至关重要。

当应用充分突出显示的元素时，网络上的文本方向也变得更容易（见下图）。高光应提供足够的对比度——不仅仅是柔和的变亮或变暗——尤其不应仅与鼠标移动有关。在 CSS 中实现这个功能只需要几分钟，但对于普通网站访问者来说，文本方向也更加愉快。

阅读设备用户会喜欢跳过单个部分的选项，尤其是在每个站点上重复的部分。网络导航系统可能由大纲、锚点链接（网站上的立足点）和隐藏在网站开头的链接（所谓的跳过链接）组成；最后但同样重要的是，在 HTML 中使用某些元素和角色的网站限制也可能会有所帮助。

轮播或所谓的旋转横幅，通常显示新闻和关键信息，可能意味着潜在的问题。因此，当可以停止当前网站上的横幅时，对于有视力障碍和没有视力障碍的人来说都更实用。

一般来说，有必要遵守可访问性的基本原则——如果您在网站上插入任何特殊元素，请始终确保它对有缺陷的用户来说是易读的，并且可以通过键盘控制，因此可以指定元素的类型、描述和状态以及元素的内容。还要注意指令明确依赖于对某个元素的识别，例如“为了继续，指示所有方块”或“听到声音信号，立即单击按钮”。

4. 音视频

创建视听文本脚本当然需要时间，因此很明显通常没有足够的时间来这样做。但是，如果您坚持使用完全可访问的网络，则在音频和视频的情况下，这是最简单的方法。

此外，成绩单也可能适合有障碍和无障碍的人。因此，他们不会被迫浏览整个播客和视频来查找信息项。最后但并非最不重要的一点是，成绩单可以防止用户潜在的技术问题。

有些视频带有字幕。有必要考虑他们是否真的能够提供足够的信息。如果你选择普通的翻译字幕，你应该确定聋人和听力障碍者能够听到一切，因为翻译字幕很遗憾不显示谁在说话，而且大多不包括非语言的声音，如铃声钟声和炸弹爆炸；结果，观众可能会错过一些重要的信息。

这就是为什么聋人使用所谓的隐藏字幕将角色的声音用颜色分开并且还涉及其他关键声音。显然制作这样的字幕更加困难，但为了完全理解内容，这似乎是必要的。

5. 使用的外部玩家

使网络更具吸引力的一种流行方法是使用来自 YouTube、Soundcloud 和其他类似视听服务器的外部内容。除了播放器代码，建议也上传原始来源的链接，以确保可访问性。经常发生的是，在原始版本中通常有更多功能可以使内容易于访问。其中，可以使用自动生成的字幕。

然而，仍然需要检查插入的播放器是否至少包含基本控件，即播放/暂停，以便使用键盘快捷键控制它。然而，永远不要在外部和/或所有视听媒体中使用自动播放。对于有残疾和没有残疾的人来说，这可能会让人非常不愉快和困惑，特别是对于盲人来说，它会破坏网站中的文本方向。

6. 图片、图表和图表

图片总是需要替代文本或标题。两者都可以用，但文字不要重复，最好互相补全。然而，不仅图片而且机器难以辨认的图表和图像图表都应该在替代文本中包含特定图形元素特征的信息的事实摘要。对于没有替代描述的盲图像按钮和其他图像控制元素可能是一个特殊的复杂问题。在这些时刻，盲人可能会被卡住，因为他们不知道他们应该做什么以及他们有什么选择。

在网络上使用图形验证码时，请用声音替代完成它。有视力障碍的人会欣赏它。贵公司的基本信息，例如名称、联系方式和地址，不应以图像的形式出现，而应以文本的形式出现。一般来说，所有访问者都会感谢能够以文本形式简单快速地复制信息。

7.色彩对比

大约 8% 的男性和 1% 的女性发现很难识别不同深浅的颜色。除非信息表达了某种信息，否则在许多情况下它变得不可访问。例如，原本看起来井井有条的彩色图形，在黑白中可能会显得混乱。在下图中，您可以看到红色和绿色的对比度看起来几乎相同，因此几乎不可能将图例与切片相匹配。

使用黑白和单色屏幕可能代表一个非常相似的问题。因此，在创建类似的图形和图表时，请确保它们在彩色和无色的变化中都易于理解。

8. 其他图形问题

大多数网站都遵守有关网站上按钮和其他元素位置的某些习惯，例如右上角的“登录”、左上角介绍性网站上的单击矢量徽标以及标题中的社交网络链接。遵守这些习俗将使您的网络更易于访问，并将简化所有人的文本导向。

闪烁的元素通常也会对用户造成不适，而不会造成损害。有认知障碍和注意力障碍的人会觉得这种闪光没有吸引力，不会妨碍他们集中注意力。特别是癫痫患者，对于他们来说，它可能会造成严重的癫痫发作威胁，他们会欣赏它的缺席。总而言之，应完全避免闪光元素。

网站上的装饰性动画可能看起来很有趣，但对于有视力障碍和注意力障碍的人来说，这会让人感到困惑，并使网络上的文本定位变得困难。

9.超文本链接

不是很好定义的链接是一个常见的缺陷，可访问性。为残障人士准备的各种阅读设备可以只显示链接，从而忽略其他文本。当使用诸如“阅读更多，更多信息请点击这里”之类的通用文本时，访问者绝对没有机会找出链接指向的位置以及它所关注的内容。

因此，链接的文本应该包含最恰当的描述，说明它会将访问者引导到哪里。另一种选择是添加一个替代描述，该描述清楚地传达有关超文本链接所指内容的信息，从而确保该链接可从上下文中理解。

然而，足够了，这也适用于超文本链接。因此，如果文本太长，搜索变得更加困难。因此，当链接文本从不以相同的字母开头时，主要对阅读设备用户来说更方便；那么返回文本也将更容易。

10. 表格

填写表格需要精确。对于盲人，以及有视觉和认知障碍的人来说，这可能在三个方面很困难；首先，文本框标签，尤其是强制性标签，必须是独特的，并且使用辅助技术可以访问，以便用户能够识别他们到底在写什么。在实践中，HTML Web 代码必须与表单元素绑定，例如编辑字段和复选标记按钮，以及下方的说明。

当涉及到错误消息时，可能会出现另一个问题。如果是主要目的是发送用户机密信息的表单，用户应该可以退出发送该表单；因此，可以提前防止发送错误填写的表格和/或有错误的表格。

11. 文件

在许多文章和说明中，可能会偶然发现不发布 PDF 和/或 DOCX 内容文件的建议，而是直接作为文本发布。但在实践中，这些不应被视为理所当然。相反，网络可能会变得更加难以访问。因此，最好将信息作为文件下载，并且在 pdf 中时，始终确保它也包含文本部分。此外，当前的 Word 和 Acrobat Reader 版本具有集成的访问控制功能。