当前位置:首页 > 营销观察 > 正文

2020 年回顾:如何使用 accessiBe 制作符合 ADA 标准的网站

2020 年回顾:如何使用 accessiBe 制作符合 ADA 标准的网站

所有网站都必须可供每位访问者完全访问。 这是法律,这是正确的做法。 不幸的是,这是一个很大的挑战。 如果您有资源,则可以聘请无障碍专家。 他们会进行审核并手动升级您网站...

所有网站都必须可供每位访问者完全访问。 这是法律,这是正确的做法。

不幸的是,这是一个很大的挑战。 如果您有资源,则可以聘请无障碍专家。

他们会进行审核并手动升级您网站上的每个页面,以符合所有各种国际法律。

但大多数网站都不是静态的。 每次添加新内容(包括新产品)时,都有可能导致新的可访问性问题。

缺乏可访问性是否会影响您的销售?

目录

说到产品,电子商务网站所有者尤其应该积极主动地让每个人都可以访问商店网站,否则您将失去销售额!

根据美国研究所 (AIR) 的“隐藏的市场:工作年龄的残疾成年人的购买力”,仅在美国,2018 年工作年龄的残疾成年人的可支配收入就超过 210 亿美元。

这比西班牙裔和非裔美国人的消费能力加起来还多。

如何使网站可访问

使任何网站完全可访问的最佳方法是通过:

  1. 由具有各种访问挑战的人员进行手动测试。
  2. 让专家解决所有发现的问题。
  3. 掌握世界各地法律的变化并加以实施。
  4. 使用网站无障碍软件,如 accessiBe。

这是一项艰巨的任务。 大多数网站所有者没有资源来实现这一目标。 但我们应该朝这个方向努力。

为此,我们首先通过改进和培训可以以最佳实践在我们网站上发布的任何人来做到这一点。

例如:

  • 始终包含描述页面上每个图像(包括所有按钮)的替代文本 (alt-text)。
  • 确保我们的颜色选择具有足够的对比度。
  • 选择合适的字体和文字大小。

但是然后呢? 我们的选择是:

  1. 成为可访问性专家并培训每个人都可以在我们的网站上发布。
  2. 聘请无障碍专家使我们现有的内容符合最佳实践,并让他们定期更新任何新内容。
  3. 使用辅助功能覆盖应用程序。

我们必须更好地了解什么是网络可访问性以及存在哪些标准和法律要求。

什么是 Web 可访问性?

根据维基百科:

Web 可访问性是一种包容性做法,可确保没有障碍阻止身体残疾、情境残疾以及社会经济对带宽和速度的限制的人与万维网上的网站进行交互或访问。 正确设计、开发和编辑站点后,通常所有用户都可以平等地访问信息和功能。 “

使网站可访问的目标是显而易见的。 但让您的网站完全合规并非如此。

事实上,对于法律要求的标准没有明确的共识。 但WCAG 2.1 AA 却是他最广为接受的。

什么是 WCAG,为什么它很重要?

Web 内容可访问性指南 (WCAG) 是通常被引用的标准。 进一步来说:

  • 无障碍标准 ADA,第 508 节,EN 301549
  • Web 内容可访问性指南 (WCAG) 2.1 AA
    • WCAG 2.1 AA(经常在法律问题中引用)
    • WCAG 2.1 AAA(更高标准)

法律体系尚未最终确定网站所有者需要满足哪些法律标准。

A11Y是什么?

在进行研究时,请注意“a11y”通常用作可访问性的缩写。

这是因为 A11Y 项目是一项社区驱动的努力,旨在使数字可访问性更容易。

可访问性的四大类别

要解决的四个主要可访问性类别是:

  • 视觉的
  • 听觉
  • 马达
  • 认知的

观看下一节中的视频。 它更好地解释了这些主要问题中的前三个。

如何设计可访问的 Web 站点

该视频展示了如何设计 Web 可访问性的基础知识:

视频亮点:

  • 04:15 颜色对比度和文本字体大小
  • 06:17 不要单独使用颜色来区分 - 添加文本
  • 07:27 设计焦点状态(使用键盘上的 Tab 键导航)
  • 08:27 表单标签(不要在表单字段中只使用占位符文本)
  • 09:38 图像的替代标签(也称为替代属性)
  • 10:27 必须有一个填充 Alt Tag/Attribution 字段的过程,并且 Web 开发人员需要教育网站所有者使用它
  • 10:50 正确开发(标记、导航)
  • 11:35 关注法律责任和避免诉讼

真的没有“法律证明”这样的东西。 诉讼总是有风险的。 但是,努力遵守法规的网站所有者更容易为自己辩护。

建立和维护一个网站,让世界上的每个人都可以 100% 随时访问是不可能的。

不过,我们应该尽最大努力。 开发人员和站点所有者应该使用上述提示来构建更易于访问的站点。

附加无障碍标准

以上仅涵盖基础知识。 涉及的内容要多得多。 例如,从技术上讲,如果我们在我们的内容中包含一个视频,该视频应该有字幕。

这让我想知道有多少种语言的字幕? 希望我们只需要提供编写网站的语言。

但这确实大大降低了网站所有者可以提供的价值。 我们不拥有我们分享的许多视频。

但是,如果您可以下载它们,则有一个免费工具可以为您不拥有的视频添加字幕。

我们这些互联网接入不足以下载/上传视频的人必须让其他人为我们做这件事。

Web Accessibility Perspective 视频涵盖了十个网站可访问性标准:

视频亮点:

  • 00:03 视频字幕
  • 00:40 具有良好对比度的颜色
  • 01:33 语音识别(需要在您的网站上进行额外编码)
  • 02:30 文字转语音
  • 03:12 清晰的布局和设计(清晰的标题、导航栏、一致的样式)
  • 04:03 通知和反馈(以及更容易理解的错误消息)
  • 04:58 大链接、按钮和控件
  • 05:30 可定制的文本
  • 06:06 可理解的内容
  • 06:51 键盘兼容性

虽然该视频包含 10 个网络可访问性主题,但我们知道并非 WCAG 标准中提到的所有主题。 那么网站所有者该怎么做呢?

网站的无障碍功能是什么?

注意到 Microsoft 提供的 Windows 可访问性功能让我们了解了实现这一目标的复杂程度。

这就是 accessiBe 之类的解决方案的用武之地。它是提供附加辅助功能的最快、最简单的解决方案。

我在下面的部分中解释了许多功能。 您还可以在此处阅读有关 G2 的许多 accessiBe 评论。

为什么要查看 accessiBe?

我印象深刻的是,accessiBe 与残障人士合作了 18 个月,在开发他们的平台时提供反馈。

需要无障碍功能的人最有资格确定他们是否从中受益。

通过让他们在许多网站上测试解决方案,他们可以确定使用各种类型网站的其他挑战。

然后 accessiBe 通过他们的更新解决了这些额外的问题。

什么是accessiBe?

为任何网站提供无障碍功能的最快方法是使用像 accessiBe 这样的网络无障碍平台。

他们使用在后台运行的 AI 技术来分析您的网站并通过其界面提供可访问的版本。

您只需添加一行代码,accessiBe 就会在 48 小时内为您的访问者提供您网站的兼容版本。

现在是获取屏幕截图的好时机,因为他们刚刚宣布推出其 3.0 版,以展示其 AI 驱动平台的功能。

还有关于 accessiBe 的其他信息,包括在 ProductHunt 上与他们的创始人进行的问答。

它们是 2020 年 9 月 10 日当天的#1 产品:

accessiBe 的工作原理

有许多解决方案可以使网站可访问。 我想了解它们是如何工作的,所以让我们深入了解 accessiBe 的工作原理。

他们的平台由两个主要部分组成:

  1. 后台运行的AI应用程序
  2. 网站上的所有访问者都可以看到无障碍界面

AI 应用程序处理大约 70% 的必要工作。 人工智能“使用上下文理解过程扫描和分析您网站上的每个元素”。

它先了解每个元素的功能和用途,然后才能使用辅助功能界面对其进行访问。

该界面提供了一个叠加层,使您的现有站点更易于访问。 它不会更改您网站上的代码。

它确实更改了访问者设备上显示的代码。 它可以根据最佳实践添加可访问的富 Internet 应用程序 (ARIA) 属性。

该视频是了解 accessiBe 工作原理的最快方式:

您现有的网站没有任何变化。 但是任何人都可以打开辅助功能配置文件或功能,然后进一步个性化它们。

accessiBe 支持哪些平台?

所有平台都将与 accessiBe 一起使用。 它可以在任何建站平台或 CMS上运行,包括:

  • WordPress
  • 维克斯
  • 威利
  • Joomla
  • 方空间
  • 混凝土 5

电子商务平台绝对可以使用 accessiBe 来增加需要其功能才能购物的人的销售额。

它目前正在使用所有这些的商店运行:

  • Shopify
  • 大商务
  • 卷曲
  • Magento

即使没有提到您的 CMS 或平台,您仍然应该可以使用 accessiBe。

如何安装accessiBe

使用 accessiBe 的最佳部分可能是它的安装非常容易。 您只需复制并粘贴一行代码即可。

这与您过去可能用于安装分析或确认网站所有权的方法相同。

你碰巧在 WordPress 上运行 Genesis 吗? 您可以使用如何向 WP 博客创世纪主题添加分析或验证代码。

如果 ISA 符号(坐在轮椅上的人的蓝色和白色图像)出现在您的网站上,您就会知道它有效。

默认位置是右下角。 但是,如果您愿意,您可以更改设置以将其移动到左下角。

他们的 AI 需要 48 小时或更短的时间来分析您的网站并使其可访问。 然后它会每 24 小时再次运行一次以保持这种状态。

什么是辅助功能设置?

当您运行像 accessiBe 这样的网络无障碍解决方案时,有许多无障碍设置可用。

单击网站每个页面左下角或右下角的图标即可访问它们。

在下图中,您可以看到国际通行标志 (ISA),也称为(国际)轮椅标志。

ISA 符号是蓝色背景上坐在轮椅上的人的图像。 单击此图标可打开 accessiBe 辅助功能调整。

他们最近宣布了 accessiBe 3.0 的重大更新,其中对可视化辅助功能界面进行了许多升级。

本文中的所有图片均来自 accessBe 3.0 版(2020 年 9 月)。

当访问者单击 ISA 轮椅图标时,会弹出一个窗口,他们可以在其中选择 14 种首选界面语言中的任何一种。

accessiBe 3.0 中的辅助功能调整

访问者可以选择 6 个预先配置的配置文件之一或向下滚动以单独调整功能。

正如您在上图中所看到的,他们为各种残疾提供了六个配置文件:

  • 癫痫安全简介
    • 消除闪光并减少颜色
    • 停止 GIF
  • 视障人士资料
    • 用更饱和和对比鲜明的颜色增强网站的视觉效果
    • 放大 100%
  • 认知障碍概况
    • 帮助阅读和集中注意力
    • 概述重要元素,如标题、链接和按钮
    • 阅读指南提供了一条粗线,跟随光标一次阅读一行
    • 内置词典
  • 多动症友好简介
    • 更多的注意力和更少的干扰
    • 启用阅读蒙版和更好的颜色对比度
    • 阅读掩码使除光标所在位置以外的所有内容变灰
  • 盲人用户(屏幕阅读器)
    • 通过屏幕阅读器使用网站
    • 当他们的屏幕阅读器被识别时自动欢迎读者并通过点击他们的关键字上的“alt + 1”邀请他们打开调整
  • 键盘导航(电机)
    • 通过键盘使用网站
    • 当他们按下键盘上的 Tab 键并打开调整按钮时自动打开
    • 除了使用选项卡进行导航外,还有屏幕虚拟键盘

盲人用户和键盘导航配置文件是相互关联的,因此如果其中一个打开,另一个也会打开。

请注意,accessiBe 将自动为使用屏幕阅读器的访问者或通过单击 Tab 键浏览您的站点的访问者激活。

这是一个解释上述每个选项的视频:

访问者可以激活任何配置文件,也可以手动打开和关闭下面详述的每个其他可用选项。

这些选项并不相互排斥; 游客可以根据自己的喜好混合搭配。

内容调整(accessiBe 3.0)

内容很容易调整,以获得最佳的观看体验。 调整包括:

  • 放大或缩小内容
  • 切换到更易读的字体
  • 突出显示标题和链接
  • 放大文本的特定区域
  • 调整字体大小、行高和字母间距
  • 更改页面以居中、左对齐或右对齐

单击任何活动选项将它们全部关闭。

颜色调整(accessiBe 3.0)

即使是我们这些没有视力问题的人,也会受到过多蓝光或非常明亮的背景的影响。

就个人而言,新的 Twitter 和 Facebook 设计背景上到处都是亮白色,让我无法忍受。

它们会导致眼睛疲劳并最终导致头痛。 但是想象一下,如果您在每个站点上一直都遇到挑战?

这就是颜色调整的用武之地。根据一个人的视觉挑战,他们需要能够调整颜色以使每个站点更易于阅读。

accessiBe 提供了在明暗对比、高饱和度或低饱和度或切换到单色(黑白)之间切换的能力。

背景、标题文本或所有文本都可以有选择地更改为不同的颜色,以便每个人都更容易看到。

这对于完全无法区分特定颜色的色盲患者尤其有用。

方向调整(accessiBe 3.0)

在 accessiBe 的方向调整下,您的站点访问者可以:

  • 显示虚拟键盘
  • 静音以关闭网站上的所有音频
  • 隐藏图像
  • 停止动画
  • 打开“有用链接”跳转到特定页面
  • 更改为大的白色或大的黑色光标
  • 使用阅读指南一次关注光标所在的一行
  • 打开突出显示悬停以在鼠标指向的部分周围放置框
  • 通过使用阅读蒙版将所有内容灰显,除了他们正在阅读的地方,更好地集中注意力

accessiBe Highlight Hover 功能会在页面的特定区域周围放置一个框,以便更轻松地分辨您的位置。

这是一张显示 accessiBe Highlight Hover 功能的图像:

“注册!”周围的橙色框按钮和页面的整个部分是由 accessiBe Highlight Hover 功能添加的。

accessiBe 3.0 盲人用户和键盘导航

盲人和使用屏幕阅读器的访问者会收到一条声音消息,邀请他们通过单击关键字上的“alt + 1”来打开调整。

此配置文件使您的网站与 JAWS、NVDA、VoiceOver 和 TalkBack 等屏幕阅读器兼容。

通过使用键盘选项卡、shift + 选项卡或输入键表示他们可能有运动障碍的访客会自动看到键盘导航选项。

键盘用户还可以使用快捷键跳转到特定元素,例如:

  • “M”代表菜单
  • “H”表示标题
  • “F”代表表格
  • “B”代表按钮
  • “G”代表图形

accessiBe 可访问性声明

“辅助功能调整”弹出窗口顶部有一个按钮可用于访问“辅助功能声明”。

该语句出现在该弹出窗口中。 这是它所说的一部分:

本声明涵盖的部分内容包括:

  • 屏幕阅读器优化
  • 键盘导航优化
  • 残疾概况(上面有详细解释)
  • 浏览器和辅助技术兼容性
  • 其他 UI、设计和可读性调整包括:
    • 字体调整
    • 颜色调整
    • 动画(停止视频、GIF 和 CSS 闪烁过渡)
    • 内容突出显示(如上解释)
    • 音频静音(立即使整个网站静音)
    • 附加功能,例如
      • 更改光标颜色和大小
      • 使用打印模式
      • 启用虚拟键盘
      • 许多其他功能
  • 浏览器和辅助技术兼容性
  • 用于寻求帮助或请求其他功能的电子邮件

Web 可访问性测试工具

网络可访问性测试工具比我在这篇文章中写的要多。 W3.org 在这里维护了一个列表。

手动 Web 可访问性专家依靠这些工具来审核站点。 他们中的许多人反对使用 accessiBe 等应用程序。

不过,他们使用的一个论点是,运行 accessiBe 的站点无法通过这些测试工具。 但这不一定是一个有效的论点。

这是为什么。 该工具通过感应屏幕阅读设备或使用 Tab 键来激活,这表明访问者正在使用键盘而不是鼠标进行导航。

但是,如果进行测试的人没有激活该工具,并且没有任何东西可以触发它打开,则此类测试将失败。

使用叠加层的利弊

支持使用无障碍覆盖的主要论点是它速度快(需要 24-48 小时)且相对便宜。

有许多人反对使用它们。 特别是,以无障碍调解为生的人提出了一些论点。

但是,我确实想知道他们的测试是否是在覆盖激活的情况下完成的。 如果不是,那么他们的结果是无效的。

最明显的挑战是:

  • 如果用户禁用了 javascript(对于具有可访问性需求的人来说很常见),则覆盖工具根本不起作用。
  • 覆盖可能与访问者已经使用的辅助工具冲突。

但是,如果当前无法访问某个站点,则使用叠加层将改善使用它的人的体验。

有些人认为 accessiBe 对他们有益:

最好手动修复和防止所有可能的问题。 这需要时间和资源。

与此同时,为那些希望使用它的人提供可访问性覆盖将有利于您的访问者。

你该怎么办?

在一个完美的世界中,地球上的每个人都可以完全访问每个网站,无论他们面临何种挑战。

我们并不生活在那个理想化的世界里。 因此,我们应该努力做出最好的决定,并据此采取行动。

Web 可访问性设计与移动设备设计有很多共同之处。 一定要同时解决这两个问题。

意识到只有那些有可访问性挑战的人才能真正确认您的网站是否完全可访问。

希望他们会善意地让您知道,而不仅仅是起诉您以期获得丰厚的发薪日。

法律保护 accessiBe Offers

许多公司正在安装 accessiBe,要么是因为他们已经得到服务,要么是希望防止未来的法律挑战。

accessiBe 为此提供的服务包括:

  • accessiBe 合规状态可访问性声明(对您网站的用户可见)。
  • 每 24 小时重新扫描一次您的网站,并使任何新的或更改的内容合规。
  • 每月通过电子邮件发送可访问性合规性审计。
  • 诉讼支持包。

根据accessiBe,他们的应用程序:

  • 是否符合 ADA、AODA、EEA、Section 508 和 IS5568。
  • 符合 AA 到 AAA 级成功标准的 WCAG(Web 内容可访问性指南)2.1 版。
  • 遵守所有主要的数据保护法规,包括 CCPA 和 GDPR。
  • 不收集任何可识别或个人数据,只收集结构和行为。

注意:我不是律师或律师,这不是法律建议。 在依赖任何产品进行保护之前,请务必仔细阅读细则并咨询有执照的律师。

accessiBe 的费用是多少?

所有 accessiBe 计划都包括此处及其网站上提到的所有内容。

定价取决于您的网站有多大,起价为每月 49 美元或每年 490 美元。

他们提供所有功能的 7 天免费试用,无需信用卡。

如果您想尝试看看界面是如何工作的,请访问他们的网站或 SmallBizTrends.com(左下角的图标)或 BizSugar.com(右下角的图标)。

,

最新文章