Accessability(A11Y)最近完成了一个项目在进入开发环境前的收尾工作,其中一项就是无障碍设计测试。公司有专业的无障碍设计管控人员,但基本常识还是需要学习。看了一些资料,总结了一些基础知识点。视觉考虑色盲。避免使用颜色来传达信息。确保文本大小是用户可调的。带有信息的元素需要用aria标记,这样用户就可以在屏幕阅读器的帮助下获取信息。HearingConsiderhearing-impaireduseaudiotransmission信息的元素需要添加文本信息,以确保用户在不使用音频的情况下也能获得相同的信息。移动性考虑了视觉障碍和无鼠标操作。用户可以在不使用鼠标或仅使用键盘的屏幕的情况下完成页面。上下移动时仅使用键盘浏览整个页面。如果必须使用鼠标进行任何操作,那么为了确保所有的tab键都可以键入而设计所有可编辑区域是不合理的。合理设计键盘快捷键,帮助用户快速移动。考虑各种辅助工具访问应用程序需要能够使用屏幕阅读器等辅助工具正常工作避免使用屏幕闪烁等设计避免使用基于时间的设计(因为某些辅助工具需要更长的时间来读取屏幕信息)如何判断是否该应用程序可访问?在视觉高对比度模式下,您还可以轻松阅读信息。非文本信息由文本信息补充。使用屏幕阅读器时,您可以正常浏览和获取信息。在黑白显示下,您也可以正常阅读信息。标签a)是使用下划线(帮助色盲、色弱者区分)b)标签提示信息是否合理(比如有的标签使用'clickhere',用户无法判断每个标签当一个屏幕上有多个'点击这里'分别跳转到哪里)在只使用键盘操作的情况下,输入,复选框等应用程序也可以正常使用。所有功能都可以通过键盘进行交互。如果需要模糊,需要增加键盘操作实现不使用tab-index>0-1:脚本使用焦点0:允许用户聚焦如果有元素使用省略号,需要提供可以通过键盘操作读取省略号。焦点操作需要明确焦点在哪个元素上,需要支持其他字体。该工具会更改字体以帮助用户阅读,并确保即使更改字体也能正常使用应用程序。时间元素可以暂停、放慢吗?AngularA11Y设计按钮按钮尽量使用button标签,避免使用img、div、span等标签作为按钮(button标签自带clickable、tab、focus等。功能,并在使用屏幕阅读器时读取按钮内容)如果需要使用非按钮标签作为按钮,添加role="button"属性Forms表单使用表单标签(带回车键进入表单)inputusearia-labelandplaceholder(屏幕阅读器读取aria-label)input和label一起使用(屏幕阅读器可以直接根据label计算出Inputname)//最佳实践1
