5. 设计建议
本文章主要指出一些我们应当避免的设计,并总结一些设计建议。
1. 应当慎重设计既可hover又可click的元素
同一个元素可被hover、可被click,但触发的效果不同,会对使用读屏软件的用户带来麻烦。
比如对于登录按钮,当我的鼠标悬浮在登录按钮上时,可以出来登录菜单栏,当我们点击登录按钮时,可以进入个人中心,这样的设计对于视觉正常的用户而言,页面更加简洁明了。
但是对于需要使用读屏器的视觉障碍用户而言,体验感就不是那么好了,因为他们只能通过键盘进行操作,而键盘是无法模拟鼠标的hover这样的一个形态,因此上述页面对于使用读屏器的视觉障碍用户而言,就无法进入视觉用户可以通过hover而见到的登录菜单栏了,这样就直接影响了使用读屏器的这些用户的体验。
2. 尽量使用文本而不是文本图片
当我们在浏览网页的时候,偶尔会遇到图片无法加载的情况,此时比较好的现象是,在未加载出来的图片处出现了替代的文本,让我们知道这张原本应该出现的图片的含义,这可以通过在img中添加alt属性完成。在我们进行网页无障碍开发过程中,也需要对图片添加alt属性的描述,这样我们的视觉障碍用户在使用读屏软件时,也能了解到页面上图片所代表的内容。
而考虑到读屏软件用户的体验,在填写图片的alt属性时,我们需要遵循以下几点规则:
- 精确的传达出图片的内容和功能。
- 尽可能的简洁。
- 不要提供重复信息。
- 不要使用一些诸如“…的图片”这样的冗余语句。
- 不要在alt中添加换行符。
- 对于无意义的图片,alt=""。
- WCAG规定不允许使用文字图片,若是英文图片,转化为相应的英文文字,对于图片描述,转化为相应文字。
因此图片+alt
的方式只适用于少量文本,大量的文字内容还是需要放在文本的位置处。
不断补充中……