Visual:界面上的控件、文字的对比度是否满足 WCAG 最低标准?界面去掉颜色后是否可以正常使用? 确保你的 UI 组件可以被不能辨识颜色的用户使用。 一个叫 SEE 的 Chrome 扩展程序可以模拟色盲用户看到的界面,Daltonize extension 也有类似功能。 Visual:界面组件可以在「高对比度模式」下工作吗?现在时下常用的操作系统都支持高对比度模式。「High Contrast」是一个 Chrome extension ,可以模拟测试。 Visual:可以用「屏幕阅读器」使用所有 UI 控件吗?是否提供了所有可见文本信息的 文本替代方案(text alternatives )?你用 ARIA 增加了语义信息吗?( semantic information) Hearing:你的用户界面组件可以无声地工作吗? 关闭扬声器全工程使用测试下。 Motion:所有 UI 控件,是否可以只通过键盘操作?是否能避免用户陷入「焦点陷阱」(focus traps)?能否对键盘操作做出合适响应? 最后 Web 的一大作用就是更好地实现了人与人之间的交流与合作,「无障碍设计」在其中扮演着重要的角色。 也许你觉得在你的设计中要考虑这些种种规则,限制了你的创造力。 但如果这些规范限制将你的创造力推向极限,你就很有可能会做出既美观,同时还能满足更广泛人群使用的设计。如果关注点正确,你就会发现在任何挑战面前,都可以去寻找一系列解决办法,去满足主管、营销团队、Dribbble followers、等所有用户包括残疾人的需求。 “Do the hard work so our users don’t have to”, 是 Gov.UK platform 最初的设计原则之一。 「英雄所见略同」的还有这段话: Doing the hard work to make a service work well for everyone will make your service better for everyone. ——Tom Loosemore, Group Director of Digital Services, The Co-Op 也许你目前没有足够的时间和预算来做「无障碍设计」,但只要你把「无障碍设计」当做你日常工作要考虑的标准的一部分,你就会惊喜地发现,你其实能够满足很多无障碍设计标准。 将问题分解为可实施的小任务,可以一步步接近终极目标。比如,使用「对比度测试工具」测试你的色板,进而选用对比度更科学的颜色;写容易理解的文字;使用容易看清的字体;把内容规划得清清楚楚,让不同模块之间一致连贯;尽量减少设计中的杂乱等分散注意力的东西;写有用的说明文案…… 改善所有你能改善的,影响团队中的其他人,很快,你就会感觉到你的产品越来越好。不要低估自己所能做的改变。 Doing something is always better than doing nothing, every small change simply means your product is better optimised, with more people able to have a good experience with it. ——Ian Hamilton, Accessibility Specialist -END- 参考文章: 7 Things Every Designer Needs to Know about Accessibility,by:Jesse Hausler,2015.4.16 Designing accessible products,by:Adhithya,2017.4.14 Tips for making accessibility a core design principle,by:Oliver Lindberg,2017.8.31 Accessible UI Components For The Web,by:Addy Osmani,2016.7.23 Accessible Interface Design,Part 1: On Designing With Accessible Color,by:Nick Babich,2016.4.8 We need to talk about Accessibility on Chatbots,by:Caio Calado,2017.6.30,主要讲:How would a blind person use a chatbot? How would he or she interact with it? PS: 对 Accessibility fundamentals 感兴趣开发同学,可以去了解下 Udacity 的这门免费课程:Accessibility Tooling 相关规范、工具: WAI-ARIA Authoring Practices: W3C 规范的各种控件的无障碍标准,值得参考。 Accessibility testing tools:介绍一些无障碍相关测试工具。 Anybody can be an A11y Slacker:the A11y Slackers channel is full of people from around the world who’ll try to help. 其他工具: The Web Accessibility Toolbar (free add on for Internet Explorer) The Color Contrast Analyser (free desktop application for windows and Mac) aViewer (free desktop application for windows ) W3C Nu markup HTML conformance checker Firebug (free Firefox extension) Dom Inspector (free Firefox extension) Accprobe (free open source desktop application) Accessibility Inspector (free Mac appplication) UI Browser (NOT free Mac appplication) aXe — automated accessibility testing for your framework or browser of choice (责任编辑:admin) |