RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
你可能遇到了下面的问题
关闭右侧工具栏
使您的网站,应用程序可访问:前端开发人员指南
  • 作者:佚名
  • 发表时间:2020-03-26 12:56
  • 来源:互联网

这篇文章将定义可访问性的含义,并将讨论前端开发人员在提供可访问性方面需要注意哪些类型的问题。

作为前端开发人员,我们的工作是提供看起来不错的视觉信息,并为用户提供帮助他们快速理解内容的线索。即使是静态的纯文本网页也不仅仅是一组单词。该页面的标题显示在顶部。标题可以是粗体或大字体。在文本正文中,单词被分为以句点结尾的句子,相关句子被分组为段落。句子中的某些单词可以用粗体,下划线或斜体来强调。这些例子几乎没有抓住可视网页设计的许多微小细节的表面。

这些组件看似基本且不重要,但对于许多人来说,访问和阅读网页上的文本很困难。例如,有视力障碍的人经常难以阅读文本。当我们想到视力障碍时,我们大多数人会自动描绘盲人,但还有许多其他类型的视力障碍需要考虑,包括色盲,视力低下,退行性疾病引起的视力问题等。残疾范围我们的用户可能已远远超出视觉类别,包括听力,认知,运动和其他类型的问题。因此,确保您的网站或应用程序可访问性至关重要。

由于前端开发人员处理网页和应用程序的可视化表示和功能,因此我们需要了解并解决残疾人和残障人士存在的可访问性问题。虽然我们都有道德要求尽力使网站和应用程序可访问,但许多国家的前端开发人员也有法律义务这样做。

这篇文章将定义可访问性的含义,并将讨论前端开发人员在提供可访问性方面需要注意哪些类型的问题。我们还将回顾一些可用的方法,工具和资源来解决这些问题。

万维网是为了在欧洲核子研究中心的原子物理学家之间共享研究而创建的。随着网络的发展,创建万维网联盟(WC3)来管理它。WC3的使命表明,网络的创建是为了使人类交流能够使所有人受益,无论他们住在哪里或者他们可能拥有什么样的身体和/或心理能力。

Web可访问性确保身体和非身体残疾人员可以平等访问Web。它可以帮助听觉,认知,神经,物理,语言或视觉功能受损的人感知,理解,导航,互动并为互联网做出贡献。为了帮助Web开发人员和设计人员使他们的页面和应用程序可访问,WC3启动了Web可访问性计划(WAI),该计划提供了向残疾人提供Web的指南。提供可访问性还有助于其他群体,例如移动技术的用户,老年人,有临时残疾的人(例如,因身体事故而受伤的人),以及某些地点和带宽有限的国家的人。

除了我们帮助人类同胞的基本义务之外,还有提供平等无障碍的实际理由。无论我们为哪种类型的组织工作,无论是商业组织,非营利组织,政府组织等,我们都需要适应所有用户和客户。如果我们了解用户需要什么并提供满足这些需求的方法,任何人,无论其物理或其他限制,都可以购买我们的产品并使用我们的服务。

随着互联网的覆盖范围扩展到收入有限的个人和欠发达国家,如果我们不让他们的产品可以访问,我们就有可能失去大量的潜在客户。根据世界卫生组织(世卫组织)的统计,全世界七分之一的人口中有一人是残疾人或残障人士。因此,如果我们未能满足这一人口的需求,我们就错过了大约10亿潜在消费者。

在某些国家/地区,法律要求前端开发人员提供辅助功能。世界各地的许多政府都采用了WC3的Web内容可访问性指南(WCAG)2.0。WCAG 2.0提供了实施解决方案的指南,但它与任何特定技术无关。联合国和地方倡议也使用WCAG 2.0作为其无障碍立法的基础。目前拥有管理网络无障碍的法律的国家包括澳大利亚,巴西,以色列,英国,美国和欧盟成员国。

由于我们在这篇文章中的篇幅有限,我们将专注于视力和认知障碍,以便我们提供有关如何提供网络辅助功能的具体示例。

容纳这些用户的最简单方法之一是提供良好的页面语义。语义是页面的元素和结构,赋予人类读者以意义。通过以正确的顺序应用正确的HTML元素来创建页面的语义(例如,以正确的顺序使用页面标题H1和H2)。您还可以使用项目符号和编号列表来区分不同类型的内容。页面语义很重要,因为辅助阅读技术(如屏幕阅读器)会使用它们来处理页面并将其大声朗读给有视力障碍的人。

页面语义对于帮助患有认知障碍的人也很重要。例如,患有阅读障碍的人可以看到文字和图片,但由于难以处理诸如字母和词序之类的上下文信息,他们难以从原始的视觉输入中提取意义。

有多种方法可以为残疾和残障用户提供信息。为了帮助视力低下和阅读障碍的人,您可以使用高对比度的调色板。您可以通过使用深色(如黑色)作为背景颜色和亮白色(如白色或黄色)作为前景文本来实现此对比度。

作为前端开发人员,我们有能力实现平等可访问性。您可以使用许多工具来构建和测试Web可访问性。我们将在下面讨论一些最好的工具。

Angular,React和Vue框架都为Accessible Rich Internet Applications(ARIA)工具包提供支持。

ARIA是一个WIA平台,可以标准化开发人员如何构建可通过Web访问的应用程序并为残障人士提供内容。它为辅助技术提供所需的功能(例如,为具有有限/受损电机功能的人控制输入设备的装置和为有视力障碍的人控制屏幕阅读器)。

ARIA可以用作屏幕阅读器或输入设备的Web组件状态的指示符。在Web应用程序中,组件可视地指示其当前状态。如果组件的状态发生变化,则对象的表示会发生变化。例如,复选框通过显示复选标记指示值为true,将复选框留空则显示为false。为了支持辅助技术,需要额外的语义信息,以便可以将组件的状态呈现给用户。

要提供此信息,您可以将ARIA检查的标签添加到组件。如果页面被屏幕阅读器读取,它将使用标签通知用户是否选中了该框。如果页面由移动受限的人使用,则可以通过触觉反馈来指示组件状态改变。

虽然ARIA可以帮助您识别组件并向用户提供状态信息,但它没有任何内置的支持来浏览网页。在这种情况下,导航页面指的是两件事:在页面组件之间移动并指示它们应该被使用的顺序。例如,如果网站要求用户更改其密码,则会要求他们在一个文本框中键入密码,将其重新键入第二个文本框,然后按“提交”按钮。完成每个步骤后,应用程序中的视觉提示会告诉用户下一步该做什么以及放置所需输入的位置。对于无法使用传统输入设备的用户,很难在正确的位置输入信息并以正确的顺序导航到下一个组件。

Ally.js是一个图书馆,它使移动受限和视力有限的用户能够浏览网页。它通过提供一个可访问性树来实现这一点,该树显示页面的结构并指示具有语义重要性的任何对象和组件。辅助功能树定义了网页的顺序导航聚焦顺序,该顺序是一个列表,用于确定通过输入设备访问组件的顺序。

有许多可用于测试Web可访问性的工具,但测试通常涉及枯燥和重复的任务。因此,有许多工具和框架可用于自动化功能,回归和可视化测试。可以使用相同的方法和工具来测试可访问性。这个工作的最佳工具是ax平台,它是一个开源项目,提供可访问性测试的断言,并与大量测试和CI系统集成。

我们都同意,无论他们有什么心理或身体限制,每个人都应该有平等的网络访问权限。有明确的道德,经济和法律原因使网络可访问,并且还有可用的指南,技术和技术可以帮助前端开发人员实现这一目标。

借助我们可以使用的众多工具,创建可访问的网页和应用程序从未如此简单。辅助功能支持通过ARIA为主要平台提供给前端开发人员。如果您需要所选框架未提供的额外功能,可以使用ally.js. 您甚至可以使用ax平台进行自动化测试,以测试您的应用程序的Web可访问性。通过同理心,理解和适当的工具,前端开发人员有能力和责任使所有人都可以访问Web。