使用Axure RP进行易用原型开发指南

关于本指南

本指南在开发您的下一个Axure RP原型时将一些值得您考虑的可访问性问题汇集在一起,以及一些简单的步骤,您可以使用该工具将您的项目引导至对所有类型的人更友好的结果。

专家

在汇编本指南时,我们收集了来自以下Web可访问性专家的建议:

JSutton Media的老板詹妮弗·萨顿(Jennifer Sutton)。 Axure的Kip Mitchell最近采访了Jennifer关于可访问性和原型设计的主题。

道明银行数字可达性经理Aidan Tierney。 Aidan在2015年通过Access iQ访问了关于辅助功能和原型设计的内容

SapientRazorfish的经验技术总监兼accessib.ly博客的所有者Alison Walden。 艾莉森广泛地写了可访问性,但是她的2016年的演讲“创造无障碍体验开始于经验设计”在这里特别有用。

Terrill Thompson,华盛顿大学技术可访问性专家,可访问性博主。 Terrill的个人博客既是丰富的最佳实践信息,也是可访问网页设计的一个有益的例子。

富达投资公司UX Research的董事Ann Chadwick-Dias和Marguerite Bergel。 Ann和Margy是无障碍领域的着名研究人员,培训师和主持人,他们的工作已经被我们为本指南咨询过的几位专家所引用。

A Web for Everyone的作者Sarah Horton和Whitney Quesenbery。 萨拉和惠特尼的高度影响力的书是需要阅读的可访问性开明的Axure设计师。

上述链接深入探讨了本指南背后的推理,如果您有时间和意愿进行自学,请点击。 关于如何在Axure RP工作时实施我们的专家建议的实用技巧 – “怎么”与“为什么”读取相对。

官方指导方针(不是这些)

如果符合一套正式的辅助功能准则是您项目的明确目标,或者您希望遵循的准则是Web Content Accessibility Guidelines(WCAG)2.0当前版本。 WCAG旨在做到精确而彻底。 如果您的网站内容符合所有WCAG 2.0的AA级标准,您将得到两件事情:您很可能完全遵守任何适用的法律,并且您很可能拥有一个网站 残疾人的可用性比99%更好。

相反,Axure指南是非正式的 – 我们不会在这里引用WCAG标准。 相反,我们正在寻找亲和力。 只需几分钟时间,您就可以快速,可操作地阅读本指南,了解如何使您的内容更易于访问,而不是其他方式。 把它看作是适度的第一步的集合。
开始了!


色彩对比

在Axure RP中进行设计的一件好事就是输出HTML,然后将其输入到可在线使用的任何HTML可访问性检查程序中。 (WAVE是一个相当不错的选择)。将您的原型发布到Axure Share,将URL粘贴到您选择的检查工具中,然后选择几个报告的问题区域打出一点点。

如果您正在寻求项目利益相关者对比的问题,请尝试Jennifer Sutton向我们推荐的阳光测试。 在阳光灿烂的日子,把你最怀疑的利益相关者拿出来喝杯咖啡,然后把手机拿出来加载你的设计。 即使您的设备上的亮度一直向上,很可能是一个对比度不足的设计在阳光下将难以阅读。

Tab键顺序/焦点顺序

Axure RP图中的键盘可导航元素(例如表单元素)的Tab键顺序由“Outline”(大纲)窗格中元素的顺序决定。 (请查看我们的“组织小工具”培训页面的“图层顺序”部分了解更多详细信息。)如果您正在设计带有键盘导航的页面,请考虑将“大纲”的排序顺序暂时切换为“Back to Front” 窗格的本地工具栏中的“排序和筛选”按钮。

如果您想要一个通常不键盘导航的元素(如图像)在您的原型中可以导航,只需添加交互性即可。 即使只是一个空的OnClick案件将做!

指示重点

现代浏览器在浏览页面时可以很直观地显示焦点,但是如果您想要更多地控制这一点,则可以为元素添加特殊的焦点效果。 为此,请首先为您的小部件配置一个选定的交互风格。 (下面是我们的交互式样训练的部分这里是我们的交互式按钮教程,这是交互样式如何工作的一个很好的实践演示。)然后,添加OnFocus和OnLostFocus案例,如下所示:

OnFocus:
Case 1:
Set is selected of This equal to “true”

OnLostFocus:
Case 1:
Set is selected of This equal to “false”

由于这里的操作引用了“this”小部件,意味着在其上创建了这个小部件,所以您可以创建这些案例一次,然后快速复制 – 粘贴到其他所需的其他小部件。

错误提示/错误恢复/表单验证

Axure RP的强大的交互功能可以用来构建外观和感觉像真实的东西,从复杂的验证行为。 (这里是一个关于用动态验证和内联错误构建表单的Axure博客文章。)

在决定您的表单如何处理错误提示时,请考虑从以下三种可访问性友好的方法中选择一种:错误警报,然后重点关注; 错误在上面; 或内联错误。 (这里是WebAIM的一篇文章,详细介绍每个错误呈现选项。)如果您想要使用第一个选项,您将需要使用动态面板小部件在Axure RP中构建模态对话框。 (关于如何做一个具有灯箱效果的模式窗口的例子,请查看我们的灯箱教程。)

标题策略

您的内容值得一个周到的,一致的标题战略 – 这只是一个普遍的可用性最佳实践(这也恰好是一个可访问性的最佳实践)。 一旦你解决了这个问题,使用Axure RP的widget构件就可以轻松实现。 (这里是我们关于窗口小部件和页面样式的培训页面。)只需制作与每个标题级别对应的样式,或者在任何新的Axure RP文件中使用预设,然后让开发人员知道将这些级别与其相应的HTML标题级别 在您的制作内容中。

自动播放(滑块)

如果你想在你的Axure原型中有一个传送带或图像滑块,你当然可以做到这一点。 (这里是我们的图像轮播教程。)如果您想让自己的Axure RP设计的一个元素开始,您可以使用OnLoad或OnPageLoad事件轻松完成。 (以下是我们文档中的Axure RP事件的完整列表。)

但是,如果您构建一个传送带,并使其自动旋转,出于可访问性的原因,提供一个控制,如果想要停止自动旋转是一个好主意。 幸运的是,还有一个Axure RP功能! 在暂停按钮的OnClick事件上设置一个案例,添加一个“设置面板状态”操作,指定您的轮播动态面板,然后从“选择状态”下拉列表中选择“停止重复”选项。

使用Axure RP进行易用原型开发指南

链接文本和链接标签

以下是一些可访问的文本链接的特征:

  1. 它们在上下文之外是有意义的,所以没有“链接”,“信息”,“阅读更多”或“点击这里”文本链接。
  2. 他们只要描述链接的内容,但不再。 在某些情况下,单词链接是理想的。 而在其他情况下,需要五六个或更多的词来充分描述目标内容。
  3. 换句话说,可访问的链接回答了这个问题,“我想点击这个吗?”例如,如果您要创建一组用于向搜索过滤器添加参数的链接,则阅读“添加颜色”的文本链接要比 一个简单地说“颜色”。

如果链接的文本与屏幕阅读器可以读取的内容不同,那么没有任何问题 – 创建一个小部件备注字段来记录您的首选链接标签。 您可以让开发人员知道将您的“链接标签”注释字段中的文本附加到每个链接,使其对于有远见的用户是隐藏的,但可用于屏幕阅读器。 (这里是我们关于小部件和页面笔记的培训页面。)

表格控制标签

表单控件也需要好的标签。 创建一个名为“form label”的小部件注释字段,您可以使用该字段向开发小组指出每个表单元素的适当描述性文本。

替代文字

这是小部件注释的另一种情况。 创建一个名为“alt属性”的注释字段,为开发人员提供将用于任何相关图像的替代文本。

请记住,并非所有图像都需要alt属性,特别是如果它们是装饰性的,或者图像的内容已经被周围的文本描述了。 如果您不确定您的图片是否需要替换文本,或者如果是,请参考4音节中的这个方便易懂的决策图

查看页面/确认页面

如果您希望在您的Axure RP原型中逐页拉取用户输入的数据,以便在审阅页面或确认页面上显示,则需要使用的Axure RP功能是变量。 这里是我们在Axure支持网站上的变量页面这里是我们的“传递文本到下一页”教程

定时响应/“需要更多时间”对话框

Axure RP提供了大量不同的时间和日期变量,您可以使用这些变量在设计中构建真实的动态计数或倒数计时器。 下面是一个在Axure论坛上的帖子中可用时间和日期函数的完整列表这里是一个工作倒数计时器的.rp文件示例

只记得建立一个功能,允许用户请求更多的时间来完成他们的任务! 有两个按钮的模式对话框通常很好。


更多

我们的指南是否遗漏了一个在过去的项目中为您更容易获取原型的Axure RP技术? 请通过发送电子邮件contactus@axure.com告诉我们,我们可能会将您的建议添加到本指南中(以及信用!)。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code