一封关于俄罗斯和乌克兰之间军事紧张关系的公开信. 在这里阅读

如何创建可访问的软件产品

介绍 

用户体验并非一直是构建软件的核心. 在科技发展的早期, 甚至当第一个可视化操作系统已经被创造出来的时候, 软件不应该只做它的工作,这一点并不明显, 但也要容易和愉快的使用. 现在, 用户体验在开发新软件的时候就已经被考虑在内了. 如果不分析用户角色,就不可能开始创造新内容, 他们的目标和奋斗, 并确保用户流符合最佳用户体验实践. 但这还不够, 作为产品所有者,还应该让软件具有包容性,并在开发过程中考虑可访问性. 

什么是软件易访问性 

可访问性是一套构建软件的实践,用于解决与残疾人同等用户体验相关的歧视性问题. 可访问性意味着产品所有者应该关心残疾人,而不仅仅是出于实际考虑,如扩展用户基础, 但也因为获取信息被定义为一项基本人权(来源: UN

越来越多的企业和机构已经开始关注软件的可访问性. 例如, 宝博买球的一个客户, 耶鲁大学情商研究中心, 期望所有的软件产品, 包括由供应商开发的, 满足耶鲁大学的 易访问性需求.

软件易访问性需求 

使软件易于访问, 产品所有者应该评估网络 Content中阐述的四个可访问性原则 可访问性的指导方针. 从一开始设计产品就必须牢记这些原则,因为它们会影响到整个用户体验. 如果违反了某些可访问性原则,您可能最终会重新构建整个用户流. 

可访问性原则说的是可访问性, 软件必须是可感知的, 可操作的, 可以理解和健壮. 

  1. 可感知的: 用户界面无法恢复. 应该没有隐藏的数据, 所有非文本数据都应该有文本替代, 非文本选项应该尽量少(如图标), 图标的菜单项). 如果应用程序包含预先录制的音频或视频, 它必须提供获取那些录音脚本的途径.
  2. 可操作的: UI组件和导航必须是可操作的. 产品所有者, 这意味着应用程序不应该包含有时间限制的导航选项, 设备有限, 或layout-limited. 确保当用户将设备方向更改为纵向或横向时,导航仍然可用. 不要依赖闪烁或闪光来获得用户的注意,因为它可能会引起癫痫. 总是在应用程序中指定用户位置和可能的导航选项.  
  3. 可以理解的: 用户界面的信息和操作必须是可以理解的. 避免使用缩写和复杂词汇使界面超载. 说明必须清晰简洁. 
  4. 健壮的: 内容必须足够健壮,能够被各种各样的用户代理解释, 包括辅助技术. 软件所使用的技术应该在不降低用户体验质量的前提下支持尽可能多的辅助技术. 这意味着你的产品必须具有自动的可访问性,以便对屏幕读者友好, 外部键盘, 浏览器插件, 等. 

如何满足可访问性需求

软件的可访问性设计 

在用户界面设计中有几个简单的步骤,易于实现,每个人都可以使用它们,使他们的产品更实惠. 在这些规则的帮助下,你不仅可以帮助残疾人,也可以帮助其他人. 以这种方式设计, 有视力问题的人可以使用高质量、易读的文本,这也可以帮助那些在户外明亮阳光下使用这款应用的人获得完美的视力.

所以,让宝博体育买球仔细看看这些迈向网页可访问性的步骤,了解每一个步骤.

  • 颜色与颜色对比.

颜色和颜色对比在界面设计中扮演着重要的角色,提前考虑它们是非常重要的,并使用那些对所有用户都安全的颜色,以确保网页的可访问性. 以保证色彩和色彩对比的正确性, 有几个有用的工具可以检查开发中的可访问性的合规性. 其中一个工具是颜色对比检查器, 你只需要输入想要的组合,程序就会给你结果. 或者如果你在Figma工作, 然后你只需要安装像对比度和Stark这样的插件, 他们可以给你更详细的信息. 也, Stark有一个视觉模拟器,通过这个模拟器,你可以通过一个有普通颜色视觉挑战的人的眼睛来观察你自己的设计.

为耶鲁大学情绪智力中心开发的网络应用程序
  • 为设计元素使用额外的指标.

颜色并不是传达信息的唯一视觉手段, 表示一个动作, 促使一个响应, 或者突出显示一个视觉元素. 这些是可访问性工具的一部分,使视障人士更容易理解他需要什么, 除了对比色, 标志等指标, 图标, 模式, 等. 使用. 的字体, you can use a different weight or underline style; for 图标, 不同的状态和大小,以确保开发中的可访问性.

 MEAT应用程序是为耶鲁大学情绪智力中心开发的
  • 标记语言.

在开发中设计可访问性时,使用易于理解的标记语言以避免丢失元素的主要功能或属性. 关键是在设计时使用正确的结构元素, 以便浏览器能够读取它们包含的内容,以及浏览器应该如何显示或处理这些内容. 页面的组件和结构构成了可访问性考虑事项树. 这棵树提供了屏幕阅读器,可以让有视力障碍的人或那些有文本障碍的人“听”页面.

  • 在字段中使用标签而不是占位符.

总是帮助人们弄清楚该做什么,并在表格中填写. 即使在用户填写输入时,快捷键最好也不要消失. 当您在开发中设计可访问性时, 重要的是,人们总是看到和知道他们所写的内容的背景. 也, 你不需要用支持信息把所有东西弄得乱七八糟, 只是要确保这个人有足够的信息来顺利地完成任务, 这将有助于实现自动的可访问性.

  • 关注的指标.

焦点指示器可以帮助人们知道哪些元素具有键盘焦点,也可以帮助他们在浏览网站时了解自己的位置,从而在开发端实现自动的可访问性. 必须可用于焦点的元素是链接, 表单字段, 小部件, 按钮, 和菜单项. 最好马上把这一点考虑进去, 甚至在造型发展阶段, 这样,开发人员就可以更容易地为接口元素实现所需的行为, 设计师也不需要重做工作.

  • 分文本内容.

所有呈现给用户的非文本内容都有一个用于类似目的的文本替代方案. 视障人士经常使用屏幕阅读器来“听”互联网的声音,并弥补网站的可访问性差距. 可访问性服务将文本转换为语音,这样用户就可以在网站上听到这些文字. 

  • 使用键盘导航.

键盘可访问性是网页可访问性最重要的方面之一. 许多没有任何损伤的高级用户经常使用键盘来浏览网站. 对于有马达的人来说, 视觉, 或基于文本的障碍, 谁依赖屏幕阅读器, 这是浏览内容的唯一方法.

软件的可访问性开发 

从可访问性网站的开发角度来看,实现可访问性需要考虑的事项: 

  1. 遵循平台可访问性指南. 这两个主要的移动平台都有可访问性指南(for 安卓,因为 iOS. 流行的跨平台框架也提供了丰富的可访问性说明. 这是一个 对颤振
  2. 所有可点击的区域应该最小为48×48像素 
  3. 对所有图片使用ALT属性 
  4. 确保所有元素都有轮廓 
  5. 使用HTML语义元素 

可访问性测试

测试网页易访问性的工具: 

  • 灯塔Chrome扩展. 插件检查网页内容的可访问性问题,并给你一个 可访问性的路线图. Lighthouse为您自动进行易访问性测试,并提供总分,并就如何改善网页易访问性给出详细建议. 例如, 它可以指向没有ALT属性的图像,因此会被屏幕阅读器错过, 一个常见的可访问性问题. Or, 它可以指定颜色对比不够的地方,这有助于一个更容易访问的网络.
  • 斧浏览器扩展. 这个扩展检查网页的可访问性问题的更广泛的列表,与WCAG A和AA标准相对应,使其成为一个 访问的网站. Axe提供了问题的详细列表,以及关于如何修复这些问题以实现可访问性遵从性的建议.
  • 尽管用于自动易访问性测试的工具非常有用, 他们不能抓住所有的问题. 最好的方法是将可访问性测试作为测试过程的一部分,并根据WCAG标准手动运行web服务或移动应用程序的评估. 在宝博买球,宝博体育买球为回归测试的每个A和AA标准创建了电子表格. 宝博体育买球还建议在开发可访问性时使用可访问性工具. 例如:
    1. 打开屏幕阅读器,看看您的应用程序是否可用. 
    2. 显著放大或缩小字体大小 
    3. 使用你的网站只使用键盘 
    4. 在两个屏幕方向上使用应用程序 
    5. 如果所有多媒体数据都被关闭,请检查产品是否可用 

可访问性测试并不局限于检查列表. WCAG提供 例描述 它们的每一个原则都可以用于可访问性测试.

Summary

成功的实现, 移动和网页可访问性应该被视为开发过程中的一个坚实部分. 在工程团队中培养移情文化是很重要的, 强调残疾人首先是人. 培养以人为本的语言,深入学习包容性设计指南, 从几个角色的角度运行产品评估可以实现可访问性遵从性. 灵感可以在诸如Microsoft包容性设计指南这样的资源中找到, GDS网站可访问性角色, 或者按字母顺序排列的 可访问性问题.

资源

http://www.w3.org/WAI/fundamentals/ 

WCAG指南: http://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#principle1 

移动可访问性的考虑: http://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/ 

了解更多关于耶鲁情绪智力中心的信息: http://www.ycei.org/

了解更多有关学校气候演练的资料: http://inspiredstudents.org/yale-school-climate-walkthrough/

致谢

特别感谢Jessica Hoffmann, 妮可Elbertson, 耶鲁大学情绪智力研究中心的Christina Cipriano和Rachel Baumsteiger为您审阅这篇文章并提供有用的评论.

感谢Alina Chepinoha (宝博买球的UI/UX设计师)和Viktor Tsymbal (宝博买球的软件工程师)为本文提供专业知识和咨询.

友情链接: 1 2 3 4 5 6 7 8 9 10