必赢亚洲手机app下载


究竟写了哪些

花旗国济颠为富有安排爱好者

设计师应该领会的7件事

无障碍使残疾人群体可以感知、掌握、浏览网络、并与之暴发互动。想象那些世界具有的研发人士都知晓关于无障碍的学识:你承担规划,他们顶住开发…几乎完美

无障碍使残疾人群体可以感知、领会、浏览网络、并与之发生互动。想象这几个世界所有的研发人士都知晓有关无障碍的文化:您承担设计,他们担当开发…俨然完美,在那些世界上,只有设计自己会给残障人员使用产品时为他们创立麻烦~~

那么些指南将富含你所急需知道的要义,并使你的产品“已规划好”来满足“Section
508 ”(1973年美利坚联邦合众国劳工复健法创新版)和“Web内容无障碍指南2.0”的最低标准。还有部分会给前期开发和质地测试带来支持。

无障碍不是创新的绊脚石

无障碍不会迫使你打造一个猥琐、无聊或混乱的产品。它使您把一多重的自律原则融入你的筹划。那么些陈设约束使您探索新想法,并为你持有的用户安插出更好的出品。

当您读到那些指南时,要了然大家并不是在为设计同行而规划:

那太棒了!我十万火急要在Medium上把它写出来了

要为那些将与你产品进行交互的种种用户展开统筹:

要为所有人而计划

那足以概括那几个失明、眼眶脓肿或眼神低下的人,或有中耳炎和有咽部异物的人,那多少个暂时或永久行动不便的人。设计目的可以是年青人,老人,标准用户,休闲用户,和那些只为享受一个上流体验的人。像接受其余安顿约束那样接受这几个无障碍指南吧,这是创设巨大产品的一有的。

决不接纳颜色作为唯一传达音信的手段

这便于于那么些无法或很难区分三种颜色的用户,这包括有近视眼的人(12分之一的男性,200分之一的女性),低视力者(每30个人就有一个),或是盲人(每188人就有1个),使用颜色来卓绝展示或补给已区分其他新闻。

在这么些黑白图片中,你能提出几处错误状态?

有多少区域有警示?

绝半数以上人的答案是一个————“验证码”区域。那是因为咋舌号里面的三角表示出了问题

现在探视那些相同图片的彩色版,有多少个区域提醒警示?

颜色的改变导致全盘两样的结果

有了颜色,答案就改为“所有三个”,有为数不少可选的法门可以使那种视觉方式变得无障碍。你可以把青色三角形图标放在所有的不当区域中;你可以利用文本来提醒和平解决说为啥这一区域出错;你可以运用工具提示,粗边框,粗体,斜体,下划线等等。但唯一的平整就是不要只行使颜色,你会怎样设计那些注册表格,来使颜色不是显示警告的唯一的视觉手段呢?

改良:事实申明,上述PayPal无障碍问题的例子是本人的浏览器插件LastPass造成的。感谢PayPal的托尼amide(@评论区)为自己提议这么些题材。作为规划,三角形图标总是应该出现在警戒状态。

确保文本和背景之间有丰裕的相比较度

基于WCAG(Web内容无障碍指南),文本和文书背景之间的相比较率至少应该是4.5比1。即使你的字体是24PX,19PX像素或上述时,那一个比重就改成3:1.那本指南能够辅助到那几个低视力,角膜炎,视力恶化的用户,或者在显示屏上看小说的你。那意味,当文本是24像素、19像素或更大的,可以在反动背景上采用的最浅褐色是#
959595。

白色文本背景上的959595

对此较小的公文,可以在反动背景上行使的最浅棕色是#
767676,如若你有一个粉红色的背景,文本要求更暗。

白色文本背景上的#767676

有一些很棒的工具得以扶持您的统筹使用无障碍颜色调色板,例如Color
Safe。Webaim的颜色相比检查也很好用,它可以让你测试选中的水彩,标识或因素近期不在这一业内的牢笼范围内,例如无效按钮或菜单项。但占位符和文书仍有正式约束。举例来说,某流行的博客网站的文本相比较度低于标准。只有左手巨大的假名“M”符合标准的对照。

只有字母“M”符合标准的周旋统一

大英帝国广播公司的例证突显了一个透过颜色组合的用户界面。你可以告知她们正大力寻找的,能通过比较率的最轻的黄色是:#
767676

由此颜色相比较度使用的一个例证:

自我很自豪能与Salesforce系统设计团队工作,他们在Salesforce1的位移采取中运用了相比色彩指南。

在Salesforce1中通过的水彩

品尝使用高相比较度颜色组合,这几个经历过这一次教练的设计师们平日会觉得惊奇的是,他们仍然如此喜爱高相比较度的筹划,我相信您也会发现使用指定范围的相比较度来呈现文字将丝毫不会潜移默化您的制品。

也足以用“不说谎投影机”和“无障碍界面设计”来检查颜色比较度

为运用键盘的用户提供视觉焦点提醒

让大家花一点时刻来抒发对reset
CSS的谢谢,它有利于了具有现代设计师。没有reset
CSS,将很难在差其他装备和浏览器中建立出一致的感受。

现行让大家花一点岁月来责骂reset
CSS,责怪它在互联网上常见有关无障碍的失实中扮演的角色。

:focus {outline: 0;}

这一行的CSS使得一个精明能干的用户只用键盘来浏览网站大概是不能的。幸运的是,自从最初的CSS
reset被开放,现在广疾风行的新本子,如埃里克(Eric) Meyer’s已移除了那种focus伪类。

Unstyle(某种浏览器)的安插性意图是很高贵的:希望设计师和开发者放任默许形式的看好风格,而使用清晰,与他们网页匹配的风骨。大家不爱好藏蓝色虚线边框围绕着的IE和Firefox,或是Chrome的青色光环。

Chrome和Firefox的默许视觉聚焦状态

题目是,大部分网站尚未成立和谐的聚德州风。那些聚焦是网络用户自己的习惯成果,在网站上大多不存在。可以做一个飞跃查看网站是或不是提供视觉聚焦的试行,打开一个标签,并访问某商店的网站,重复按Tab键导航浏览页面。当您浏览时,你会看到一个聚焦选框吗?也许你在页面上见到有的有选框,一些并未?考虑下那对一个只利用键盘与网络互动的人造成的震慑。

只要您使用的是苹果电脑,你或许需求在系统预置选项>键盘>疾速键下启用全键盘访问,那几个设置在屏幕的尾部。

要是您移除了默许聚焦格局,请用一些比浏览器提供的更好的精选来代替它,在底下的例证中,英帝国广播公司应用了一个颜料条来展现哪个链接被入选

推文(Tweet)结合使用了一个默许聚焦和一个工具提醒来浮现键盘聚焦。图标也从紫色变成肉色,那使用了八个独立的视觉提示来为利用键盘的用户聚焦。

当你提供了您自己的聚玉溪风时,一定要铲除默许状态,那样您才不会拿走像上边那几个事例一样的景色,Chrome的红色矩形重叠了这些菜单上的紫色方块。

那丑哭了,但那可不是由无障碍“造成”的

留神表单

近几年来,大家在表单的样式方面经验了向上。现代统筹已经废弃了已知的传统识别属性,用一种更简短的形式来支撑互相,近来的花样缺乏二种对无障碍相当关键的实际项:明确限制的分界和明朗的竹签。

无界限表单

下边是一个传统文书输入的事例。那是一个包涵确定边界的矩形。它可以填充颜色但不肯定要填写。还有一个鲜明的价签,在那些事例右侧区域的地点。

一个价值观的文件输入字段

显然限制区域界线对于那么些行动不便和有认知障碍的用户是可怜主要的。在用户接纳正规或适应性定点设备(鼠标,键盘等)时,精晓点击目标的任务和分寸很要紧。有认知障碍的用户可能很难与缺乏常见视觉线索的区域爆发互动,甚至很难发现那一个区域。

下边是一个物色区域的事例,那是一个很流行的记叙应用程序。

纵然自己想输入搜索词,我应当点击哪个地方呢?为了非凡浮现效果,光标也被移除了。

其一显示屏上唯有一个输入区域。你能猜到哪儿是这一区域的边框吗?答案是只要你点击“search
notes”的其他字母,它就会把您的拉进输入区域。

这是另一个有关无疆界区域的例子 ———
一个盛行博客平台。下边是这一页面上的五个输入字段。在体现屏幕上,我要点击哪儿才能进来“
Tell your story……”文字区域啊?

在何方点击“tell their story”呢?

下边是添加了一个紫色的矩形到体现的公文区域边框的同个界面。如若你点击该区域以下的其余地点,不会有其它影响。

比方你点击粉色框的外侧,也不会有反应

下边是标注设计的另一个事例。它也从未应用传统输入的视觉效果,但为残障用户提供了更加多的信息。事件标题在两条水平线之间,并且用户可以点击下方两根线之间的其余区域来输入他们的风浪。

这不是限制标准,但我们仍要为用户提供充足的提醒线索,你能为那一个设计师想出一部分任何的选项啊?你将何以统筹一个记事本或博客公布的应用程序?

苹果电脑,无标签表单

标签可以告知用户这么些表单的目标。无论光标放在区域内或在完毕输入后,标签都会维持其一蹴而就。占位符文本是视觉标签一个不佳的替代品。

这是非凡低相比较度的例子,在上面的多个例子中,唯有一个的相比度满意了大家的所急需的4.5:1。

只有“Search 推特(TWTR.US)”占位符具有所需的微小比较度

占位符文本被移除时,如上边这几个事例中,我应该输入什么到文本中?在JetBlue的例子中,我应该输入我的用户名,电子邮件地址,照旧自己的TrueBlue号码?在Caviar的事例中,我应该“
Get
Started”(起头)于本人最欣赏的食物,喜欢的食堂,照旧自己的地方呢?价格领域是最小值和最大值,依然超过和小于呢?

从未有过标签,用户可能很难领会应该输入什么品种的说话

那里有一个更便于的方式来完毕呈现以上价格综合区域的部署性,尽管在大家填写完事后,大家也能看到最小值和最大值标签。

可视标签

幸免造成识别争执

Q: 什么时候菜单不再是菜单?

A: 当它是一个非模态对话框的时候

本条问题是现在网络无障碍问题的基本。为了更足够的精晓,可以看下W3C的创作实践的设计形式。那是指引怎么样建立一个现行游人如织大面积的设计格局,包括菜单、模态、自动填充,和其它。

那几个格局都有一套特定的HTML语义,键盘的用户和ARIA属性。那个ARIA属性提醒阅读屏幕的用户在采取键盘时怎么样与组件发生交互功能。当用户与组件发生互动时,他们还提供情形更新。例如,他们教会人们使用箭头键上下移动表单来与一个菜系发生互动。

一个简便的电动填写的typeahead(一种HTML组件)

这是一个均等的typeahead, 然而在各类列表项旁边都有图标

在那些例子中 ,图标用于清晰提示对象

这个大多是一致的用户界面方式,用户进入了输入形式时,蕴含所有可能结果的选框出现在人世。用户可以拔取箭头键或鼠标定位从列表中选用一个连串。

上边的事例是有识别争辩的自行填写。用户不仅可以筛选并从列表中拔取一个品种,他们还足以因此点击铅笔或垃圾桶图标来挑选编辑或删除每个列表项。那三个按钮的进入让这一个活动填充有了辨认冲突。

一个潜伏的意义设置,无法透过正式技术与救助技术活动填写

那多亏无障碍问题中的一有些,因为它打破了机动填写的业内键盘交互模型。扶助技术不能每便都识别身份,操作,和零部件状态,因为W3C的WAI没有定义那类用户界面的交换情势。

平等的条条框框也适用于菜单。在上面Virgin
America的事例中,纵然它们有非凡相像的视觉元素,只是左边下拉框是目不巩膜炎的“菜单”。右边的那是一个黑白情势对话框。

“From”下拉菜单是菜单。“Guests”下拉列表是一个由W3C定义的非模态对话框,每个菜单都是一个插件,为用户提供了一个选项列表。一旦大家每行提供五个选项,就像是左边的事例一样,它就不再是菜单。那改变了利用键盘交互情势,从使用箭头键变成使用Tab键。它改变了键盘聚焦的处理方式,和下拉框关闭后聚焦的去向。

差距于下边的事例中的自动填充,非模态对话框可以幸运的姣好无障碍。要精晓它们中间的区分和对用户体验的熏陶。要清楚设计小小变更可能导致用户交互形式的改观。那将保障您为您的产品选用适宜的格局。

永不强求人们追寻东西

这么些规范主要为残障人员提供服务。那包括只用键盘的用户,和那几个使用语音识别工具(Dragon
NaturallySpeaking)来与网页爆发互动的用户。键盘用户和话音支持技术(如Dragon)完全看重于屏幕上可操作项目。如若一个链接或按钮不可以观望或被语音检测到,那么请按下“clicked”就改为空话。假设一个只行使键盘的用户看不到一个页面按钮,我们怎么期望把她们导航到新的页面?

上边是Dragon Naturally Speaking
(一个数字识别链接系统)Gmail的显示屏截图,所有的链接都被识别为数字。用户可以大声说出一个数字来激活一个链接。假如一个区域只有悬浮起来才能看见链接如何是好吧?大家会用数字标识在空白处。

Dragon 数字识别链接,大声说数字点击一个链接

自身领悟悬浮状态下隐藏可操作项目标做法为何流行起来。它看成一个化解方案,一蹴而就的周到了出品的可用性,这一点是由微机地理学家艾伦(Alan)凯指出的。

“Simple things should be simple, complex things should be possible.”
-Alan Kay

“ 简单的作业就活该是粗略的,复杂的业务也应该是唯恐的。”

我坚决地相信这一反驳,但它至少应该能使所有用户,包蕴这一个有残障的用户,使复杂也改成“可能”。不幸的是,许多人都尚未真的领会无障碍的实在意义,扭曲了艾伦Kay的话。

“Primary things should be visible, secondary things should be shown on
hover.”

“主要的工作应该是可知的,次要的作业应该在漂移状态显示。”

永不将表现和音讯隐藏在漂移状态,而是要追究更具兼容性的选料:

-放置次要行为在菜单中(或非模态对话框),不要使用悬浮状态来掩藏触发机制。

-减轻次要图标的比较度,悬浮时再增添相比较度。

-为显然的物品显得触发机制。一个新闻图标比空白更契合做触发机制

那是一个LinkedIn的例子. 上边是自己的个人资料页的截图

我LinkedIn的简介banner

上面是自个儿的鼠标停在个体资料卡上将来的情状

自身LinkedIn的简介banner的终止状态显示

蓦地冒出了部分视觉标识,我得以独立编制本页的不少区域,包括自我的名字,标题,以前的办事,教育,甚至自己的个人资料照片。当自己把鼠标移到我的题目时:文本会变成青色,表示自己可以点击了:

文件变蓝

上边是一个无障碍的缓解问题方法,那些布置也许会解决少数用户群的题目。我放置了小小的铅笔在相邻区域。他们总在当年。

一个缓解方案:对于在线可编制字段呈现出小的藏黄色铅笔,当我悬停在一个区域时,它会变成藏蓝色的。

在悬浮和键盘聚焦上显示黄色区域

当显示那类的解决方案时,设计师会被猜疑:

“那正是太重了,不是吗?”

想必是那般,但那只是解决办法的一种可能。其余,它只现出在自我自己的个人资料页。大家会花在温馨的LinkedIn个人资料上花多少时间?那种“重”对于通用无障碍性是不是是公平考量?倘使用户不喜欢那种用铅笔标识大家能提供什么其余选拔呢?

那是缘于伊芙rnote的另一个例证。那是一列的笔记。当用户的鼠标悬停

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图