可访问性的值

查尔斯麦基巴金 经过 查尔斯麦基巴金  |  2015年12月28日

如果我在那里告诉你网站设计师,有些人可能会访问您的网站,不关心它看起来像什么?

视觉受损人员出于同样的原因导航网站,以查找信息,使用基于Web的应用程序来商店和执行Myriad的重要任务。但是视障人士在设计和建立网站时,我们需要不同地体验网络,我们需要对他们的需求敏感。

根据美国人口普查局和U.N和世界银行超过4700万个美国人,全球高达6.5亿人,有某种残疾。您设计的站点的每个访问者都需要能够找到他们正在寻找的信息,并执行他们打算执行的任务,无论网页或应用程序看起来如何。进入创建网页或应用程序的许多不同因素可能会影响可访问性。

你拿着蓝丸 - 故事结束,你醒来,在你的床上醒来,相信无论你想相信什么。你拿走了 红色的 丸 - 你留在仙境中,我向你展示了兔子洞的深度。 - 矩阵

你准备好爬行兔子持有我吗?我们需要潜入网页的技术方面。 HTML是网页的骨架,而CSS,JavaScript和图像增强HTML。常常视力障碍的人误解了所有这些增强功能。虽然可访问性主要是开发人员任务,但有时保护或增强可访问性所需的技术要求将影响本网站的外观。这意味着设计,复制,用户体验和开发都需要协作以确保导航控件,表单,按钮,标题,按钮,链接等可访问。

设计,复制,用户体验和开发一切都需要协作以确保可以访问导航控制,表单,按钮,标题,按钮,链接等

盲人,视力障碍,文盲或学习残疾人的人使用辅助技术来浏览互联网。香港跑狗图阅读器是网络中最常见的辅助技术,这些软件程序尝试解释网页上显示的内容并将其传送给用户,通常通过将文本转换为语音但有时通过盲文输出设备。香港跑狗图放大镜也经常与香港跑狗图读取器一起使用。通常,香港跑狗图阅读器将尝试将HTML从HTML文件的顶部解析为底部并向用户讲述相关元素。理想情况下,香港跑狗图阅读器将允许用户成功移动虚拟光标,以填写表单字段,请单击按钮并从下拉菜单和其他控件进行选择。

为了彻底测试以进行可访问性,您需要确保网站或应用程序在许多可用的香港跑狗图读取器中执行良好。每个平台上有几个流行的免费和/或开源香港跑狗图读者,包括 , 和 NVDA。 Microsoft用户可以使用NVDA,而Apple Computers和iOS设备则配有 声音 它可以放大键盘控件和读取香港跑狗图内容,并为UNIX设备提供 orca.。 Chrome浏览器有两个辅助技术插件, Chromevox. 用于香港跑狗图阅读和 Chromevis. for magnification.

当香港跑狗图阅读器的虚拟光标被捕获以设计不良或跳过一个重要的控制或重要的文本信息时,大多数Web可访问性问题都会出现。验证网站确实可用类似于浏览器测试,因为每个香港跑狗图阅读器都有不同的要求和限制。这就是了解每个香港跑狗图读者的行为很重要的原因。可以通过将各种特殊HTML标记添加到页面的重要元素来适应各种香港跑狗图读取器的需求。

现代动态Web UI对于可访问性特别有问题,因为重要元素使用JavaScript动态地添加到页面中。自定义下拉菜单,模态,工具提示,手风琴内容和动态错误和通知对于香港跑狗图阅读器用户来说可能是具有挑战性的,因为HTML,JavaScript和香港跑狗图阅读器之间的通信故障。本机HTML和JavaScript无法将页面(文档对象模型)更新传送到香港跑狗图阅读器。开发人员需要将“焦点”(香港跑狗图阅读器的虚拟光标)移动到更改的UI的一部分。当模态打开开发人员时,需要将用户的重点放在那个模态上,以便香港跑狗图阅读器可以读取该内容和用户可以理解和与之交互。

Wai-aria可以弥合页面的原始HTML之间的差距以及观察用户看到的内容

这是通过使用调用的特殊HTML标记来完成的 围艾利亚 标签。 wai-aria(可访问的互联网应用程序)可以通过为开发人员提供标准化的方式来介绍页面的原始HTML所说的差距,以便为开发人员提供额外的含义,以向状态,属性,关系,角色和现场区域添加额外的含义筛选器否则将无法理解。  开发人员可以使用aria-leply解释读者在页面上每个标题的层次结构。使用ARIA标签开发人员可以添加标题来描述页面上的离散元素的目的。这有助于开发人员在不同元素之间创建明确的关系。开发人员还可以通过用aria-角色标记标记它们来引起重要控制,例如下拉菜单按钮将用以下标记标记:aria-spup:true。

看笔 简单的可访问标签 by Scott Vinkle (@svinkle.) 上 代码pen..

在上面的例子中的HTML中,选项卡使用每个列表项上的无序列表创建。 jQuery在单击选项卡时捕获单击事件并将“aria-selected”:'true'和'tig'和'tab-widgett__tab-content-active'添加到所选选项卡上,并通过添加'aria-selected'来隐藏其他选项卡:' false'到剩余的标签。在第127行中,将选项卡的初始属性设置在一起,这些代码段帮助香港跑狗图阅读器识别哪个选项卡可见。第35行的JavaScript还向选项卡添加了键盘支持。其余文件处理捕获点击和键盘事件,以便jQuery可以将“角色”和“演示文稿”属性添加到当前所选选项卡。

ARIA标记可以帮助香港跑狗图阅读器将自定义控件标记为单选按钮,以便在标记为:ARIA-The =单选按钮时将自定义控件解释为单选按钮。当应用程序有一个沙箱区域,即将反馈或更新传达给用户,它可以用Live Region标签标记:Aria-Live。这可确保当此元素上的文本更改时,它将通过香港跑狗图阅读器自动与用户发音。

页面刷新是香港跑狗图读取器的Web的关键部分,因为当页面刷新时,它向香港跑狗图阅读器发生信号,它应该将新页面宣布给用户并重新读取页面的内容到用户。这意味着单页Web应用程序对可访问性构成了特殊挑战。在一个页面应用程序中,没有完整页面刷新,以便香港跑狗图阅读器,因此不会警告用户更新的内容。结果将是用户没有对其操作的反馈。最佳解决方案是模拟本机页面刷新行为。在View加载时,更新页面标题并向用户宣布。

Wai-aria的完整规范由W3维护,如HTML本身的规范,在Web可访问性计划(WAI)下,但有时指南可能比规格更有用,所以这里有一些设计人员的一般指南:

  • 确保文本和背景之间存在视觉对比。
  • 不要单独使用颜色来传达信息;
  • 提供您的网站,以明确且一致的导航;
  • 确保表格元素明确包括相关标签;
  • 确保可以轻松识别错误消息等反馈元素;
  • 使用标题和间隔到组相关内容;
  • 提供图像的备用文本;
  • 考虑设计您的网站,以便通过键盘访问所有功能。

在开发一个网站时,您可以使网站更加易于访问的网站,在不深入深入的特殊可访问性标记或香港跑狗图阅读器测试中,有几种简单的决策。通过确保HTML通过其结构传达含义,您将帮助香港跑狗图读者处理信息以与视线用户页面上的相同方式。这对于使用与香港跑狗图阅读器结合使用放大镜的用户非常重要。

使用适当的HTML标记为标题,列表,表和其他元素允许香港跑狗图阅读器以熟悉的方式对用户的页面的结构进行分类。对于更多涉及的布局,HTML5提供了额外的元素,例如<nav> and <aside>为香港跑狗图阅读器用户更轻松地制定内容以了解。即使作家和内容策略家也可以对可访问性产生积极影响。通过为每个页面提供唯一的页面标题,并使用标题来传达每个网页的含义和结构。确保您编写的链接文本在页面的视觉上下文之外有意义(避免写入呼叫,如“点击此处”)。编写多媒体内容的成绩单和标题。

我们一起走了很远,因为所有这项工作的潜在受益者都是比你想象的更广泛的群体。如果您曾尝试用一只手使用移动应用程序,因为您的另一只手携带某些东西,如果您尝试使用鼠标与您的非主导手造成的伤害,您已经违反了这种情况。当你的手指粘性时,它不是很精彩,你仍然可以使用带指关节的键盘导航网站?我们所有人都不遗憾的是,易受变老的残疾人,这种残疾,这种残疾就像记忆丢失,听力良好,恶化的视觉和运动有限。  

网络的力量处于普遍性。无论残疾如何,每个人都是一个重要方面。 - Tim Berners-Lee,W3C主任和万维网的发明者

特色图片, 可访问性映像 via Shutterstock.