现代营销人员数字无障碍获取的10条原则

当我们谈到营销人员的数字可访问性时，我们所谈论的是有意创造一种可以被尽可能多的人访问的体验。

设计数字可访问性意味着很多事情。 这意味着为有感觉或认知障碍的个人进行设计。 这意味着为有身体限制的人设计。 这意味着要为依赖于自适应和辅助技术（例如屏幕阅读器或放大镜）的用户设计以查看数字内容。

关键是从一开始就将可访问性构建到您的数字体验中，而不是像事后想法那样将其无处不在。 下面，我概述了创建数字营销材料时要考虑的一些关键辅助功能原则。

开发人员原则

1.应用标准的HTML语义

无障碍设计始于标准HTML语义。 标准HTML使屏幕阅读器可以宣布页面上的元素，以便用户知道如何与内容进行交互。 当使用没有语义信息的HTML标签（例如<div>和<span>进行视觉样式设置）时，浏览器将按照开发人员的意图显示元素，但不幸的是，这可能对用户没有太大帮助。

请记住，用户使用屏幕阅读器的体验可能会有很大差异。 例如，使用<div class =“ h1”>语义简介</ div>或自定义编码覆盖默认浏览器样式将产生类似于标头的内容。 但是，屏幕阅读器不会理解或宣布该元素为标题。

重要要点

• 尽可能使用标准HTML，以便屏幕阅读器在朗读时将保持其结构和内容。
• 使用结构元素对元素进行分组并在页面上创建单独的区域，例如页眉，导航，主页面和页脚。 屏幕阅读器会识别这些结构元素，并向用户宣布它们，并允许在元素之间进行其他导航。

2.启用键盘导航

所有网站都应该可以通过键盘访问，因为并非所有消费者都可以使用鼠标或查看屏幕。 实际上，根据WebAIM Low Vision，有60.4％的调查受访者始终或经常使用键盘进行网页导航。 另外，永久性或暂时性失去双手或良好的肌肉控制的个人也可以使用键盘或经过改良的键盘进行导航。

为了使键盘导航正常工作，用户必须能够通过从焦点项目移至焦点项目来浏览页面。 用户通常遵循视觉流程，从左到右，从上到下，从标题到主导航，再到页面导航，最后到页脚。 使用键盘进行导航时，按Enter键可激活焦点链接，而空格键将激活焦点表单元素。 标签有助于元素之间的导航。 Ë景观允许用户关闭的元素。

知道这一点，考虑用户可能采取的行动很重要。 经验法则是，如果可以使用鼠标与可聚焦元素进行交互，请确保可以使用键盘进行交互。 这些元素可能包括链接，按钮，表单字段或日历日期选择器。

重要要点

• 确保用户可以使用键盘导航到网站的所有交互组件。 列出网站的所有可聚焦元素，并创建易于使用的聚焦指示符。
• 结构基础源代码以正确排序内容和导航。 使用CSS控制元素的外观。
• 如果下拉列表中的链接过多，则允许用户绕过导航窗口。

3.使用属性

当涉及到URL的文本和描述的链接时，屏幕阅读器可以从链接中跳到文章中的链接。 如果使用诸如“单击此处”或“阅读更多”之类的模糊链接文本，则对于在屏幕阅读器上进行解释的人员来说，它提供的上下文或含义很少。

对链接文本进行具体描述，并包括描述链接所链接内容的有意义的短语。 而不是“与我们联系”，而是使用更具体的语言，例如“与我们的销售团队联系”。 对于图像和视频，请分配ALT属性并使用描述性文件名。

重要要点

• 在您的链接（如“单击此处”，“此处”和“阅读更多”）中添加无关紧要的单词。 “可访问性的十项原则”比“单击此处阅读可访问性的十项原则”要好。
• 优化文件名和URL名称，并为视频内容使用开字幕和闭字幕。 考虑添加准确的视频成绩单。

4.使用ARIA标签属性

在某些情况下，您网站上的按钮或其他交互式元素可能未包含辅助技术所需的所有信息。 ARIA标签属性使辅助技术可以覆盖HTML标签，以允许网站所有者为页面上的元素提供其他上下文。

在以下链接示例中，屏幕阅读器将宣布“ Bing Ads。 链接。”

<a href=”…”> Bing Ads </a>

但是，如果按钮本身是号召性用语按钮，则网站所有者可以使用ARIA标签来允许屏幕阅读器说出按钮上可见的号召性用语。 在此示例中，屏幕阅读器将宣布“注册Bing Ads帐户。 链接。”

<a href=”…”” aria-label=”注册 Bing Ads 帐户”> Bing Ads </A>

重点介绍

• 在表单和号召性用语等元素中使用ARIA标签属性，以定义屏幕阅读器应大声阅读的可见文本。

5.正确标记和格式化表格

确保表单直观且逻辑合理，并带有明确标识的说明和标签。 为确保用户为所有表单加载正确的键盘格式，请使用始终可见的标签，并避免将占位符文本放在表单提示中。

从格式的角度来看，请利用文本字段和下拉菜单的边框，并将表单置于单列格式。 另外，使用HTML输入类型，因此用户不必在虚拟键盘的类型之间进行切换。 例如，电话号码字段应调高数字键盘和常规键盘格式。

重要要点

• 在表单中使用JavaScript时要小心，这会使使用键盘完成表单变得困难。

6.将表用于数据

联机表有两种基本用途：具有显示表格数据的行标题和列标题的数据表以及用于页面布局的表。 HTML表的预期用途是用于表格数据。 布局表通常没有逻辑标题或可映射到表中单元格的信息，因此屏幕阅读器必须猜测表的用途。 因此，使用CSS进行布局和保留数据表非常重要。 使用CSS可以生成更简洁的HTML代码。

重要要点

• 对数据表使用适当的标记，并始终包括表头。 始终在表上选择CSS进行页面布局。

作家和平面设计师的原则

7.以结构化的方式编写内容

内容的结构和流向对于视力障碍并依靠屏幕阅读器的个人而言尤其重要。 对于有认知和学习障碍的人们以及在移动屏幕上浏览内容的任何人来说，这一点也很重要。 在撰写无障碍内容时，请召集内心的高中英语老师，并在每个部分的描述性标题下清晰地组织内容。

重要要点

• 使文本易于阅读和逻辑结构。 确保对标题段落，列表和引号使用语义标记。

8.左对齐

根据UX Movement，文本对齐会影响可读性。 居中的文本使查看者更加努力，因为没有左笔直的边缘，当继续到下一行文本时，眼睛就无法遵循一致的路径。 将左对齐的文本用作直边，使眼睛更容易扫描内容并查找书写结构中的断点。

重要要点

• 仅使用居中的文字标题和短文本（例如引号和标注）。 避免混合使用文本对齐方式。

9.明智地选择字体

我喜欢漂亮的艺术字体。 但是事实是某些字体比其他字体更易于阅读。 这就是为什么使用基本字体很重要的原因。 对于有视觉或认知障碍的人，甚至是暂时的视觉障碍，如在明亮的阳光下阅读屏幕，Sans-serif字体更容易阅读。

大小也很重要。 避免小于12的字体大小，并选择绝对单位（像素或点）与相对单位（％）来定义字体大小。 限制字体数量以使内容更易于阅读。 不要依靠字体的外观（颜色，形状或位置）来传达文本的含义。 最后，避免闪烁或移动文本-任何用户都不想在屏幕上追逐消息。

重要要点

• 选择带有简单，无衬线结尾的简单字体，以使眼睛更容易识别字母。
• 限制使用字体变化和大小。

10.使色彩发挥作用

颜色的应用也会影响可访问性。 根据2018年通过WebAIM对低视力用户的调查，有75％的受访者报告了多种视觉障碍，包括61％的对光或眩光敏感和46％的对对比度敏感。

考虑一下您的配色方案和颜色​​的对比度，以确保可以容易地将文本与背景**分开。 Web内容可访问性指南（WCAG）建议对普通文本使用4.5：1的对比度。 从角度来看，白色背景上的黑色文本为21：1，而白色背景上的灰色文本为4.5：1。

视觉障碍者可能无法单独使用颜色来传达信息。 例如，网站通常使用绿色表示正向，使用红色表示负向，这对于有视力障碍的人可能很难辨认。 相反，请考虑将形状或图标与颜色组合在一起。

重要要点

• 确保您的颜色具有足够的对比度，并将颜色与图形或符号结合使用以帮助传达含义。

可访问性设计不需要复杂或昂贵。 它只需要进行规划并有意识地应用无障碍原则，以确保每个人都拥有更加包容的体验。

本文中表达的观点是来宾作者的观点，不一定是Search Engine Land。 工作人员作者在此处列出。