倡导无障碍UI设计/重庆UI设计

2017-11-22 20:17


           可访问性是当今的一个热门话题,而我们网络设备越老,就越热。这可能是一个sn outlook的前景,但我想说的是,现在是我们开始为每个人设计网络的时候了,因为网络为了每个人,而且我们越来越少能够预测哪里,什么时候,以及我们的工作如何被消耗。

可访问性不仅仅取决于开发人员


        作为开发人员,我们经常遇到无障碍后设计,当我们做一些事情,比如实现正确role和aria属性,确保导航是键盘友好的,负责任地隐藏元素。一般来说,我们的可访问性工作是思考如何使特定组件和功能可访问,如SVG图标系统或有用的工具提示。

      鉴于我们作为开发者的角色,这是有道理的。然而,可访问性缺陷通常起源于UI设计本身,而根据我们的工作环境,我们开发人员并不一定拥有权限或带宽来提倡我们交付的设计的可访问性。

例如,假设您负责将Sketch文件转换为单页WordPress网站

       这个设计终于得到了客户的认可,现在你有一个周末来建造这个东西,再加上两天的时间和QA合作来完善它。当你第一次看这个设计时,你会注意到,在小设备上,精美的衬线字体叠加在背景图像上对于低视力的访问者来说是难以阅读的。

您,可访问性的开发人员可以通过几种方式进行操作:

  1. 保持沉默,并通过在代码中提供可访问的选择来满足您的可访问性良知
  2. 继续开发,在开发过程中对UI进行无障碍改进,将其呈现在成品中,然后解释自己
  3. 编译建议更改的列表以发送给设计人员,并请求他们在模型中实施,以便开发人员

我最近遇到了这样的情况,如果你愿意,我会选择第一名。

如果我有足够的时间和精力,第二名会让我走得最远,但考虑到我作为这个高速机构的首次承包商的角色的性质,我希望能与他们建立一种工作关系,我觉得我会超越自己的界限,并没有准备好冒险过分发言。我之所以选择不出于类似的原因,主要是因为担心为已经非常繁忙的设计师造成更多的工作和压力。

但是现在我有了后见之明,可以在列表中添加第四项吗?

  1. 向用户界面设计中的每个人发送简明的非技术可访问性提示列表,以便将来可以进行更易于访问的设计选择

非技术辅助提示UI设计

        接下来是一个简单的语言,无行业术语的列表,“UI设计可访问性提示”,开发人员可以与所有人共享:UI设计人员,内容提供者,项目经理和客户。我们越能传播对可访问性的认识,并对我们交付实现的模型进行批判性思考,网络就越容易被访问!

        我已经从各种时髦的 网站 Feed中选择了下面的例子,我使用了Funkify Chrome扩展程序来模拟不同能力和障碍的网站访问者的观看体验。

第一:动画简单。
      
拥有权利的同时也被赋予了重大的责任。现代网络为我们提供了跳动,投射或投入任何内容的能力,但除了令人惊叹的因素外,这些动画是如何为您的网站读者带来体验的?动画是如何触发的?他们是否可能被错误地触发,导致您的网站访问者的体验流动混乱?

      如果我是艾伦,这个经验可能会把我从服务王的服务中引导出来!老人艾伦等人常常对技术感到沮丧。当她试图在已经受到伤害的护舷弯曲器之后阅读关于修理她的汽车的服务时,没有必要引起她那种压力。

确保背景和文字颜色有足够的对比。

      虽然中灰色的文字看起来正好在浅灰色的背景上,但是很难阅读......而且如果你在阳光下工作,就不可能阅读这里是前面提到的灰色灰色场景的一个例子:
文本和背景颜色的低对比度的例子。

而现在,受Funkify的“Sunshine Sue”过滤器影响的例子,我们认为我们的低对比度字幕是无形的!
由Funkify上的Sunshine Sue过滤器影响的低对比度文本/背景颜色的图像。
解决方案?通过WebAIM对比检查器运行您的颜色选择,以查看它们是否符合可读性和颜色对比的标准,如果不符合标准,请调整颜色值,直到颜色值为止。
使用WebAIM颜色对比检查工具调整颜色值。

在图像上叠加文字时要非常小心,否则不要

       将精美的衬线重叠在大标题图像上看起来恰到好处,但是如果稍微模糊了视觉,可以阅读它吗?如果不是的话,可以通过增亮文本颜色和增加黑色背景上图像的透明度来增加文本和图像之间的对比度。

      例如,在Burberry的网站上,用户必须从下拉菜单中选择才能进入该网站,但识别下拉菜单的文本在背景图片上几乎不可读。从设计的角度来看,有很多方法可以解决这个问题,但是对于一个简单的例子,我们可以在浅色文本下添加一个黑色背景,以提供更多的对比:
在图像上覆盖图像之前和之后的增加对比度的图像。
同样,虽然特斯拉新的Semi网站上的图像下方的精美的描述性文字是细腻而美丽的,但在用“模糊的比安卡”模拟轻微模糊的视觉时,几乎不可能:
在Tesla Semi的主页上模糊模拟的图像

仔细检查字体重量和大小的可读性。

      字体越细,尺寸越小,阅读就越困难。即使我作为一个听力高尚的人,也会发现自己有时会放大身体文字,因为即使色彩对比度达到了极速,它也是轻盈而又小巧的。如果你必须坚持轻量级的字体,增加大小和行高也可以创造奇迹。

 

表示外部链接。

      如果要求在新选项卡中打开链接,首先要询问是否应该作为要求,然后用UI中的小图标或备注在视觉上指明它。

此外,设计人员可以在设计中注明应该只有屏幕阅读器的文本,指出链接将使用户离开当前的观看门户。通过对Twitter对话的一些优秀回复,我们想到了这一点。

区分面向行动的社交媒体链接与个人资料链接。

    当我们看到小社交媒体图标时,我认为一般的假设是他们链接到相关的社交媒体配置文件。然而,有时这些图标实际上是一些行为,而不是链接到一个配置文件,打开一个“新的Tweet”对话框或类似的。这些行为应该被标记为这样。

不要依赖100%的图标和颜色进行交流。

     容易假设每个人都知道一个汉堡包图标表示一个菜单或每个人都熟悉LinkedIn的各种版本的图标。然而事实并非如此,对于那些比我们知之甚少的网站访客来说,这会引起一些混乱和侮辱。特别是如果你的观众往往比较熟悉和/或不太熟悉技术,那么确保你不依赖于你所认为的常识。

对颜色的意义依赖会导致类似的问题,更重要的是任何处理色盲的用户。

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!

合作流程
合作流程

重庆网站建设流程从提出需求到网站建设报价,再到网站建设,每一步都是规范和专业的。

常见问题
常见问题

什么是网站定制?网站报价如何?网站常见问题。

常见问题
售后保障

网站建设不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。