5. 设计建议

本文章主要指出一些我们应当避免的设计,并总结一些设计建议。

1. 应当慎重设计既可hover又可click的元素

同一个元素可被hover、可被click,但触发的效果不同,会对使用读屏软件的用户带来麻烦。

比如对于登录按钮,当我的鼠标悬浮在登录按钮上时,可以出来登录菜单栏,当我们点击登录按钮时,可以进入个人中心,这样的设计对于视觉正常的用户而言,页面更加简洁明了。

但是对于需要使用读屏器的视觉障碍用户而言,体验感就不是那么好了,因为他们只能通过键盘进行操作,而键盘是无法模拟鼠标的hover这样的一个形态,因此上述页面对于使用读屏器的视觉障碍用户而言,就无法进入视觉用户可以通过hover而见到的登录菜单栏了,这样就直接影响了使用读屏器的这些用户的体验。

2. 尽量使用文本而不是文本图片

当我们在浏览网页的时候,偶尔会遇到图片无法加载的情况,此时比较好的现象是,在未加载出来的图片处出现了替代的文本,让我们知道这张原本应该出现的图片的含义,这可以通过在img中添加alt属性完成。在我们进行网页无障碍开发过程中,也需要对图片添加alt属性的描述,这样我们的视觉障碍用户在使用读屏软件时,也能了解到页面上图片所代表的内容。

而考虑到读屏软件用户的体验,在填写图片的alt属性时,我们需要遵循以下几点规则:

  • 精确的传达出图片的内容和功能。
  • 尽可能的简洁。
  • 不要提供重复信息。
  • 不要使用一些诸如“…的图片”这样的冗余语句。
  • 不要在alt中添加换行符。
  • 对于无意义的图片,alt=""。
  • WCAG规定不允许使用文字图片,若是英文图片,转化为相应的英文文字,对于图片描述,转化为相应文字。

因此图片+alt的方式只适用于少量文本,大量的文字内容还是需要放在文本的位置处。

不断补充中……

3. 参考资料

results matching ""

    No results matching ""