构建站点时,tota11y可帮助你实现可视化,属于一个辅助技术。详情参见6月8日的发布日志。初的目的是为了减少a11y测试时的缺陷。
Accessibility (a11y) 的测试进程往往是冗长和混乱不清的,在许多的案例中,开发者必须有一定的Accessibility知识才能弄懂结果。
Accessibility(a11y),指的是软件产品的可访问性、易用性,特别是指对于视力低下等残障人士的使用上的无障碍性。2008年,致力于开发Web标准的国际组织万维网联盟(World Wide Web Consortium,W3C)发布了Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0文档定义了一系列指导方针,以提高Web内容对于残疾人的可访问性。
当前,越来越多的软件开发人员意识到可访问性 (Accessibility) 的重要性,发布的网页或应用程序必须能够被多种用户特别是残疾人群无障碍使用,Web站点如何做到用户使用的无障碍性,是值得Web开发人员重视及思考的问题,页面需要在任何解释环境下都具有良好的易读性不容忽视。
灵感
Accessibility的难解决有很多原因,尽管当前的工作提供一种检查许多Accessibility violations的机制,但仍然有大量的问题,尤其是开发者对于所困惑的问题依旧无解——许多这些错误无法实实在在看见,事情对我们正常人没多大的影响,另一方面也无完美的修复方案。
tota11y的目标是解决这些问题,并通过一种有趣和交互的方式来看见可视化后的问题。不仅是实现Web端很好地访问,而且开发者也应获得一定的能力来修复和预防accessibility violations的发生。
背景故事
在1月,我们就着手提供提高Khan Academy的无障碍访问性,在这段时间,我们提升了很多,获得了每一个页面bug的手信息,也想出了很多的办法来修复。John和我对这些新发现做了细心的研究,写了一个测试和检测violations的工具——Chrome’s Accessibility Developer Tools,并应用于工作中。
几周后,我们已经修复了我们网站上的一些重大的accessibility错误,并且学习到了大量关于辅助技术的知识。
困难的阶段来了!
我们觉得有能力修复我们网站上的大多数accessibility violations,但是我们无法有效地传播这些经验给其它的团队。我们不能让每一位Khan Academy employee参与进来,他们不愿报告和修复accessibility violations。
我们开启谈话、写文档和发送邮件,但是效果甚微,此外我们也没获得与我们所做工作想对应的尊重。 ̄へ ̄
简单来说,我们的开发团队一直无法完全理解正遭受困扰人的问题所在,也就无法找出修复的方法。
遇见tota11y
大约一月前,我们开始开发tota11y,一个Khan Academy的”Web Frontend” 团队的内部项目。
目标是让开发者尽可能简单地实现手工accessibility测试,且作为他们日常工作的一部分。而不再需要开发团队针对不理解的violations去做冗长复杂的审核报高,我们想要提供简单的可视化,在他们眼前的浏览器上就好。
接着,我们有了”annotations”的想法,高亮出当前文件部分就好,以及指出错误、成功或者仅仅标注出重要的tags,如headings或ARIA landmarks。
tota11y早期的证明型概念。
后来,我们进一步加强和扩展”annotations”的想法,所以你将看到更详细的错误信息、修复建议,以及更多。
tota11y的实现
tota11y是一个single JavaScript file,你可以在的文档中看到包含如下的内容:
<script src="tota11y.min.js"></script>
一旦你看到窗口底部的这个眼睛,即刻开启:
tota11y目前包括以下的插件:
detecting images with/without alt text (and presentation images)
labeling text with contrast violations (and suggesting appropriate color combinations)
outlining a document’s heading structure and pointing out any errors with it
highlighting input fields without appropriate labels (and suggesting fixes based on context)
labeling all ARIA landmarks on the page
detecting unclear link text such as “Click here” and “More”
更多细节参见:Google Chrome’s Accessibility Developer Tools
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。